Наследование, super и когда предпочесть композицию
Расширяйте базовый класс с помощью extends, вызывайте super в конструкторах, безопасно переопределяйте методы и узнавайте, когда лучше простая композиция
«Наследование, super и когда предпочесть композицию» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 2 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 3 уроков всего.
Общая картина
Цель: использовать базовое наследование без путаницы.
- extends создаёт дочерний класс
- super(...) вызывает конструктор родительского класса
- Переопределяйте метод; при необходимости вызывайте super.method()
- Если это не отношение «является разновидностью», предпочитайте композицию
extends и super
Создайте дочерний класс с помощью extends; вызовите super(name), чтобы выполнить конструктор родительского класса и настроить this.
// Base class with a small field and method
class Animal {
constructor(name) {
this.name = name;
}
info() {
return "Animal:" + this.name;
}
}
// Child class extends the base and calls super(...)
class Dog extends Animal {
constructor(name, breed) {
// must call super() before using this
super(name);
this.breed = breed;
}
speak() {
return "woof";
}
}
const d = new Dog("Milo", "Beagle");
console.log(d.info(), d.speak());
Переопределение метода
При переопределении можно вызвать super.method(), чтобы повторно использовать базовую логику, а затем добавить своё изменение.
// Override a method; keep parent behavior with super.method()
class Button {
click() {
return "base-click";
}
}
class IconButton extends Button {
click() {
// call parent behavior, then add something
const base = super.click();
return base + "+icon";
}
}
const b = new IconButton();
console.log(b.click()); // "base-click+icon"
Предпочитайте композицию для отношений «содержит»
Если отношение означает «содержит» (использует помощник), предпочитайте композицию наследованию, чтобы классы оставались простыми.
// Composition: use a helper object instead of extending
class Logger {
log(msg) {
console.log("[log]", msg);
}
}
class Player {
constructor(name, logger) {
this.name = name;
this.logger = logger; // has-a logger
}
score(points) {
this.logger.log(this.name + " +" + points);
}
}
const logger = new Logger();
const p = new Player("Ayla", logger);
p.score(5);
«Является» и «содержит»
Наследование моделирует отношение «является разновидностью»: Dog — это Animal. Композиция предназначена для помощников в отношении «содержит».
// Use instanceof for a quick is-a check
console.log("Dog is Animal?", d instanceof Animal);
console.log("Player is Animal?", p instanceof Animal);
Привычки начинающего разработчика
Советы:
- Для начинающих сохраняйте иерархии неглубокими.
- В конструкторах дочерних классов сначала вызывайте super(...).
- Переопределяйте только необходимое; повторно используйте код через super.method().
- Для утилит и сквозных возможностей предпочитайте композицию.
Проверка основ super(...)
Быстрая проверка: super в конструкторе дочернего класса.
Повторение
Повторение: используйте extends для настоящего отношения «является разновидностью», заранее вызывайте super(...), осторожно переопределяйте методы (при необходимости вызывайте super.method()) и предпочитайте композицию для помощников.
Часто задаваемые вопросы
Урок «Наследование, super и когда предпочесть композицию» бесплатный?
Да — полный текст урока «Наследование, super и когда предпочесть композицию» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 3 уроков всего.
Чему я научусь в уроке «Наследование, super и когда предпочесть композицию»?
Расширяйте базовый класс с помощью extends, вызывайте super в конструкторах, безопасно переопределяйте методы и узнавайте, когда лучше простая композиция Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать JavaScript Academy?
Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 3.
Сколько времени занимает урок «Наследование, super и когда предпочесть композицию»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке JavaScript Academy?
Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Поля классов, приватные поля # и статические члены
- Наследование, super и когда предпочесть композицию
- Миксины (обзор) — простое повторное использование без глубокой иерархии