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

JavaScript - это язык на основе прототипов.

В дополнение к набору свойств почти все объекты также имеют объект-прототип . Он наследует методы и свойства от родителя. Объект-прототип объекта также может иметь объект-прототип: когда он получает запрос от неопределенного свойства, его прототип будет искать свойство, затем прототип прототипа и так далее.

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

Первый элемент цепочки - это сущность, стоящая за всеми объектами: Object.prototype.

У некоторых объектов нет Object.prototype в качестве источника, но у других объектов, таких как Array.prototype и Function.prototype.

Как работать с прототипами

Прежде всего, вы должны знать 2 метода:

  1. Object.getPrototypeOf ();
  2. Object.create ();

Object.getPrototypeOf () вернет прототип объекта. Object.create (); создаст объект с конкретным прототипом.

Пример (Живой пример):

var helloPerson = {
 sayHello: function () {
  alert("Hello World!");
 }
};
 
 var Person = Object.create(helloPerson);
 
 Person.sayHello();

Это простой пример, но вы также можете повеселиться с чем-то более сложным (Живой пример):

var helloPerson = {
 sayHello: function () {
        if (this.country == "ita")
            alert("Ciao!");
        else
            alert("Hello!");
 }
 };
 
 var Person = Object.create(helloPerson);
 Person.country = "ita";
 Person.sayHello();

Отладка с __proto__

Давайте воспользуемся DevTools из Google Chrome и установим точку останова на последней строке.

Затем просто наведите указатель мыши на объект «Человек», и всплывающее окно покажет вам содержимое.

объект «Человек» содержит другой объект с именем «__proto__». Это и есть объект-прототип!

Легко, не правда ли?

Заключение

Теперь вы знаете, что такое объект-прототип и что такое цепочка прототипов.

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

Если вы хотите узнать больше о прототипах и наследовании, я предлагаю вам прочитать следующие статьи:

  1. Https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes
  2. Https://www.pluralsight.com/blog/software-development/understanding-javascript-prototypes

Удачи! :)