Композиция и наследование
Выбирайте композицию для общего поведения
«Композиция и наследование» — бесплатный урок Angular Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.
Две стратегии повторного использования
Чтобы разделять поведение между компонентами, можно использовать наследование (расширять базовый класс) или композицию (объединять небольшие части). API композиции Angular делает композицию предпочтительным вариантом по умолчанию.
Итоги наследования
При наследовании компонент расширяет базовый компонент или директиву и повторно использует их входные параметры, выходные события и логику.
export class FancyButton extends BaseButton {
// inherits BaseButton members
}Ограничения наследования
Класс может расширять только один базовый класс. Глубокие иерархии становятся негибкими, а вместе с ними наследуются все части, даже ненужные.
Проблема ромба
Объединить несколько поведений с помощью наследования невозможно без неудобных цепочек. Композиция обходит это ограничение, независимо применяя множество директив.
Итоги композиции
При композиции компонент остаётся специализированным и подключает поведения через hostDirectives, объединяя столько поведений, сколько необходимо.
hostDirectives: [ElevateDirective, RippleDirective, FocusTrapDirective]Отдавайте предпочтение композиции
Рекомендация «отдавайте предпочтение композиции, а не наследованию» особенно применима в Angular: композиция гибкая, расширяемая и позволяет избежать хрупких базовых классов.
Когда наследование всё ещё уместно
Наследование может хорошо подойти для одного стабильного базового класса, общего для близких вариантов, например для базового поля формы, которое специализируют варианты. Делайте иерархии неглубокими.
Сочетание обоих подходов
Подходы можно сочетать: расширять тонкий базовый класс для общей структуры, а для сквозных задач компоновать поведения.
Инкапсуляция
Композиция сохраняет внутреннее устройство каждого поведения закрытым и открывает только выбранные входные параметры и выходные события, тогда как наследование раскрывает весь API базового класса.
Переход к композиции при рефакторинге
Если в базовом классе накапливаются несвязанные обязанности, разделите каждую из них на директиву и скомпонуйте их. В результате код станет более модульным и тестируемым.
Руководство по выбору
Нужно несколько независимых поведений? Используйте композицию. Нужна единая общая структурная основа? Подойдёт неглубокий базовый класс. Для гибкости по умолчанию выбирайте композицию.
Быстрая проверка
Проверьте, насколько хорошо Вы понимаете различия между композицией и наследованием.
Итоги
Вы узнали, что композиция (объединение специализированных поведений через hostDirectives) гибче наследования (одного базового класса), позволяет избежать хрупких иерархий и должна использоваться по умолчанию, тогда как неглубокое наследование следует оставлять для общей структуры.
Часто задаваемые вопросы
Урок «Композиция и наследование» бесплатный?
Да — полный текст урока «Композиция и наследование» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.
Чему я научусь в уроке «Композиция и наследование»?
Выбирайте композицию для общего поведения Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Angular Academy?
Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Композиция и наследование»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Angular Academy?
Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Свойство hostDirectives
- Предоставление входных и выходных данных
- Создание повторно используемого поведения
- Композиция и наследование