Inheritance using prototype / "new" [duplicate]
Hi I'm new in Javascript OO and want to know more about about inheritance. Hope you can provide some advice!
I see this great post: How to "properly" crea开发者_如何学运维te a custom object in JavaScript?
which talks about how a class is inherited as I see in other websites, ex.:
function man(x) {
this.x = x;
this.y = 2;
}
man.prototype.name = "man";
man.prototype.two = function() {
this.y = "two";
}
function shawn() {
man.apply(this, arguments);
};
shawn.prototype = new man;
The above post claims that in order not to call "man"'s constructor while inheriting, one can use a helper like this instead:
function subclassOf(base) {
_subclassOf.prototype= base.prototype;
return new _subclassOf();
}
function _subclassOf() {};
shawn.prototype = subclassOf(man);
While I understand its intention, I don't see why we can't call
shawn.prototype = man.prototype;
I see it works exactly the same. Or is there something I'm missing? Thanks in advance!
Well, examples are better than words in my humble opinion. All below examples are using your code, with some additions.
The first example will prove that using shawn.prototype = new man;
you're calling the constructor twice
function man(h, w) {
SendMessage("man is created with height " + h + " and weight " + w);
this.height = h;
this.weight = w;
}
man.prototype.name = "man";
man.prototype.double = function() {
this.height *= 2;
this.weigth *= 2;
}
function shawn() {
man.apply(this, arguments);
};
function SendMessage(msg) {
document.getElementById("Console").innerHTML += msg + "<br />";
}
window.onload = function() {
shawn.prototype = new man;
var p = new shawn(180, 90);
SendMessage("Shawn height: " + p.height);
}
<div id="Console"></div>
As you see, the constructor is called twice - once with no arguments then with the actual arguments you give it.
The second example just proves that using the subclassOf
solve that "double calling" issue.
function man(h, w) {
SendMessage("man is created with height " + h + " and weight " + w);
this.height = h;
this.weight = w;
}
man.prototype.name = "man";
man.prototype.double = function() {
this.height *= 2;
this.weigth *= 2;
}
function shawn() {
man.apply(this, arguments);
};
function subclassOf(base) {
_subclassOf.prototype= base.prototype;
return new _subclassOf();
}
function _subclassOf() {};
function SendMessage(msg) {
document.getElementById("Console").innerHTML += msg + "<br />";
}
window.onload = function() {
shawn.prototype = subclassOf(man);
var p = new shawn(180, 90);
SendMessage("Shawn height: " + p.height);
}
<div id="Console"></div>
The third example shows what's wrong with your idea of shawn.prototype = man.prototype
and I'll explain. shawn
inherits from man
so I've added new method that should affect only shawn
, called marriage
(that of course cause him to gain some weight ;)) - that method should not affect the base class man
as it's not inheriting from shawn
, inheritance is one way only. But.... as you see in the example, ordinary man
can also get married - big problem.
function man(h, w) {
SendMessage("man is created with height " + h + " and weight " + w);
this.height = h;
this.weight = w;
}
man.prototype.name = "man";
man.prototype.double = function() {
this.height *= 2;
this.weight *= 2;
}
function shawn() {
man.apply(this, arguments);
};
function SendMessage(msg) {
document.getElementById("Console").innerHTML += msg + "<br />";
}
window.onload = function() {
shawn.prototype = man.prototype;
var p = new shawn(180, 90);
SendMessage("Shawn height: " + p.height);
p.double();
SendMessage("Shawn height: " + p.height);
shawn.prototype.marriage = function() {
SendMessage("Shawn is getting married, current weight: " + this.weight);
this.weight += 20;
};
p.marriage();
SendMessage("Shawn weight: " + p.weight);
var q = new man(170, 60);
q.marriage();
SendMessage("q weight: " + q.weight);
}
<div id="Console"></div>
Finally, the fourth example shows that using the subclassOf
everything work fine, as shawn
inherits man
properly, and marriage
is not passed to the base class.
function man(h, w) {
SendMessage("man is created with height " + h + " and weight " + w);
this.height = h;
this.weight = w;
}
man.prototype.name = "man";
man.prototype.double = function() {
this.height *= 2;
this.weight *= 2;
}
function shawn() {
man.apply(this, arguments);
};
function subclassOf(base) {
_subclassOf.prototype= base.prototype;
return new _subclassOf();
}
function _subclassOf() {};
function SendMessage(msg) {
document.getElementById("Console").innerHTML += msg + "<br />";
}
window.onload = function() {
shawn.prototype = subclassOf(man);
var p = new shawn(180, 90);
SendMessage("Shawn height: " + p.height);
p.double();
SendMessage("Shawn height: " + p.height);
shawn.prototype.marriage = function() {
SendMessage("Shawn is getting married, current weight: " + this.weight);
this.weight += 20;
};
p.marriage();
SendMessage("Shawn weight: " + p.weight);
var q = new man(170, 60);
if (q.marriage)
q.marriage();
else
SendMessage("marriage is undefined for man");
SendMessage("q weight: " + q.weight);
}
<div id="Console"></div>
Hope this makes some sense! :)
shawn.prototype = man.prototype;
will share the prototypes, ie modifying one will modify the other.
shawn.prototype = new man;
will set shawn.prototype
to a newly created object which inherits from man.prototype
and thus changes to it won't propagate to man
instances.
However, using new
means that the constructor man()
will be executed, which can have undesired side-effects.
It's better to manually clone the prototype via
shawn.prototype = Object.create(man.prototype);
if available or a custom clone function (which works the same way as your subclassOf
)
shawn.prototype = clone(man.prototype);
otherwise.
In addition to @Shadow's excellent answer, you can think of shawn.prototype = man.prototype
as meaning "shawn is the same as man"
, rather than, "shawn is a man"
精彩评论