In this blog article, I will discuss about the JavaScript inheritance as it is one of the non-trivial concepts especially to a Java Programmer. As Douglas Crockford says it is really the world’s most misunderstood programming language though very powerful.
JavaScript inheritance is based on prototype and it supports Single inheritance. Multiple inheritance using mixins is beyond the scope of this article.
JavaScript is an object based programming language.The prototype of the function is used to construct new objects. All the properties of the prototype will be copied into the newly created object. Objects are used to create other objects.
Every function can be used as a function or as a constructor to construct an object. Every constructor will have a property called prototype, and a prototype will have property called constructor.
The constructor property refers to the function which is used to construct the object.
So,
YourFunction.prototype.constructor = YourFunction
As of ECMAScript 5, we can use Object.create() static method to construct objects. But this method does’t set the constructor property properly. It points the proptotype property to refer to the first argument that you have passed.
So, we manually need to reset the property. The following code sample does the same thing.
It has one Point constructor and ColorPoint constructor. The constructor ColorPoint extends the Point constructor.
The inherit method in the following code is a wrapper to extend one constructor function with another.
function inherit(SubConstructor, SuperConstructor) {
var newObject = Object.create(SuperConstructor.prototype);//newObject prototype is now Point
copyOwnPropertiesFromSource(newObject, SubConstructor.prototype);//newObject now has all parent and child specific properties
SubConstructor.prototype = newObject;//Just point that object as the prototype for all the newly created objects of type ColorColorConstructor
SubConstructor._super = SubConstructor.prototype;//Add one more property _super to refer to Super
}
function copyOwnPropertiesFromSource(target, source) {
Object.getOwnPropertyNames(source)
.forEach(function(property) {
Object.defineProperty(target, property,
Object.getOwnPropertyDescriptor(source, property));
});
return target;
}
//The above two methods can be added to the prototype of object but the code runs slower. So define them in //your script files in the beginning.
function Point(x, y) {//Super
this.x = x;
this.y = y;
}
function ColorPoint(x, y, color) {//Child
Point.call(this, x, y);//Just call the Point function on the current object. But, this is not inheritance
this.color = color;
}
inherit(ColorPoint, Point);//Now inheritance in action
console.log(ColorPoint.prototype.constructor);//Will refer to ColorPoint now.
The above inherit functionality can also be achieved using the following two lines.
ColorPoint.prototype = Point.prototype;
ColorPoint.prototype.constructor = ColorPoint;
Hope the self explanatory code has been useful to you. And wish you happy coding.
Thanks,
Rajasekhar
Best Open Source Business Intelligence Software Helical Insight is Here
