JavaScript 中的原型继承答案

【问题标题】：Prototypal inheritance in JavaScriptJavaScript 中的原型继承
【发布时间】：2010-09-28 05:05:12
【问题描述】：

我一直在看 Douglas Crockford 在 YUI 剧院的演讲，我有一个关于 JavaScript 继承的问题......

Douglas 举了这个例子来说明“Hoozit”继承自“Gizmo”：

function Hoozit(id) {
    this.id = id;
}
Hoozit.prototype = new Gizmo();
Hoozit.prototype.test = function (id) {
    return this.id === id;
};

他为什么写Hoozit.prototype = new Gizmo()而不是Hoozit.prototype = Gizmo.prototype？

这两者有什么区别吗？

【问题讨论】：

标签： javascript inheritance prototypal-inheritance

【解决方案1】：

原因是使用Hoozit.prototype = Gizmo.prototype意味着修改Hoozit的原型对象也会修改Gizmo类型的对象，这不是预期的行为。

Hoozit.prototype = new Gizmo() 继承自 Gizmo，然后单独离开 Gizmo。

【讨论】：

但是如果你想避免调用构造函数，你可以使用一些间接（寄生继承）。

【解决方案2】：

如果他写 Hoozit.prototype = Gizmo.prototype 他以后对 Hoozit 原型所做的任何修改都会反映在 Gizmo 原型中。

【讨论】：

【解决方案3】：

除了Triptych的回答：Hoozit实例也会继承Gizmo的所有实例属性，不仅仅是原型中定义的那些；例如：

function Gizmo() {
    this.foo = 'bar'; // foo is visible in every Hoozit instance
}

【讨论】：

【解决方案4】：

其他答案解决了这个问题，但如果你确实想继承原型，你可以使用一些寄生魔法：

Object.prototype.inherit = function(p) {
    NewObj = function(){};
    NewObj.prototype = p;
    return new NewObj(); 
};

// Paraphrasing of Nicholas Zakas's Prototype Inheritance helper
function inheritPrototype(subType, superType) {
    var prototype = Object.inherit(superType.prototype);
    prototype.constructor = subType;
    subType.prototype = prototype;
};

现在您可以替换：

Hoozit.prototype = new Gizmo();

与

inheritPrototype(Hoozit, Gizmo);

除非你有一个真正的大 Gizmo 构造函数，否则这可能不值得麻烦（我建议的唯一优点是你不必调用 Gizmo 的构造函数来连接原型）。我在 TDD JavaScript Examples 中有许多此类模式的示例。

【讨论】：