Dec

1

On two of my previous posts about Object Creation (can be found here and there), I explained the fundamental concept of the basics of object-oriented programming. In the world of object-oriented programming, we say Object Creation belongs to factory paradigm, in factory paradigm, properties of an object can be defined dynamically after its creation. Besides factory paradigm, there are two other fundamental paradigms in JavaScript OOP, one is constructor paradigm, and another is prototype paradigm. Let’s look at the concepts and rationals behind these two paradigms before we make the comparison.

Creating a constructor is just as easy as defining a factory function. A class in JavaScript is actually nothing more than a function. This function also serves as the constructor of the class. For those who didn’t read my previous post about Object Creation (factory function paradigm), here is a quick look of the code: 

var newObject = new Object();
newObject.firstName = "james";
newObject.sayName = function() {
alert(this.firstName);
}
newObject.sayName();

Now let’s write that newObject as a class, renamed newClass:

function newClass() {
alert("constructor");
this.firstName = "james";
this.sayName = function() {
alert(this.firstName);
}
}
var nc = new newClass();
nc.sayName();

Now let’s see how to use prototype paradigm concept to code the previous example:

function newClass() {
this.firstName = "james";
}
newClass.prototype.sayName = function() {
alert(this.firstName);
}
var nc = new newClass();
nc.sayName();

Now let’s compare the constructor and prototype approach, well, both can do the same job but the ways of doing it are different. Let’s say the constructor class first, the logic is clear, it’s a singleton class that is well constructed, and, to many programmers who are familiar with C, this is very easy to comprehend. But it has one problem, in the above example, each instance of newClass has a copy of firstName and a copy of the sayName() method, so every instance adds more memory usage.

Now let’s take a look at the prototype approach, prototype paradigm is quite unique to JavaScript, it’s not commonly seen in any other programming language. (If you know Flash 5, 6 and ActionScript 1.0 programming, you can actually find that prototype is the required method to do object-oreinted programming, that’s because both JavaScript and ActionScript are based on ECMAScript. But now with the release of ActionScript 2.0 and 3.0, class constructor was introduced in Flash.) Although it’s unique, but it’s not that hard to understand, we can simply see it as a simplistic form of inheritance. Basically, the way it works is that when you construct a new instance of an object, all the properties and methods defined in the prototype of the object are attached to the new instance at runtime. the advantage of prototype is its nature of inheritance. We can see it from the example I coded above, no matter how many instances of newClass you create, only a single instance of the sayName() function will be in memory. the memory usage it causes will definitely lower than constructor method.

Below are two demo pages, the first one is constructor demo, the second one is prototype demo:
http://www.lab.highub.com/javascript/prototype.html
http://www.lab.highub.com/javascript/constructor.html

So Both constructor paradigm and prototype paradigm has it’s logic and advantage, instead of fighting over which one to use, we should really see which is more suitable for a particular situation. AND the best part is that we could actually use them together, and this blended approach is called Hybrid constructor/prototype paradigm. YUI is largely based on constructor paradigm, and it also used prototype paradigm.

When Life Gives You Grapes, Make Wine. Beyond factory, constructor, prototype and Hybrid constructor/prototype paradigm. There are many other variations and recreational usage of JavaScript, some of these are: Dynamic prototype method, Hybrid factory paradigm, JSON etc. But remember, be patient with JavaScript, it’s important to know the basic ideas and concepts of the language before you move on to use them in creative ways.



Similar Posts

Comments

Name (required)

Email (required)

Website

Speak your mind

3 Comments so far

  1. Hyanide on January 3, 2008 10:40 pm

    Great site, thanks for keeping us updated :)

  2. Donetsk on January 13, 2008 3:19 pm

    Hi from Donetsk, Ukraine. I am leaving comment here just to say thank you for this site, I am looking forward to reading more posts, hope it goes well, all the best, Jay.

  3. admin on January 15, 2008 9:18 am

    thank you for your support. :)

Sponsors




Links