Which variants of javascript inheritance we should use and why?

Question

I don't understand which variants of inheritance we should use. I even don't know if there is a difference between them.
I have a simple JavaScript inheritance example:

function MyObject(a){
    this.a = a;
}

function MyObjectChild(a, b){
    MyObject.call(this, a);
    this.b = b;
}

MyObjectChild.prototype = Object.create(MyObject.prototype);

var myObj = new MyObjectChild(1, 2);

console.log(myObj.a + " " + myObj.b);

result will be "1 2".

But this row:

MyObjectChild.prototype = Object.create(MyObject.prototype);

we can write in 10 different ways:

MyObjectChild.prototype = new MyObject();
MyObjectChild.prototype = MyObject.prototype;
MyObjectChild.prototype = MyObject.prototype.prototype;
MyObjectChild.prototype = Object.create(MyObject);
MyObjectChild.prototype = Object.create(MyObject.prototype);
MyObjectChild.prototype.prototype = new MyObject();
MyObjectChild.prototype.prototype = MyObject.prototype;
MyObjectChild.prototype.prototype = MyObject.prototype.prototype;
MyObjectChild.prototype.prototype = Object.create(MyObject);
MyObjectChild.prototype.prototype = Object.create(MyObject.prototype);

All of them will work! Can somebody explain which variants we should use and which one we should not?

I just say never mind the hassle with es5 class declarations. Now and for the future I use the es6 added `class Name {}`. If necessary I compile to es5 or simply use strict mode. The new class declarations are more standardized, easier to understand and much more clean. — E. Sundin, Jan 06 '16 at 22:12
"*All of them will work!*" - Nope. In fact, none of your alternatives does work, they all do different things. — Bergi, Jan 06 '16 at 22:56

puqeko · Accepted Answer · 2016-01-06T23:21:37.187

You can write it a million different ways because it does not do anything in this situation.

Try your code without MyObjectChild.prototype = Object.create(MyObject.prototype); and it still works.

On the line MyObject.call(this, a); you are calling MyObject as a function giving it the same this reference as in your MyObjectChild constructor. Therefore, you are adding the values of a and b to the MyObjectChild object directly when you create the myObj object.

To answer your question: You should use neither.

You can however, in your example, achieve the desired effect like this...

function MyObject(a){
    this.a = a;
}
MyObject.prototype.foo = "ta da";

function MyObjectChild(a, b){
    MyObject.call(this, a);
    this.b = b;
}

MyObjectChild.prototype = Object.create(MyObject.prototype);

var myObj = new MyObjectChild(1, 2);

console.log(myObj.foo); // ta da

This way all instances created using these constructors (such as myObj) will inherit properties from MyObject.prototype.

EDIT:

Originally using MyObjectChild.prototype = MyObject.prototype; was suggested. This would mean all instances inherit properties from the same prototype object.

Credit to Bergi below for pointing out this is probably not what you intend, as adding properties to MyObjectChilds prototype would then be inherited by MyObject.

Object.create(MyObject.prototype) instead creates a new object (to which you may add properties that only MyObjectChild instances inherit) while still inheriting properties from MyObjects prototype.

[`MyObjectChild.prototype = MyObject.prototype;` is not inheritance](http://stackoverflow.com/q/11088365/1048572). I don't think that's the desired effect. — Bergi, Jan 06 '16 at 22:57
Thanks for the link @Bergi. I now see your point about the _desired effect_. Will edit the above. — puqeko, Jan 06 '16 at 23:08

Which variants of javascript inheritance we should use and why?

1 Answers1