Javascript 原型(prototype)链自引用

Question

这个问题是关于 javascript 原型(prototype)是如何工作的。特别是我不明白为什么在下面的例子中“机器”似乎有一个自己的原型(prototype)。

在 Chrome Web Tools 控制台的屏幕截图中，Machine __proto __ 对象似乎引用了与其父对象相同的函数。你会看到一个“__proto __: Machine”，它有一个属性“whoAmI”和第二个属性“__proto __: Machine”。深入研究第二个“__proto __”揭示了一个构造函数和包含 Object 但没有属性“whoAmI”的“__proto __”。

对“机器”的双重引用是什么意思，为什么只有其中一个包含 whoAmyI 属性？

function Car(){}

function Vehicle() {}

function Machine() {
    this.whoAmI = 'I am a machine';
}

Vehicle.prototype = new Machine();

Car.prototype = new Vehicle();

var myCar = new Car();

Chrome 网络工具屏幕截图:

Answer 1

出于(至少)两个原因，最好使用 Object.create 而不是创建 Parent 的实例来设置 Child 的原型(prototype)。

1. 当您定义子类型时，此时您可能不想创建父类型的实例，因为此时应用程序的状态尚未准备好创建父类型的实例(例如需要创建的依赖项)传递给 Parent 构造函数，在定义 Child 时不可用)。

2. Parent 具有特定于实例的成员(Parent 构造函数中的任何 this.something =)并且创建 Parent 的实例会将这些特定于实例的成员放在 Child.prototype 上。

   <

这就是为什么您会看到带有 whoAmi 成员的 Machine(Machine 类型的一个实例)和一个 Machine 作为该 Machine 实例的 __proto__ 的原因。

以下代码可能会产生您期望的输出，并且由于构造函数在设置继承的原型(prototype)部分后已修复，因此它显示正确的名称:

function Car(){
  //re use parent constructor
  Vehicle.call(this);
  //extend whoAmi
  this.whoAmI = this.whoAmI + ' and a Car';
}

function Vehicle() {
  //re use parent constructor
  Machine.call(this);
  //extend whoAmi
  this.whoAmI = this.whoAmI + ' and a Vehicle';
}

function Machine() {
    this.whoAmI = 'I am a machine';
}

Vehicle.prototype = Object.create(Machine.prototype);
Vehicle.prototype.constructor = Vehicle;

Car.prototype = Object.create(Vehicle.prototype);
Car.prototype.constructor = Car;

var myCar = new Car();
console.dir(myCar);

也许是 following answer可以帮助理解原型(prototype)和构造函数(或 init)在创建某种类型的实例时的作用: