Иллюстрация взаимосвязи треугольника между прототипом, прото и конструктором

В JavaScript есть много хаотических отношений. Цепочка областей-это односторонняя цепная связь, которая довольно проста и ясна; Призывание отношения этого механизма немного сложна; А что касается прототипа, это треугольная связь между прототипом, прото и конструктором. В этой статье сначала используется изображение, чтобы прояснить значение, а затем подробно объясняет треугольную связь прототипа.

Иллюстрация

концепция

Сложные отношения на картинке выше фактически поступают из двух строк кода

 function foo () {}; var f1 = new foo;

【Конструктор】

Функция, используемая для инициализации вновь созданного объекта, является конструктором. В примере функция foo () является конструктором

【Объект экземпляра】

Объект, созданный новой операцией конструктора, является объектом экземпляра. Вы можете использовать один конструктор для построения нескольких объектов экземпляров

 function foo () {}; var f1 = new foo; var f2 = new foo; console.log (f1 === f2); // false

【Прототип объектов и прототипа】

Конструктор имеет свойство прототипа, которое указывает на объект прототипа объекта экземпляра. Несколько объектов, созданных одним и тем же конструктором, имеют одинаковый объект прототипа. Регулярно используйте прототип объектов для достижения наследования

 функция foo () {}; foo.prototype.a = 1; var f1 = new foo; var f2 = new foo; console.log (foo.prototype.a); // 1console.log (f1.a); // 1console.log (f2.a); // 1console.log (f2.a);

【конструктор】

Объект прототипа имеет атрибут конструктора, который указывает на функцию конструктора, соответствующую объекту прототипа.

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

Поскольку объект экземпляра может наследовать свойства объекта прототипа, объект экземпляра также имеет атрибут конструктора, который также указывает на функцию конструктора, соответствующую объекту прототипа.

 function foo () {}; var f1 = new foo; console.log (f1.constructor === foo); // true

【Proto】

У объекта экземпляра есть атрибут Proto, который указывает на объект прототипа, соответствующий объекту экземпляра

 function foo () {}; var f1 = new foo; console.log (f1 .__ proto__ === foo.prototype); // true

иллюстрировать

Концепция была введена, и теперь мы подробно объясним отношения.

 function foo () {}; var f1 = new foo;

【Часть 1: Foo】

Объект экземпляра F1 создается новой операцией конструктора foo (). Прототип объекта конструктора foo () - foo.prototype; Объект экземпляра F1 также указывает на объект Prototype foo.prototype через атрибут __proto__.

 function foo () {}; var f1 = new foo; console.log (f1 .__ proto === foo.prototype); // true

Сам объект экземпляра F1 не имеет атрибута конструктора, но он может наследовать атрибут конструктора объекта прототипа Foo.prototype.

 Функция foo () {}; var f1 = new foo; console.log (foo.prototype.constructor === foo); // trueconsole.log (f1.constructor === foo); // trueconsole.log (f1.hashownpropert

На следующем рисунке показан консольный эффект объекта экземпляра F1

【Часть 2: объект】

Foo.Prototype является прототипом объектом F1, а также объект экземпляра. Фактически, любой объект может рассматриваться как объект, созданный с помощью новой операции конструктора Object (). Таким образом, Foo.Prototype - это объект экземпляра, его конструктор IS Object (), а объект -прототип - это объект. Прототип. Соответственно, свойство прототипа объекта Constructor () указывает на объект Prototype объекта; Свойство Proto объекта экземпляра Foo.prototype также указывает на объект Prototype объекта

 function foo () {}; var f1 = new foo; console.log (foo.prototype .__ proto__ === object.prototype); // true

Сам объект экземпляра.

 function foo () {}; var f1 = new foo; console.log (foo.prototype.constructor === foo); // trueconsole.log (object.prototype.constructor === Object); // trueConsole.log (foo.prototype.hasownproperty ('constructor')); // trueconsole.log (foo.prototype.hashownproperty ('Конструктор')); // true

На следующем рисунке показан консольный эффект объекта экземпляра Foo.prototype

Если object.prototype - это объект экземпляра, каков его объект прототипа? Результат нулевой. Я думаю, что это также может быть результатом типа NULL, что является одной из причин, почему «объект»

 console.log (object.prototype .__ Proto__ === null); // true

【Часть 3: Функция】

Как упоминалось ранее, функции являются объектами, но объектами со специальными функциями. Любая функция может рассматриваться как результат экземпляра через новую работу конструктора функции ().

Если функция Foo рассматривается как объект экземпляра, ее конструктор - это функция (), а ее объект прототипа - это функция. Прототип; Аналогичным образом, конструктор функционального объекта также является function (), а его объект прототипа - это функция. Прототип.

 Функция foo () {}; var f1 = new foo; console.log (foo .__ proto__ === function.prototype); // trueconsole.log (объект .__ Proto__ === function.prototype); // true

Атрибут конструктора функции объекта прототипа. Прототип указывает на функцию конструктора (); Объект объекта экземпляра и Foo не имеют атрибута конструктора, и необходимо наследовать атрибут конструктора функции объекта прототипа. Прототип.

 function foo () {}; var f1 = new foo; console.log (function.prototype.constructor === function); // trueconsole.log (foo.constructor === function); // trueconsole.log (fool.hasownproperty ('constructor');//falseconsole.log. Функция); // trueConsole.log (object.hasownproperty ('constructor')); // false

Все функции можно рассматривать как созданные объекты новой работы функции конструктора (). Затем функция может рассматриваться как результат вызова своей собственной новой операции.

Таким образом, если функция является объектом экземпляра, его конструктор является функцией, а его объект прототипа - это функция. Прототип

 console.log (function .__ Proto__ === function.prototype); // trueconsole.log (function.prototype.constructor === function); // trueconsole.log (function.prototype === funct

Если function.prototype - это объект экземпляра, каков его объект прототипа? Как и прежде, все объекты можно рассматривать как результат экземпляров новой операции конструктора Object (). Следовательно, прототип объекта функции. Прототип - это объект.

 console.log (function.prototype .__ Proto__ === Object.prototype); // true

Вторая часть представляет, что прототип объект объекта.

 console.log (object.prototype .__ Proto__ === null); // true

Суммировать

【1】 Функция (функция также является функцией) является результатом новой функции, поэтому функция может использоваться в качестве объекта экземпляра, его конструктор - это функция (), а объект прототипа - это функция. Прототип

【2】 Объекты (функции также являются объектами) являются результатом нового объекта, поэтому объект может использоваться в качестве объекта экземпляра, его конструктор - это объект (), а объект прототипа - это объект. Прототип

【3】 Object.Prototype Prototype Object Null