javascript - JavaScript 中的原型继承

Question

我一直在看 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？

这两者有什么区别吗？

Answer 1

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

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

Answer 2

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

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 示例中有许多此类模式的示例。

Answer 3

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

Answer 4

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

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