javascript - 省略 prototype.constructor 会改变原型(prototype)链

Question

我试图理解 JavaScript 中的继承，并且我已经看到在 JavaScript 中有不同的方法来实现继承。一种这样的方法基于 Mozilla 站点的示例，该示例执行类似于以下代码的操作:

function Person(name) {
  this.name = name;
}

Person.prototype.getName = function() {
  return this.name;
}

Person.prototype.setName = function(name) {
  this.name = name;
}

function Employee(name, Id) {
  Person.call(this, name);
  this.Id = Id;
}

Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;

Employee.prototype.getId = function() {
  return this.Id;
}

Employee.prototype.setId = function(Id) {
  this.Id = Id;
}

var andrew = new Employee("Andrew", "123");

我知道这段代码非常基础，我真的不需要定义 getter 和 setter。我添加它们只是为了表明我可以添加到每个原型(prototype)对象。在大多数情况下，我理解这段代码的作用。

当我看到以下行时，我开始感到困惑:

Employee.prototype.constructor = Employee;

我知道我们正在将 Employee.prototype 对象的构造函数属性设置为指向 Employee 构造函数。我已经阅读了该站点上的其他帖子，这些帖子说我可以省略这一行，实际上如果我这样做，一切都会按预期进行。但是......当我省略这一行时，我看到原型(prototype)链发生了一些变化。 Employee 对象的 __proto__ 属性现在指向具有以下方法的通用对象:getId 和 setId。然后，此对象的 __proto__ 属性指向 Person.prototype 对象。

所以我的问题是:

为什么当我省略 Employee.prototype.constructor = Employee 时，__proto__ 属性指向具有我在 中设置的方法的通用对象Employee.prototype 对象而不是 Employee.prototype 对象本身？此外，getId 和 setId 方法是如何附加到这个神秘原型(prototype)的，是否会因此影响性能？

我已经附加了 Chrome 控制台的 console.logs 以在手动设置构造函数属性然后省略它时显示 __proto__ 属性。

Answer 1

对象没有名字。因此，您在 __proto__ 旁边看到的是控制台以某种方式 推断的名称。显然，这种方式以某种方式涉及构造函数。

原型(prototype)链不会改变，只会改变呈现给您的信息。 __proto__ 引用 Employee.prototype 而不管 constructor 的值如何。

---

看看这个例子:

var foo = {};
console.log(foo); // Object {}

foo.constructor = function Foo() {};
console.log(foo); // Foo {}

foo 在这里没有改变，它是一个普通对象。然而，一旦 constructor 被设置，它就好像是 Foo 的一个实例一样呈现。