For inheritance from JavaScript, is it better to reference or copy the parent prototype?
I am currently implementing inheritance in my JavaScript libraries like this:
parent = function() { };
parent.prototype.hello = function() { alert('parent'); };
child = function() { };
child.prototype = parent.prototype;
However, I noticed that when I override a function in the prototype of the child "class", it also undesirably overrides the parent prototype:
child.prototype.hello = function() { alert('child'); }
(new parent()).hello(); // alerts "child" --> undesirable
(new child()).hello(); // alerts "child" --> desirable
And if I remove something from the child prototype
delete child.prototype.hello;
then the original prototype is undesirably affected. So maybe
child.prototype = parent.prototype;
not the best way to implement inheritance? Rather than having "child" classes reference the parent prototype, perhaps it would be more appropriate to copy the parent prototype to the child prototype?
_.extend(child.prototype, parent.prototype);
source to share
child.prototype = parent.prototype;
is incorrect because you specified in detail in your question.
Using _.extend
, you don't want to either. Consider that changing the property of the "inherited" parent prototype will not cause changes in the child:
// perform extension
_.extend(child.prototype, parent.prototype);
// parent later gains new property after extension
parent.prototype.parentProp = function() { alert("new"); };
(new parent()).parentProp(); // alerts "new" --> desirable
(new child()).parentProp(); // error; doesn't exist --> undesirable
You probably want child.prototype = Object.create(parent.prototype);
It says, "Save the new object in child.prototype
. This new object uses the object parent.prototype
as its own prototype." This leads to real inheritance, because when an instance child
wants a property, it looks for its own properties first, then in its immediate prototype ( child.prototype
) and then in the prototype prototype ( parent.prototype
).
Prototype chains
-
When used
child.prototype = parent.prototype
, prototype chains for instances look like this:{ child instance } ==> { only prototype } { parent instance } ==> { only prototype }
where
only prototype
- a common object that is referred to aschild.prototype
, andparent.prototype
. -
When used
_.extend(child.prototype, parent.prototype)
, the child's prototype and parental prototypes are different, but there is no direct inheritance. Changing the parent prototype does not change the child at all, since we just copied the properties of the parent prototype to the child prototype at one point in time.{ child instance } ==> { child.prototype } { parent instance } ==> { parent.prototype }
-
Since
child.prototype = Object.create(parent.prototype);
you do have inheritance from parent to child prototype:{ child instance } ==> { child.prototype } ==> { parent.prototype } { parent instance } ==> { parent.prototype }
source to share