Javascript原型链自参考 [英] Javascript prototype chain self reference

问题描述

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

This question is about how javascript prototypes work. In particular I do not understand why in the example below "Machine" appears to have a prototype of itself.

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

In the screen capture from Chrome Web Tools console the Machine __proto __ object seems to reference the same function as its parent. You will see a "__proto __: Machine" with a property "whoAmI" and a second property "__proto __: Machine". Drilling into this second "__proto __" reveals a constructor and the "__proto __" containing Object but no property "whoAmI".

对Machine"的双重引用是什么意思，为什么只有一个包含 whoAmyI 属性?

What is the meaning of the double reference to "Machine" and why does only one of them contain the whoAmyI property?

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 网络工具屏幕截图:

Chrome web tools screen capture:

推荐答案

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

It's better to use Object.create instead of creating an instance of Parent to set prototype of Child for (at least) 2 reasons.

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

1. When you define the Child type you may not want to create instances of Parent at this point due to the state of the application not being ready to create instances of Parent type at this point (like dependencies that need to be passed to the Parent constructor that are not available when defining Child).

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

Parent has instance specific members (any this.something = in Parent constructor) and creating an instance of Parent puts these instance specific members on Child.prototype.

这就是为什么你看到 Machine(Machine 类型的一个实例)有一个 whoAmi 成员和一个 Machine 作为这个 Machine 实例的 __proto__.

That is why you see Machine (an instance of type Machine) with a whoAmi member and a Machine as the __proto__ of this Machine instance.

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

The following code may produce output you'd expect and because the constructor is fixed after setting prototype part of inheritance it displays the right name:

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

也许以下答案可以帮助理解原型和构造函数的作用创建某种类型的实例时的函数(或 init):

Maybe the following answer can help understanding the role of prototype and constructor functions (or init) when creating instances of a certain type:

这篇关于Javascript原型链自参考的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！