Inheritance by borrowing a constructor will allow us to call a function and then pass an object that the function should bind to this value. So, for the sake of inheritance purpose, the child constructor calls the parent’s constructor and then binds the child’s newly-created this object as the parent’s this.
So let’s define parent constructor first:
function Shape(id) {
this.id = id;
}
Shape.prototype.name = 'Shape';
Shape.prototype.toString = function() {
return this.name;
}
Now, let us define another function which uses apply() to call the above created function constructor, passing this and any additional arguments.
function Triangle() {
Shape.apply(this, arguments);
}
Triangle.prototype.name = 'Triangle';
It can be seen that both the constructor functions have added some extra properties to their prototypes. Now, let’s test this by creating a new triangle object:
>var test = new Triangle(101); >test.name; "Triangle"
The above triangle object has inherited the id property from the parent but it doesn’t inherit anything that has been added to the parent’s prototype.
>test.id; 101 >test.toString(); "[object Object]"
So, why did the triangle failed to get the Shape function’s prototype properties? It is because, there was never a new Shape() instance created. And hence the prototype was never used. So, how can we achieve this?
function Triangle() {
Shape.apply(this, arguments);
}
Triangle.prototype = new Shape();
Triangle.prototype.name = 'Triangle';
In the above code, the parent’s own properties are recreated as the child’s own properties. If a child inherits an array or an object, it will be completely a new value (which is not a reference) and modifying this won’t affect the parent.
Everything is well and good till now but we have a drawback here and that is, we are calling the parent’s constructor twice. How? – Once with apply() which is used to inherit own properties and once with new to inherit the prototype. If we look closely, the own properties of the parent are inherited both the times. let’s simplify this:
function Shape(id) {
this.id = id;
}
function Triangle() {
Shape.apply(this, arguments);
}
Triangle.prototype = new Shape(101);
Now, by creating new instance:
>var test = new Triangle(202); >test.id; 202
Therefore, we have own property id, but there’s also one that comes down the prototype chain, which is ready to shine through:
>test.__proto__.id; 101 >delete test.id; true >test.id; 101
So, to mitigate double calling, what we can do is: First, we can call apply() on the parent constructor to get all its own properties and then copy the prototype’s properties using a iteration in the child constructor.
Best Open Source Business Intelligence Software Helical Insight is Here
