Quick background: In JavaScript, the constructor function for each object type has a prototype property. The prototype refers to an object that each constructed object uses as the next step up in its prototype chain. When you want one type to inherent from another type, you can set the prototype of the child type to a new instance of the parent type.
For example:
var Parent = function() { /* constructor business */ }
Parent.prototype.parentProp = "some parent property";
var Child = function() { /* constructor business */ }
Child.prototype = /*** !! Some prototype object goes here !! ***/
My question asks about what code should go in the “Some prototype object goes here” spot in the above code. My first instinct is to construct an instance of the parent (i.e., new Parent()), but in a comment to an answer on Is this a safe way of copying one objects prototype to another?, one user writes:
No, do not use
new bar()for the prototype object!
(…which is an opinion I’ve seen in many SO answers and comments, but this is the only example I have on hand at the moment.)
The other option is to use Object.create(Parent.prototype) as Child.prototype. As far as I know, this also creates a new Parent instance, but it does not run the Parent constructor.
Can someone explain why running the constructor function should be avoided when generating a prototype object from a parent type? Is there some significant technical problem that arises (perhaps with multiple levels of inheritance)? Or is such a pattern a misuse of constructors that clashes with some prototypical best practice (e.g., running the constructor when creating a prototype violates some separation of concerns)?
Because it’s a function that doesn’t need to be called. new is not that different from a regular function call in Javascript.
A constructor can do more than simply set fields. For instance, if it validates incoming data, then you will cause a validation
error when you were simply trying to set inheritance chain.
And you don’t need Object.create, this is sufficient:
function objectCreate( proto ) {
function T(){}
T.prototype = proto;
return new T();
}
2
Now that my understanding has broadened a bit, I’d like to build on Esailija’s answer with a specific example:
One specific concern is that a constructor can set instance-specific properties. Thus, if you use a prototype object created with new, all your child instances could share a single constructor-defined instance-specific property from the prototype.
For example, suppose Parent instances each have a unique id property set as construction time:
var Parent = function() { this.id = Math.random(); }
Parent.prototype.parentProp = "some parent property";
var Child = function() { /* constructor business */ }
Child.prototype = new Parent();
This will cause all Child instances to share a single prototype id property inherited from the one and only new Parent() object used as Child.prototype.
A better approach for this case is to use Object.create and directly call the parent constructor (if needed) inside the child constructor:
var Parent = function() { this.id = Math.random(); }
Parent.prototype.parentProp = "some parent property";
var Child = function() {
// run `this` through the Parent constructor function
Parent.apply(this, arguments);
}
Child.prototype = Object.create(Parent.prototype);