Статья, объясняющая одну из самых важных тем в JavaScript — наследование прототипов, объект-прототип в функциях, роль функции-конструктора и ключевое слово new.

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

Прототипы —

При создании функции ей присваивается свойство прототипа, которое указывает на объект-прототип.

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

Рассмотрим эту функцию getFullName, которая принимает два аргумента (firstName и lastName) и возвращает полное имя.

Мы можем получить доступ к свойству прототипа функции getFullName, используя getFullName.prototype.

Если мы сравним свойство конструктора объекта-прототипа с функцией getFullName, мы получим положительный результат, указывающий, что оба равны.

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

Функция конструктора -

Функция-конструктор — это уникальная функция, которая создает и инициализируетнесколько объектов с похожими свойствами.

В JavaScript функция-конструктор вызывается когда объект создается с использованием нового ключевого слова.

Вызов функции-конструктора с ключевым словом new добавит неявное поведение к функции-конструктору -

  1. Создает пустой объект и присваивает его ключевому слову «этот».
  2. Добавляет новое свойство __proto__ к ключевому слову this, которое равно значению прототипа функции-конструктора.
  3. Возвращает «это» значение.

Рассмотрим функцию-конструктор с именем Rectangle, которая создает и инициализирует объекты с двумя свойствами — длиной и шириной.

Давайте теперь создадим экземпляр r1 Rectangle. Для сравнения: свойство __proto__ объекта r1 равно прототипу функции-конструктора Rectangle.

Следовательно, при создании объекта свойство __proto__ вновь созданного объекта указывает на объект-прототип функции-конструктора.

Прототипное Наследование -

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

Одним из решений является добавление метода непосредственно в конструктор, чтобы область метода была доступна для объектов экземпляра (r1 и r2).

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

Наилучший подход — добавить метод области к объекту-прототипу функции-конструктора, поскольку объект-прототип является общим для всех объектов-экземпляров через свойство __proto__.

Теперь давайте создадим два объекта-экземпляра и проверим, есть ли у объектов-экземпляров область методов.

Область метода отсутствует в объектах-экземплярах (r1 и r2). Итак, как производится продукция?

Когда область метода вызывается для объекта экземпляра, JavaScript Engine сначала проверяет, присутствует ли метод в объекте экземпляра. Если нет, то JavaScript Engine пытается найти метод в объекте-прототипе. Эта цепочка поиска продолжается до тех пор, пока объект-прототип не станет нулевым. Этот процесс называется прототипным наследованием.

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