JavaScript Prototypal Inheritance - Is this the right way to do things?

Question

If I declare the base prototype object outside the constructor for an object, all created objects are based on that single base object which is not suitable for my needs because I need more than one instance of the base object.

In short: Is this code correct? It works but I'm picky about having correct code.

Example:

function BaseObject()
{
    BaseObject.prototype.insertObject = function()…
    …
    … // Some other functions.
}

function Object1()
{
    Object1.prototype = new BaseObject();

    Object1.prototype.coolFunction = function()…
    …
    … // Same kind of pattern.
}

function Object2()
{
    Object2.prototype = new Object1();

    Object2.prototype.incredibleFunction = function()…
    …
    … // You get the idea.
}

Domenic · Answer 1 · 2012-02-09T19:55:25.517

0

No, all the code that is currently inside your constructor functions should be outside of them. Right now you are reassigning those properties of the prototype every time someone creates a new object.

Finally, points of good-practice:

You should always "fix" the constructor property of any derived prototypes. This is a quirk of JS inheritance; it gets overwritten. People rarely depend on the constructor property being correct, but sometimes they do, and it just feels wrong if you don't.
Object.create(Base.prototype) is better than new Base() if you are working in browsers that support it, or using es5-shim. It only instantiates the object, instead of creating it, which is good since you don't need an actual copy of the object to perform prototypal inheritance.

This would all look like:

function BaseObject() { }

BaseObject.prototype.insertObject = function () { };

function Object1() { }

Object1.prototype = Object.create(BaseObject.prototype);
Object1.prototype.constructor = Object1;
Object1.prototype.coolFunction = function () { };

function Object2() { }

Object2.prototype = Object.create(Object1.prototype);
Object2.prototype.constructor = Object2;
Object2.prototype.incredibleFunction = function () { };

edited Feb 09 '12 at 19:55

answered Feb 09 '12 at 19:41

Domenic

110,262
41
219
271

If I do `Object1.prototype = new BaseObject();` outside of the constructor, every object created from Object1 relies on that single instance of BaseObject. I need a way to create new instances of BaseObject. – user1092719 Feb 09 '12 at 19:46
That will still be the case even if you perform it inside the constructor. `Object1.prototype` is shared by every instance of `Object1`, so all you're doing every time you reassign it is making every instance of `Object1` rely on the same newly-constructed prototype `BaseObject`. – Domenic Feb 09 '12 at 19:48
But when I do this in my actual code it works just like I need it to because every time the constructor gets called it sets the prototype on the object to be a newly created instance of `BaseObject`, and then I repeat that pattern and it works fine. There has just got to be a clean and correct way to do this. – user1092719 Feb 09 '12 at 19:56
It will work as you are doing it; it is just inefficient and unconventional ("wrong"). Also "sets the prototype on *the* object" is incorrect; it sets the prototype on *every* object. – Domenic Feb 09 '12 at 19:59

score 0 · Answer 2 · answered Feb 09 '12 at 19:47

The general pattern:

function Base ( baseMember ) {
    this.baseMember = baseMember;
}

Base.prototype.baseFunc = function () {};

function Derived ( baseMember, derivedMember ) {
    Base.apply( this, arguments );   
    this.derivedMember = derivedMember;
}

Derived.prototype = Object.create( Base.prototype );
Derived.prototype.constructor = Derived;

Derived.prototype.derivedFunc = function () {};

It's ugly, I know...

JavaScript Prototypal Inheritance - Is this the right way to do things?

2 Answers2