OOPS in JavaScript : Part II
In JavaScript we might not need inheritance all the time but as the applications gets complex we might need more structuring of code and also for reusing it. Inheritance according to Mozilla's documentation states that we need to copy the prototype of the base class to the Sub Class. You might ask why. The reason is 'Prototype' is nothing but the Structure of a object and this structure is shared across all the instances of the Class. When a property is added to a object dynamically, it is only for that particular object and not the whole class. On the other hand, when a property is added to the prototype, that property gets added in all the instances of that class. This might sound a little confusing, but thats the way the language works.
We will have to be very disciplined when we are writing a application partly because the language is dynamic and very flexible. We should follow some good practices while doing inheritance,
1. Avoid adding of properties to objects inside the functions dynamically(that includes the constructor) and always add them to the prototype object. In this case we might not be utilizing the full power of JavaScript, but then all the properties will not get inherited. The properties which are dynamic in nature does not get copied to its subclass.
BaseClass Definition
:
:
myFunction : function(){
this.newProperty = 0;
},
:
:
2. A very common mistake one can make is after inheriting, they replace the prototype of the subclass object.
inherit(BaseClass, SubClass);
SubClass.prototype = {
:
:
};
3. Avoid adding properties to prototype of BaseClass after inheritence, it makes the code very confusing and unreadable to others. But it will get reflected in the SubClass.
inherit(BaseClass, SubClass);
BaseClass.prototype.xyzProperty = QWER;
There are many approaches to do a extend, but it is very difficult to do a true extend in a dynamic language, because properties can be added dynamically. One should take a approach depending on the way they organize their code.
Now after knowing the donts, we will have to write our own extend function or use a function from any library you like. I am not going to re-invent the wheel(I might be taking a fairly similar approach), I will just explain the extend function of YUI.
Original Code
extend: function(subc, superc, overrides) {
if (!superc||!subc) {
throw new Error("YAHOO.lang.extend failed, please check that " +
"all dependencies are included.");
}
var F = function() {};
F.prototype=superc.prototype;
subc.prototype=new F();
subc.prototype.constructor=subc;
subc.superclass=superc.prototype;
if (superc.prototype.constructor == Object.prototype.constructor) {
superc.prototype.constructor=superc;
}
if (overrides) {
for (var i in overrides) {
subc.prototype[i]=overrides[i];
}
YAHOO.lang._IEEnumFix(subc.prototype, overrides);
}
}
After checking the arguments, they create a new dummy class. The prototype of Super Class is then copied to this dummy class. The reason being that in JavaScript everything is a reference and if the prototype of Super class is copied directly to the Sub class, then the Sub Class and the Super Class will be referring to the same prototype. This can be catastrophic. For this we will have to separate the prototype of Sub Class and the Super Class. While inheriting, we will have to call the constructor of the Super Class to initialize. Thats why they are adding a property superclass and assigning the constructor to its prototype's constructor. Apart from that, the guys at yahoo have made sure that derived object has all the enumerated functions when it is overridden(this is a problem in IE). Not only we are reusing the code, we are also reusing the research that went into building the library. And if they had not documented(comments) it in their code, it would have probably never been discovered by others.
Tags |- sun | pvs
| oops | javascript
