Question

我过去几个小时一直在研究原型继承，但我对如何应对这些问题仍有相互矛盾/不清楚的答案。对于我现在如何使用它似乎正在工作。

Paper.Component = function(){}; // useless unless I can solve problem mentioned below?
Paper.Component.prototype = {
    isInBounds: function(x, y){
        // ...
    },
    setPosition: function(x, y){
        // ...
    },
    setSize: function(w, h){
        // ...
    }
};

Paper.Button = function(x, y, w, h, text){
    // ...
}
Paper.Button.prototype = Object.create(Paper.Component.prototype);

它似乎还有另一个问题;如何Paper.Button将其构造函数信息（x,y,w,h）保存到Paper.Component而不是自身？即，Paper.Component的每个孩子如何继承并设定这些值？

Answer 1

到目前为止，您所拥有的一切都很好。 Button中的缺失位如下所示：

Paper.Button = function(x, y, w, h, text){
    Paper.Component.call(this, /*...any args required by it...*/);

    // Button stuff here...
};

Function#call调用具有特定this值的函数以及传递它的任何参数。因此，上述调用Paper.Component来自Paper.Button，this引用当前对象，并传递任何适当的参数。

您还希望在替换的任何原型上设置constructor属性，而不是仅添加到。它在很大程度上是可选的（JavaScript本身并没有使用constructor作为任何东西），但由于JavaScript引擎将它设置在默认的原型对象上，我们应该在替换它们时设置它，就这样我们＆＃ 39;与默认原型一致。

稍微简单，具体的例子：

function Shape(sides, color) {
    this.sides = sides;
    this.color = color;
}
// Shape.prototype.method = ...

function Rectangle(color) {
    Shape.call(this, 4, color);

    // Rectangle stuff here...
}

Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;          // <== The constructor bit
// Rectangle.prototype.method = ...

如果您对设置＆＃34;类＆＃34;的层次结构感兴趣在JavaScript中使用原型继承的对象，您可能希望查看我的Lineage帮助程序脚本，该脚本使用更简单的语法自动执行上述操作，并提供其他有用的功能。

Answer 2

一个很好的参考是MDN - Inheritance revisited页面

您正在寻找的（我认为）是这样的：

Paper.Component = function(x,y,w,h){
    this.setPosition( x, y );
    this.setSize( w, h );
}; 
Paper.Component.prototype.isInBounds  = function(x, y){};
Paper.Component.prototype.setPosition = function(x, y){};
Paper.Component.prototype.setSize     = function(w, h){};

Paper.Button = function(x, y, w, h, text){
    Paper.Component.apply( this, arguments );
}
Paper.Button.prototype = Object.create(Paper.Component.prototype);
Paper.Button.prototype.constructor = Paper.Button;

注意事项：

不要Paper.Component.prototype = { ... }，因为它会覆盖当前的原型（例如现有的.prototype.constructor以及任何其他人已创建的内容）。
请记住设置构造函数（最后一行）。

JavaScript适当的原型继承

2 个答案: