Что такое прототипное наследование в JavaScript?

1️⃣ Как кратко ответить

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

2️⃣ Подробное объяснение темы

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

Как это работает

Каждый объект в JavaScript имеет скрытую ссылку на другой объект, называемый его прототипом. Эта ссылка обозначается как [[Prototype]]. Когда вы пытаетесь получить доступ к свойству объекта, JavaScript сначала ищет это свойство в самом объекте. Если свойство не найдено, поиск продолжается в прототипе объекта, затем в прототипе прототипа, и так далее, пока не будет найдено свойство или достигнут конец цепочки прототипов (где прототип равен null).

Пример

Рассмотрим пример, чтобы понять, как работает прототипное наследование:

function Animal(name) {
    this.name = name;
}
​
Animal.prototype.speak = function() {
    console.log(`${this.name} makes a noise.`);
};
​
function Dog(name) {
    Animal.call(this, name);
}
​
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
​
Dog.prototype.speak = function() {
    console.log(`${this.name} barks.`);
};
​
const dog = new Dog('Rex');
dog.speak(); // Rex barks.

Объяснение кода

1. Функция-конструктор Animal:
   Создает объект с именем name. Это базовый объект, от которого будут наследовать другие объекты.

2. Метод speak в Animal.prototype:
   Добавляет метод speak в прототип Animal, который выводит сообщение о том, что животное издает звук.

3. Функция-конструктор Dog:
   Вызывает конструктор Animal с помощью call, чтобы инициализировать name для объекта Dog.

4. Dog.prototype = Object.create(Animal.prototype):
   Устанавливает прототип Dog как новый объект, созданный на основе Animal.prototype. Это позволяет объектам Dog наследовать методы Animal.

5. Dog.prototype.constructor = Dog:
   Восстанавливает свойство constructor для Dog.prototype, чтобы оно указывало на Dog, а не на Animal.

6. Переопределение метода speak в Dog.prototype:
   Добавляет или переопределяет метод speak для объектов Dog, чтобы они выводили сообщение о том, что собака лает.

7. Создание объекта dog:
   Создает новый объект Dog с именем 'Rex' и вызывает метод speak, который выводит 'Rex barks.'.

Зачем это нужно

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