Современный JavaScript с ES6–ES13 (JS-учебник)

Наследование в JavaScript: Современные классы с ES6

Все видео урока Современный JavaScript с ES6–ES13 (JS-учебник)

Наследование является центральной концепцией объектно-ориентированного программирования, которая позволяет вам расширять существующие классы и использовать их свойства и методы. JavaScript ввел более новую и надежную синтаксис наследования с введением ES6, который гораздо проще в использовании, чем первоначальные методы прототипов. В этом руководстве я покажу вам, как использовать наследование в JavaScript с помощью ключевого слова extends, и шаг за шагом объясню, как правильно вызывать конструктор базового класса с помощью super.

Главные выводы

  • Наследование в JavaScript осуществляется с помощью ключевого слова extends.
  • Конструктор базового класса должен вызываться с помощью super.
  • Экземплярные переменные могут ссылаться на ключевое слово this в производном классе.

Пошаговое руководство

Создание базового класса

Чтобы начать с наследования, сначала создадим базовый класс под названием Shape. В этом классе мы определим конструктор и несколько методов.

Здесь вы определяете класс Shape, который имеет конструктор. В этом конструкторе вы можете определить переменные и функции, к которым могут получить доступ другие классы.

Наследование в JavaScript: Современные классы с ES6

Изучение подкласса

После создания базового класса вы можете создать подкласс, который наследует от Shape. В этом примере мы назовем новый класс ConcreteShape.

В этом подклассе мы используем ключевое слово extends, чтобы указать, что ConcreteShape наследует от Shape. Конструктор подкласса вызывает конструктор базового класса Shape с помощью super(), что необходимо для правильной реализации наследования.

Создание экземпляра подкласса

Теперь, когда мы создали подкласс, настало время создать экземпляр этого класса.

Здесь вы создаете новый объект myShape класса ConcreteShape и передаете описание в конструктор. Затем вы вызываете метод print, который выводит описание.

Добавление дополнительных свойств

Вы можете добавить дополнительные свойства или даже методы, которые специфичны для этого подкласса.

Здесь вы расширили класс ConcreteShape, добавив дополнительные параметры в конструктор.

Использование наследования

С помощью ключевого слова super вы можете вызвать метод describe базового класса, чтобы объединить свойства базового класса и подкласса.

Итоги – Наследование в JavaScript: От ES6 к ES13

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

Часто задаваемые вопросы

В чем разница между super() и this?super() используется для вызова конструктора базового класса, в то время как this ссылается на экземпляр текущего класса.

Почему использование классов Es6 лучше, чем прототипов?Классы ES6 предлагают более четкий и интуитивно понятный синтаксис, который облегчает чтение и понимание кода.

Могу ли я иметь несколько базовых классов?Нет, JavaScript не поддерживает множественное наследование. Один класс может наследовать только от одного другого класса.

Что произойдет, если я не вызову super()?Если вы не вызовете super(), вы получите ошибку, так как конструктор базового класса, который инициализирует все необходимое для класса, не будет выполнен.