Урок 3.3: Прототипы и наследование
Цели урока:
- Понять, что такое прототипы в JavaScript и как работает прототипное наследование.
- Изучить способы создания объектов и прототипов.
- Научиться использовать прототипное наследование для расширения функциональности объектов.
Введение
В JavaScript все объекты имеют прототипы. Прототип объекта — это еще один объект, от которого наследуются свойства и методы. Прототипное наследование позволяет объектам делиться свойствами и методами, что облегчает повторное использование кода.
1. Понимание прототипов
Каждый объект в JavaScript имеет скрытое свойство `[[Prototype]]`, которое ссылается на его прототип. В современном JavaScript это свойство можно получить с помощью `Object.getPrototypeOf()` или `__proto__`.
- Пример прототипа:
let animal = {
eats: true,
walk() {
console.log("Животное идет");
}
};
let rabbit = {
jumps: true,
__proto__: animal
};
rabbit.walk(); // Животное идет
console.log(rabbit.eats); // true
2. Создание объектов с прототипами
- С помощью `Object.create`:
Метод `Object.create(proto)` создает и возвращает новый объект с указанным объектом `proto` в качестве его `[[Prototype]]`.
let animal = {
eats: true,
walk() {
console.log("Животное идет");
}
};
let rabbit = Object.create(animal);
rabbit.jumps = true;
rabbit.walk(); // Животное идет
3. Функции-конструкторы
Прототипное наследование также может быть реализовано с использованием функций-конструкторов. Каждая функция-конструктор имеет свойство `prototype`, которое используется всеми экземплярами созданных с ее помощью объектов.
- Пример функции-конструктора:
function Animal(name) {
this.name = name;
}
Animal.prototype.walk = function() {
console.log(`${this.name} идет`);
};
let rabbit = new Animal("Белый кролик");
rabbit.walk(); // Белый кролик идет
4. Наследование между "классами"
В JavaScript "классы" — это особый вид функций, и наследование между ними осуществляется через прототипы.
- Пример наследования:
function Animal(name) {
this.name = name;
}
Animal.prototype.walk = function() {
console.log(`${this.name} идет`);
};
function Rabbit(name) {
this.name = name;
this.jumps = true;
}
Rabbit.prototype = Object.create(Animal.prototype);
Rabbit.prototype.constructor = Rabbit;
Rabbit.prototype.jump = function() {
console.log(`${this.name} прыгает`);
};
let rabbit = new Rabbit("Белый кролик");
rabbit.walk(); // Белый кролик идет
rabbit.jump(); // Белый кролик прыгает
Заключение
Прототипное наследование в JavaScript — это мощный механизм, позволяющий объектам делиться свойствами и методами. Это обеспечивает эффективное повторное использование кода и помогает в создании сложных иерархий объектов. Понимание прототипов и наследования является ключевым для глубокого освоения JavaScript.