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

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，而不是 Employee.prototype（您有两个）。这当然只是一个标签问题，但对于精确引用图形仍然很重要。
Manager.prototype 的 __proto__ 不是 Object.prototype，而是 Employee.prototype - 这就是您使用 Object.create 的目的。
Object.create(…) 不应标记箭头，而应标记对象本身（当然，这更多是样式问题，您不使用 spec，是吗？）
Manager.prototype 没有 constructor 属性。不过，它确实继承了 Employee.prototype 中的那个。不过，您应该考虑在您的代码中创建一个，请参阅 Why is it necessary to set the prototype constructor?。然后它将指向 Manager.

_{1：实际上，__proto__是Object.prototype对象上的getter/setter属性。真实的内部原型 link（只能通过 Object.set/getPrototypeOf 访问）通常指定为 [[prototype]].

2：其实Employee函数确实有一个.name property，但不是你说的}

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

How to visualize representation of Function constructor objects?

javascript

prototypal-inheritance

function-constructor