JavaScript固有原型继承

在过去的几个小时里，我一直在研究原型继承，但对于如何实现这一点，我的答案相互矛盾/不清楚。它似乎对我现在使用它的方式起作用

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的每个子组件如何继承和设置这些值？

到目前为止，您所拥有的还可以。按钮中缺少的位如下所示：

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

    // Button stuff here...
};

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;

Functioncall使用特定的this值和您传递的任何参数调用函数。因此，上面从Paper.Button中调用Paper.Component，该按钮引用当前对象，并传递任何适当的参数

您还希望在替换的任何原型上设置构造函数属性，而不仅仅是添加到。这在很大程度上是可选的，JavaScript本身不使用任何构造函数，但是由于JavaScript引擎在默认原型对象上设置了构造函数，所以我们应该在替换它们时设置它，以便与默认原型保持一致

稍微简单一点的具体例子：

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 = ...

如果您对使用JavaScript中的原型继承来设置对象类的层次结构感兴趣，您可能想看看my helper脚本，它用更简单的语法自动化了上述内容，并提供了其他有用的功能。

该页面是一个很好的参考

你要找的东西我想是这样的：

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

    // Button stuff here...
};

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和任何其他任何人已经创建的东西。 记住将构造函数设置为最后一行。

---

解释得很好，谢谢。如果我遇到需要为继承的对象专门提供函数的情况，那么构造函数会像我在最初的帖子中看到的那样是一个空函数吗？Paper.Component=函数{}；我试过Paper.Component={}；，但我似乎不能给它添加一个原型？@John:如果你愿意，是的，如果你像现在这样用构造函数构建层次结构，那可能是最好的。或者，您实际上不需要组件函数，您可以使用一个对象来创建按钮原型，然后让按钮不调用它。但最好保持一致。@John:我试过Paper.Component={}；，但我似乎不能给它添加一个原型？正如我在上面评论的那样，你是在添加这一点。是的，我就是这个意思。此时，Paper.Component将是用于object.create创建按钮原型的对象：Paper.Button.prototype=object.createPaper.Component；你可以直接把isInBounds之类的东西放在纸上。但为了保持一致性，我可能会坚持使用空函数。也许您也会对以下答案感兴趣：