For JavaScript prototypal inheritance, why can't a parent object be created and saved in a child's constructor?

Question

In this JavaScript code, when the instantiation of new child causes its constructor to execute, the create method does not seem to creating the parent object. The child does not seem to inherit the parent's member function m.

function parent() {
    parent.prototype.a =2;
    parent.prototype.m = function() {
    return this.a++;
    }
}

function child() {
    child.prototype = Object.create(parent.prototype);
    child.prototype.constructor = parent;
    parent.call(this);
}

var c = new child();
alert(child.prototype.m());   // 2
alert(child.prototype.m());   // 3
alert(c.m());                 // FAILS!!!

Answer 1

Your prototype methods and inheritance should be defined outside of your functions...

function parent() {
}
parent.prototype.a =2;
parent.prototype.m = function() {
    return this.a++;
}

function child() {
    parent.call(this);
}
child.prototype = Object.create(parent.prototype);

var c = new child();
alert(child.prototype.m());   // 2
alert(child.prototype.m());   // 3
alert(c.m());                 // 4

Answer 2

Here is basically what happens when you run new child:

var obj = Object.create(child.prototype);
child.call(obj);
return obj;

Inlining your constructor would look like:

var obj = Object.create(child.prototype);
// inline
child.prototype = Object.create(parent.prototype);
child.prototype.constructor = parent;
parent.prototype.a =2;
parent.prototype.m = function() {
    return this.a++;
}
// end inline
return obj;

Do you notice that nothing in the constructor modifies obj in any way? While you modifying child.prototype and parent.prototype, this has no effect on obj, since created a new object with child.prototype = Object.create(parent.prototype), where obj inherits from the old child.protoype object.

Here is a simplified example of what you are doing:

var proto = {};
var obj = Object.create(proto);
proto = {};
proto.m = function() {};

It should be pretty clear that assigning to proto.m has no effect on obj, since we assigned a new object o proto beforehand.

There have been many question about OOP in JS on Stack Overflow already, you can easily search for them. I also recommend to read the MDN article about OOP in JS and Benefits of using `Object.create` for inheritance

Answer 3

It looks like you are misunderstanding how to setup custom objects in JavaScript. Normally you would add your methods to the prototype outside the constructor, doing it inside will reset the properties every time the constructor is called.

function parent() {
}
parent.prototype.a = 2;
parent.prototype.m = function() {
    return this.a++;
}

function child() {
    parent.call(this);
}
child.prototype = Object.create(parent.prototype);
child.prototype.constructor = parent;

var c = new child();
alert(child.prototype.m());   // 2
alert(child.prototype.m());   // 3
alert(c.m());                 // 4

In this case, it is failing because you create the new prototype for the child.

Object.create(parent.prototype);

Before you set your m method it in the parent constructor.