Цель

Чтобы понять разницу между свойствами [[Prototype]] и prototype в JavaScript.

Давайте начнем…

JavaScript — это высокоуровневый многопарадигмальный однопоточный язык программирования.

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

В другом языке программирования эта черта называется Наследование классов. Но в JavaScript это называется Наследование прототипов.

В следующем тексте слово прототип используется более чем в одном контексте.

Чтобы понять контекст, следуйте приведенным ниже рекомендациям —

* Если упоминается только prototype, то это означает чертеж объекта.

* Если упоминается prototype property, то это означает свойство функции, ключом которой является prototype.

#1) Что такое свойство [[Prototype]]?

[[Prototype]] — это свойство объекта, которое указывает на чертеж или прототип объекта.

Возьмем пример —

В приведенном выше коде мы пытаемся установить indiaCountryObj в качестве прототипа haryanaStateObj и gujaratStateObj, используя статический метод setPrototypeOf() класса Object.

Давайте посмотрим на вывод ниже —

Мы видим, что прототип, заданный методом Object.setPrototypeOf(), помещается внутрь свойства[[Prototype]].

Теперь способ доступа к значению свойства объекта:

  • Во-первых, он будет искать свойство в основном объекте.
  • Если он не найдет это свойство в основном объекте, он будет искать это свойство в прототипе этого объекта.
  • Если его там нет, то он будет искать прототип прототипа основного объекта. И так продолжается до тех пор, пока не будет найдено значение свойства, иначе возвращается undefined.

Итак, если мы сделаем что-то вроде этого —

haryanaStateObj.country // India

затем сначала haryanaStateObj проверяется на наличие свойства country. А раз его там нет, то он ищет прототип haryanaStateObj и там находит свойство country.

Чтобы прояснить этот момент, рассмотрим следующий пример:

Вывод строки № 12 в Gist № 1.2 — «Германия», потому что свойство ищется в haryanaStateObj, и оно само там находится.

Вам может быть интересно, если [[Prototype]] является свойством, то можем ли мы получить доступ к прототипу этого объекта, выполнив следующую команду —

haryanaStateObj.[[Prototype]]

Ответ НЕТ !!

Чтобы получить прототип объекта, вам нужно будет сделать что-то, как показано в следующем видео —

Итак, вкратце, вам придется использовать следующие способы:

  • Object.getPrototypeOf(haryanaStateObj);
  • haryanaStateObj.__proto__

# 2) Что такое свойство прототипа?

Простое использование подхода, упомянутого в разделе № 1, для установки прототипа объекта не является правильным путем, если мы хотим создать 100 объектов с одним и тем же прототипом. Нужен другой метод, который может служить этой цели.

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

Прежде чем двигаться дальше, обратите внимание, что свойство прототипа работает должным образом только в случае функциональных конструкторов.

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

Теперь давайте посмотрим на результат —

Глядя на структуру объектов, созданных с помощью конструкторов функций, мы видим, что свойство [[Prototype]] имеет свойство конструктора и объект в качестве прототипа прототипа.

Это означает, что в настоящее время свойство прототипа функции имеет сам конструктор.

Теперь давайте добавим некоторые свойства в свойство прототипа.

Эта часть интересна.

Все те свойства, которые мы установили в getId.prototype, теперь являются частью [[Prototype]] созданных объектов.

Заключение

Здесь мы увидели способы установки прототипа объекта и поняли разницу между свойствами [[Prototype]] и prototype.

prototype — это свойство конструктора функций, которое устанавливает нужные свойства в [[Prototype]] объекта.

Рекомендации

  1. https://en.wikipedia.org/wiki/JavaScript
  2. https://medium.com/@venkatiyengar/proto-vs-prototype-d3c9df933f58
  3. https://javascript.plainenglish.io/proto-vs-prototype-in-js-140b9b9c8cd5