For JavaScript prototypal inheritance, why can't the parent object be instantiated and stored in the child constructor?
In this JavaScript code, when an instance new child
calls its constructor to execute, the create method does not create the parent object. The child doesn't seem to inherit the function of the parent member 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!!!
source to share
Your prototype methods and inheritance must 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
source to share
This mainly happens when you run new child
:
var obj = Object.create(child.prototype);
child.call(obj);
return obj;
Your constructor attachment will look like this:
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;
Have you noticed that nothing in the constructor changes in any way obj
? When changed child.prototype
, parent.prototype
this does not affect either obj
, since a new object is created with child.prototype = Object.create(parent.prototype)
, where it obj
inherits from the old object child.protoype
.
Here's 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 assignment proto.m
does not affect obj
, since we pre-assigned a new object o proto
.
There are already many questions about OOP on JS on Stack Overflow, you can easily find them. I also recommend reading the MDN article on OOP in JS and Benefits of Using `Object.create` for Inheritance
source to share
It looks like you don't understand how to set up custom objects in JavaScript. Typically you add your methods to the prototype outside of the constructor, making it inside the reset property 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 doesn't work because you are creating a new prototype for the child.
Object.create(parent.prototype);
Before setting the method m
in the parent constructor.
source to share