我应该在JavaScript中将什么连接到子原型属性

我关心以下代码：

//subclass extends superclass
Rectangle.prototype = new Shape();

您应该是，这是一种常见的模式，但不是很好的模式，因为您使用Shape来创建原型，并使用来初始化实例。它应该这样做。(例如，考虑一下，如果需要提供Shape参数，你会怎么做？创建Rectangle.prototype时会使用什么参数？(

但您也不想要Rectangle.prototype = Shape.prototype，因为这样您就无法向Rectangle.prototype添加内容(因为它指向的是Shape.prototype所指向的同一对象，所以您也可以将它们添加到Shape实例中(。

因此，我们想要创建一个使用Shape.prototype作为原型的新对象(例如，继承自Shape.prototype(，就像通过new Shape创建的对象一样，但不需要调用Shape来创建它；然后使用该新对象作为CCD_ 12。

从ECMAScript5开始，我们可以使用Object.create:

Rectangle.prototype = Object.create(Shape.prototype);

Object.create创建一个新对象，并将您给它的第一个参数指定为对象的底层原型。

这样做后，尽管严格意义上不需要，但我们也应该在新对象上设置constructor属性，使其引用Rectangle:

Rectangle.prototype.constructor = Rectangle;

我们这样做是因为这样，Rectangle.prototype和Rectangle之间的关系看起来就像规范的§13.2所说的那样。基本上，如果您有一个构造函数X，那么X.prototype.constructor应该引用X。有时，人们会依赖它来进行克隆操作等等(JavaScript本身而不是依赖它——例如，instanceof不依赖它(。

因此，我们可以使用ES5的Object.create来实现这一点。但即使在今天，并不是所有的JavaScript引擎都支持Object.create。因此，我们可以间接地做到这一点，方法是创建一个临时构造函数，让它借用Shape.prototype作为其prototype属性，然后使用该临时构造函数创建我们的新对象，用作Rectangle.prototype:

function Ctor() { }
Ctor.prototype = Shape.prototype; // Borrow the prototype
Rectangle.prototype = new Ctor(); // Create the new object

我们应该再次设置constructor属性：

Rectangle.prototype.constructor = Rectangle;

通常，不是每次都写出来，而是使用这样的助手：

function derive(Parent, Child) {
    function Ctor() { this.constructor = Child; }
    Ctor.prototype = Parent.prototype;
    Child.prototype = new Ctor();
    return Child; // For chaining
}

然后这样使用：

derive(Shape, Rectangle);

所有这些的最终结果是，我们只从Rectangle中调用Shape来初始化实例。我们不称之为创建Rectangle.prototype。

如果您对JavaScript中的继承管道感兴趣，您可能会对我的Lineage脚本感兴趣，该脚本处理以上内容以及更多内容。当我说"；感兴趣；我不一定是说要使用它(尽管欢迎您使用(，但查看未经优化的源代码，并在本页中将Lineage与在没有助手的情况下做同样的事情进行比较，可以让您了解这些东西是如何工作的。

JavaScript是一种原型的面向对象编程语言。也就是说，对象继承自其他对象。

JavaScript中的对象有一个特殊的[[proto]]属性，它指向该对象的原型。此属性由JavaScript引擎内部维护，每个对象都有一个链接的原型链。例如：

          null
           ^
           | [[proto]]
           |
  +------------------+
  | Object.prototype |
  +------------------+
           ^
           | [[proto]]
           |
  +------------------+
  |  Shape.prototype |
  +------------------+
           ^
           | [[proto]]
           |
+---------------------+
| Rectangle.prototype |
+---------------------+
           ^
           | [[proto]]
           |
        +------+
        | rect |
        +------+

当您编写Rectangle.prototype = new Shape();时，您的原型链如上所示。请注意，实现这一点的新方法是Rectangle.prototype = Object.create(Shape.prototype);。

          null
           ^
           | [[proto]]
           |
  +------------------+
  | Object.prototype |
  +------------------+
           ^
           | [[proto]]
           |
+---------------------+
| Rectangle.prototype |
|  / Shape.prototype  |
+---------------------+
           ^
           | [[proto]]
           |
        +------+
        | rect |
        +------+

如果您编写Rectangle.prototype = Shape.prototype;，那么您的原型链将如上所示。由于Rectangle.prototype与Shape.prototype相同，您将只继承一个原型，而不是两个原型。这意味着您不能将特定于Rectangle的方法添加到Rectangle.prototype中。

您应该选择哪种方法我更喜欢使用第一种方法，因为我们有两个单独的原型。您可以将特定于Rectangle的方法添加到Rectangle.prototype中。此外，它实际上是在扩展原型。在第二种情况下，根本没有继承。

这就是我现在通常写代码的方式：

function defclass(type, body) {
    var neo = function () {
        var self = new constructor;
        return prototype.hasOwnProperty("constructor") &&
            prototype.constructor.apply(self, arguments), self;
    };
    var constructor = function () {}; constructor.prototype = type;
    var prototype = constructor.prototype = new constructor; prototype.new = neo;
    return body.call(prototype, type), prototype;
}

使用defclass，您现在可以创建如下类：

var shape = defclass(null, function () {
    this.constructor = function () {
        this.x = 0;
        this.y = 0;
    };
    this.move = function (x, y) {
        this.x += x;
        this.y += y;
        console.info("Shape moved.");
    };
});
var rectangle = defclass(shape, function (shape) {
    this.constructor = function () {
        shape.constructor.call(this);
    };
});

最后，您可以创建类的实例，如下所示：

var rect = rectangle.new();
rect.move(2, 1);

亲自观看演示：http://jsfiddle.net/VHfBd/1

链接：

1. JavaScript中的对象继承
2. 如何实现类声明上的伪古典继承权
3. 为什么原型继承很重要