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);

---

它似乎还有另一个问题；如何让

纸张。按钮

将其构造函数信息（

x，y，w，h

）保存到

纸张上。组件

而不是自身上？也就是说，

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;

Function#call
使用特定的
此
值和您传递的任何参数调用函数。因此，上面使用
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 = ...

功能形状（侧面、颜色）{
这个边=边；
这个颜色=颜色；
}
//Shape.prototype.method=。。。
函数矩形（颜色）{
形状。调用（这个，4，颜色）；
//矩形的东西在这里。。。
}
Rectangle.prototype=Object.create（Shape.prototype）；
Rectangle.prototype.constructor=Rectangle；// 一个好的参考是这一页

你要找的（我想）是这样的：

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=function（）{}我试过
Paper.Component={}，但我似乎无法为其添加原型？@John：如果你愿意，是的，如果你正在用构造函数构建层次结构（就像你一样），那可能是最好的。或者，您实际上不需要
组件
函数，您可以使用一个对象来创建
按钮
原型（然后让
按钮
不调用它）。但最好保持一致。@John：“我试过
Paper.Component={}；
，但我似乎无法为其添加原型？”正如我在上面的评论中所说，您是在添加原型。是的，我就是这个意思。此时，
Paper.Button.prototype=object.create将是与
object.create一起使用的对象。create
要创建
按钮
原型：
Paper.Button.prototype=object.create（Paper.Component）
（您可以将
isInBounds
等直接放在
Paper.Component
上）。但为了保持一致性，我可能会坚持使用空函数。也许您也会对以下答案感兴趣：