Наследование классов
TeaOrder берёт общую основу у Order, а поле extra оставляет для особенности чайного заказа.
Не о cookie
Предыдущая страница заканчивалась строкой theme / dark. Здесь создаются объекты в памяти, а не сохраняется текст браузера.
Общая часть родителя
Order получает drink и size. Метод label собирает общую двухчастную подпись.
class Order {
constructor(drink, size) {
this.drink = drink;
this.size = size;
}
label() {
return this.drink + " / " + this.size;
}
}
const order = new Order("tea", "regular");
console.log(order.label());
В консоли будет tea / regular. Проверка order instanceof Order истинна, а метод разделяется через prototype.
Сначала родитель
extends Order устанавливает связь классов. Конструктор потомка обязан подготовить наследуемую часть раньше своего поля.
class Order {
constructor(drink, size) {
this.drink = drink;
this.size = size;
}
label() {
return this.drink + " / " + this.size;
}
}
class TeaOrder extends Order {
constructor(drink, size, extra) {
super(drink, size);
this.extra = extra;
}
}
const tea = new TeaOrder("tea", "regular", "mint");
console.log(tea.drink);
console.log(tea.extra);
Логи содержат tea, затем mint. Обращение к this.extra до super даёт ReferenceError.
Переопределить бережно
TeaOrder заменяет label, но super.label() уже возвращает drink и size, поэтому их не нужно писать снова.
class Order {
constructor(drink, size) {
this.drink = drink;
this.size = size;
}
label() {
return this.drink + " / " + this.size;
}
}
class TeaOrder extends Order {
constructor(drink, size, extra) {
super(drink, size);
this.extra = extra;
}
label() {
return super.label() + " / " + this.extra;
}
}
console.log(new TeaOrder("tea", "regular", "mint").label());
Получается tea / regular / mint. Объект одновременно проходит instanceof TeaOrder и instanceof Order.
Небольшая иерархия
Order отвечает за каждый заказ, TeaOrder — только за добавку к чаю. Не стоит наследовать класс ради одного нового названия.
Текст на странице
Пример создаёт TeaOrder и выводит результат переопределённого метода.
<!DOCTYPE html>
<html>
<body>
<p id="line">…</p>
<script>
class Order {
constructor(drink, size) {
this.drink = drink;
this.size = size;
}
label() {
return this.drink + " / " + this.size;
}
}
class TeaOrder extends Order {
constructor(drink, size, extra) {
super(drink, size);
this.extra = extra;
}
label() {
return super.label() + " / " + this.extra;
}
}
document.querySelector("#line").textContent =
new TeaOrder("tea", "regular", "mint").label();
</script>
</body>
</html>
Страница показывает tea / regular / mint. theme / dark относится к cookie, а tea / regular — к одному родителю.
Повторите сами
Создайте Order, затем TeaOrder с mint. Поставьте super раньше this.extra и дополните super.label().
Что часто ломают
Не используйте this до super, не копируйте всю подпись родителя и помните: потомок остаётся Order.
Главное
extends связывает классы, super(...) создаёт родительскую часть, а переопределение добавляет свою деталь.
🧠 Проверьте Свои Знания
Проверьте Свои Знания
Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему
📝 Инструкции
- Внимательно прочитайте каждый вопрос
- Выберите лучший ответ на каждый вопрос
- Вы можете пересдавать тест столько раз, сколько захотите
- Ваш прогресс будет показан вверху