Как визуализировать представление объектов конструктора 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 не 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 _{собственности, но не тот, который вы имели в виду.}