Синтаксис классов JavaScript

Введение в синтаксис классов JavaScript

Класс — это шаблон для создания объектов с одинаковой структурой и поведением. Вместо того чтобы вручную писать шаблонный код в виде функции-конструктора и прототипа, вы описываете объект один раз и создаёте столько экземпляров, сколько нужно. Классы были введены в ECMAScript 2015 (ES6) и стали стандартным способом моделирования объектно-ориентированного кода в JavaScript.

В этой главе рассматриваются основы: как объявить класс, что делает constructor, как добавлять методы, геттеры/сеттеры и публичные поля, разница между объявлением класса и выражением класса, а также два момента, которые часто вызывают путаницу — классы являются функциями под капотом и не поднимаются (hoisting) как обычные функции.

Определение класса

Класс объявляется с помощью ключевого слова class, за которым следует имя и тело в фигурных скобках:

class MyClass {
  // class body
}

По соглашению имена классов используют PascalCase (Rectangle, UserAccount). Тело содержит методы, геттеры/сеттеры и поля — но обратите внимание, что, в отличие от объектных литералов, члены не разделяются запятыми.

Конструктор

constructor — это специальный метод, который запускается автоматически при создании экземпляра с помощью new. Его задача — принимать аргументы и инициализировать свойства нового объекта через this:

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

Класс может иметь не более одного constructor. Если вы его не укажете, JavaScript предоставит пустой конструктор автоматически.

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

Используйте ключевое слово new для создания экземпляра. new создаёт новый объект, привязывает его к this, запускает конструктор и возвращает объект:

Методы класса

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

Методы класса являются неперечислимыми, что означает, что они не будут отображаться в цикле for...in или Object.keys() — ещё одно отличие классов от обычных объектов, в которых добавленные методы являются перечислимыми.

Геттеры и сеттеры

Геттер позволяет представить вычисляемое значение как свойство; сеттер позволяет перехватить присвоение. Добавьте перед методом get или set:

Геттеры и сеттеры идеально подходят для валидации или производных значений. Подробнее см. Геттеры и сеттеры свойств.

Публичные поля класса

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

Поля присваиваются каждому экземпляру (а не прототипу) до выполнения тела конструктора. Для полей, которые должны быть скрыты от внешнего кода, используйте приватные поля (префикс #) — они рассматриваются в разделе Приватные и защищённые свойства и методы.

Статические методы

Метод static принадлежит самому классу, а не его экземплярам. Статические члены удобны для утилит или фабричных функций, которые относятся к классу, но не требуют конкретного экземпляра:

Классы также поддерживают static-поля и свойства. Подробнее читайте в разделе Статические свойства и методы.

Выражения класса

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

Это полезно, когда вам нужно создать класс условно, передать его как аргумент или вернуть из функции.

Классы — это функции под капотом

Класс — это по сути специальный вид функции. Синтаксис class во многом является синтаксическим сахаром над старым паттерном «функция-конструктор плюс прототип», с некоторыми дополнительными ограничениями безопасности:

Дополнительные ограничения включают: тело всегда выполняется в строгом режиме (strict mode), методы являются неперечислимыми, и конструктор класса не может быть вызван без new (это вызовет TypeError).

Классы не поднимаются (не hoistятся)

Объявления функций поднимаются (hoisting) — вы можете вызвать их до того, как они появятся в коде. Объявления классов не могут использоваться до их определения. Они поднимаются только по имени, но остаются в «временной мёртвой зоне», поэтому обращение к ним раньше времени вызовет ReferenceError:

Всегда объявляйте класс до его использования.

Итоги

Классы JavaScript придают объектно-ориентированному коду чёткую и предсказуемую структуру. В этой главе вы узнали, как объявить класс, написать constructor, добавить методы прототипа, геттеры/сеттеры, публичные поля и static-методы, а также познакомились с выражениями классов. Запомните два ключевых момента: класс — это функция под капотом, тело которой выполняется в строгом режиме и не может быть вызвано без new, а объявления классов не поднимаются (не hoistятся).

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

Практика