使用prototype /“new”的继承 [英] Inheritance using prototype / "new"
问题描述
您好我是Javascript OO的新手，想要了解有关继承的更多信息。希望你能提供一些建议！
Hi I'm new in Javascript OO and want to know more about about inheritance. Hope you can provide some advice!
我看到这篇好文章：
如何正确地在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;
上述帖子声称为了在继承时不要调用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.
第一个示例将证明使用 shawn.prototype = new man; 你正在调用构造函数两次
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.
第二个例子证明使用了 subclassOf 解决双重调用问题。
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>
第三个例子显示你对 shawn.prototype = man.prototype 的想法有什么问题，我会解释。 shawn 继承自 man 所以我添加了一个只会影响 shawn的新方法，称为婚姻（这当然会让他获得一些分量;）） - 该方法不会影响基类 man 因为它不是从 shawn 继承的，所以继承只是一种方式。但是....正如你在例子中看到的那样，普通的 man 也可以结婚 - 大问题。
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>
最后，第四个例子显示使用 subclassOf 一切正常，因为 shawn 继承 man 正确，结婚未传递给基类。
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! :)
这篇关于使用prototype /“new”的继承的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
