javascript - 如何可视化 Function 构造函数对象的表示？

Question

对于下面的代码，

function Employee() {
  this.name = "";
  this.dept = "general";
}

以下是我对可视化上述代码表示的理解，

对于下面的代码，

function Manager() {
  Employee.call(this);
  this.reports = [];
}
Manager.prototype = Object.create(Employee.prototype);

以下是我对可视化上述代码表示的理解，

上述图表是否准确表示了此 Javascript 代码创建的原型链？

注意：Javascript初学者

Answer 1

第一个看起来很好（除了丑陋的图形，但这不是问题）。如果您关心 UML，则不应将__proto__¹和prototype彼此相邻，而应将一个放在另一个之上。

此外，重要的是要注意Employee构造函数没有.name²和.dept属性。一个new Employee 实例会有这些。

在第二个中还有几个错误：

• 同样，该Manager函数没有reports属性。一个new Manager实例将具有name,dept和reports属性。
• 正确的原型对象是Manager.prototype, not Employee.prototype（你有两个）。这当然只是一个标签问题，但对于精确引用图形仍然很重要。
• Manager.prototype's__proto__不是Object.prototype，而是-这Employee.prototype就是你所使用Object.create的。
• Object.create(…)不应该标记箭头，而是对象本身（当然这更多是样式问题，您不使用规范，对吗？）
• Manager.prototype没有constructor属性。它确实继承了一个Employee.prototype。不过，您应该考虑在代码中创建一个，请参阅为什么需要设置原型构造函数？. 然后它将指向Manager。

_{1：实际上，__proto__是对象上的 getter/setter 属性Object.prototype。真正的内部原型链接（只能通过 访问Object.set/getPrototypeOf）通常被指定为[[prototype]]。
2：事实上，Employee函数确实有一个.name属性，但不是你的意思。}