Статья, объясняющая одну из самых важных тем в JavaScript — наследование прототипов, объект-прототип в функциях, роль функции-конструктора и ключевое слово new.
Прежде чем обсуждать прототипное наследование, сначала давайте разберемся со свойством прототипа функции.
Прототипы —
При создании функции ей присваивается свойство прототипа, которое указывает на объект-прототип.
Объект-прототип имеет свойство-конструктор, которое указывает на созданную функцию.
Рассмотрим эту функцию getFullName, которая принимает два аргумента (firstName и lastName) и возвращает полное имя.
Мы можем получить доступ к свойству прототипа функции getFullName, используя getFullName.prototype.
Если мы сравним свойство конструктора объекта-прототипа с функцией getFullName, мы получим положительный результат, указывающий, что оба равны.
Теперь давайте разберемся с функцией-конструктором и ролью нового ключевого слова, которое передает объект-прототип функции каждому созданному экземпляру.
Функция конструктора -
Функция-конструктор — это уникальная функция, которая создает и инициализируетнесколько объектов с похожими свойствами.
В JavaScript функция-конструктор вызывается когда объект создается с использованием нового ключевого слова.
Вызов функции-конструктора с ключевым словом new добавит неявное поведение к функции-конструктору -
- Создает пустой объект и присваивает его ключевому слову «этот».
- Добавляет новое свойство __proto__ к ключевому слову this, которое равно значению прототипа функции-конструктора.
- Возвращает «это» значение.
Рассмотрим функцию-конструктор с именем Rectangle, которая создает и инициализирует объекты с двумя свойствами — длиной и шириной.
Давайте теперь создадим экземпляр r1 Rectangle. Для сравнения: свойство __proto__ объекта r1 равно прототипу функции-конструктора Rectangle.
Следовательно, при создании объекта свойство __proto__ вновь созданного объекта указывает на объект-прототип функции-конструктора.
Прототипное Наследование -
Предположим для приведенного выше примера, что новый метод, вычисляющий площадь прямоугольника, должен быть совместно использован всеми объектами-экземплярами.
Одним из решений является добавление метода непосредственно в конструктор, чтобы область метода была доступна для объектов экземпляра (r1 и r2).
Однако каждый экземпляр объекта, созданный с помощью функции-конструктора, будет иметь собственную копию свойств и методов. Поэтому хранение универсального метода, такого как area, в каждом созданном экземпляре не имеет смысла и приводит к расходу памяти.
Наилучший подход — добавить метод области к объекту-прототипу функции-конструктора, поскольку объект-прототип является общим для всех объектов-экземпляров через свойство __proto__.
Теперь давайте создадим два объекта-экземпляра и проверим, есть ли у объектов-экземпляров область методов.
Область метода отсутствует в объектах-экземплярах (r1 и r2). Итак, как производится продукция?
Когда область метода вызывается для объекта экземпляра, JavaScript Engine сначала проверяет, присутствует ли метод в объекте экземпляра. Если нет, то JavaScript Engine пытается найти метод в объекте-прототипе. Эта цепочка поиска продолжается до тех пор, пока объект-прототип не станет нулевым. Этот процесс называется прототипным наследованием.
Следовательно, свойства и методы, такие как длина и ширина, характерные для конкретного экземпляра объекта, должны быть добавлены в функцию-конструктор, а общие свойства и методы, такие как площадь, должны быть включены в объект-прототип.