Структурируйте код JavaScript с помощью классов

Введение

Классы являются основой объектно-ориентированного программирования (ООП). Вы можете думать о классе как о схеме создания объектов.

ООП в JavaScript отличается от классического ООП тем, что использует прототипы, а не классы. Классы ES6 — это сокращение синтаксиса для общего шаблона JavaScript, используемого для имитации классов.

Если вы работали в ES5, вы знаете, что у нас не было классов. Вместо этого у нас есть функция конструктора, и это то, что делает ключевое слово class в ES6.

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

Прежде чем мы увидим более подробную информацию о классах ES6, давайте посмотрим, как функция конструктора используется для этой цели.

ES5 vs ES6

Прежде чем мы узнаем, как классы могут быть реализованы в ES6, я хотел бы показать вам, как это делается в ES5. Не волнуйтесь, если вы новичок в классах и не понимаете синтаксис, здесь просто посмотрите синтаксис, и мы подробно объясним классы позже в этом посте.

Вот пример работы ES5 с классами (функция-конструктор):

Теперь давайте посмотрим, как мы можем написать тот же код в ES6:

Мы также можем расширять классы в соответствии со стандартными языками ООП:

а теперь посмотрим, как это можно сделать в ES6:

В оставшейся части поста мы сосредоточимся на способе работы с классами в ES6.

Основы класса

Начнем с очень простого класса. Мы создадим класс для моделирования автомобиля:

Здесь у нас есть класс для автомобиля. Пока он пуст, но именно так вы создаете класс в ES6.

Когда у нас есть класс, мы можем использовать его для создания объектов, используя его как план. Давайте посмотрим, как мы будем создавать объект:

Здесь car1 — это объект, созданный из класса.

Конструктор и свойства

Наш класс Car пуст. Добавим к нему некоторые свойства. Обычно мы используем конструктор для определения свойств:

и вот часть создания объекта:

и вот вывод console.log, который использует интерполяцию строк:

Методы

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

следующий код показывает, как вызывается этот метод:

вывод этого вызова метода показан ниже:

Наследование

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

Когда мы используем наследование, мы используем ключевое слово extends.

В следующем коде показана базовая попытка моделирования с использованием ключевого слова extends:

Теперь у нас есть базовый класс Автомобиль, и классы Автомобиль и Грузовик расширяют этот базовый класс. Обратите внимание, что у автомобиля есть свойство марка, а у грузовика есть свойство storageArea, однако id и имя присутствуют в оба класса, поэтому мы помещаем их в класс транспортных средств.

мы обычно не создаем базовый класс (автомобиль). Мы можем это сделать, но в основном мы работаем только с бизнес-объектами (автомобиль, грузовик).

Давайте посмотрим, как мы работаем с этими бизнес-объектами:

и вот вывод консоли:

Переопределение метода

Переопределение метода в объектно-ориентированном программировании — это языковая функция, которая позволяет подклассу или дочернему классу предоставлять конкретную реализацию метода, который уже предоставлен одним из его базовых или родительских классов. Он допускает определенный тип полиморфизма (подтипирование).

Если вы заметили, что у нас есть метод start() в классе Car, но нет такого метода в Truck. В этом примере мы хотим, чтобы этот метод был реализован как в классе Car, так и в классе Truck. Один из способов сделать это — предоставить определение метода в классе Vehicle (базовом), а затем переопределить его в подклассах. Давайте посмотрим это дальше:

Теперь, если мы попытаемся выполнить этот метод на объекте грузовика, он оставит разработчику сообщение о том, что им необходимо предоставить реализацию для этого метода. Вот пример, если разработчик не переопределяет этот метод в классе грузовиков:

консольный вывод:

Чтобы исправить эту ошибку, мы предоставим простую реализацию метода start() для класса Truck:

и вот результат:

Резюме

В этом посте мы увидели, как мы можем использовать классы ES6 для моделирования бизнес-объектов в нашем приложении. Мы также узнали, что классы ES6 — это сокращение синтаксиса для функций-конструкторов, однако они приводят к гораздо более чистому коду, и мы увидели несколько примеров наследования и переопределения методов.

Вы можете скачать код из этого репозитория git (ветка oopBasics):

Дайте мне знать, если у вас есть вопросы или комментарии. До следующего раза, счастливого кодирования.

Первоначально опубликовано на https://hexquote.com 25 сентября 2021 г.