Классы — это удобный синтаксис, который появился в JavaScript в стандарте ES2015 (ES6) и с 8 сентября 2018 года считается широко поддерживаемым (Baseline: Widely Available). Они позволяют создавать объекты по шаблону — с общими свойствами и методами — и писать более структурированный, понятный код.

За кулисами классы используют ту же прототипную модель, что и раньше. Но теперь вы можете описывать «объектные» структуры так, как это делается в других языках, вроде Java, Python или C# — с конструкторами, методами и наследованием.

Как устроен класс

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Класс — это шаблон, из которого создаются объекты. Внутри класса вы определяете:

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

Пример:

class Person {
  constructor(name) {
    this.name = name
  }

  greet() {
    console.log(`Привет, я ${this.name}`)
  }
}

const user = new Person('Иван')
user.greet() // Привет, я Иван

Здесь класс Person описывает человека с именем и методом greet. Мы создаём экземпляр user, передаём имя и вызываем метод.

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

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

class Employee extends Person {
  constructor(name, position) {
    super(name)
    this.position = position
  }

  describe() {
    console.log(`${this.name} — ${this.position}`)
  }
}

const manager = new Employee('Анна', 'менеджер')
manager.greet()      // Привет, я Анна
manager.describe()   // Анна — менеджер

Ключевое слово extends позволяет создать подкласс, а super() вызывает конструктор родительского класса.

Почему это удобно

  • Структура. Классы помогают логически организовать код, когда у вас много похожих объектов.
  • Переиспользование. Методы определяются один раз и наследуются всеми экземплярами.
  • Читаемость. Код с классами часто проще понять, особенно для тех, кто знаком с ООП в других языках.

Заключение

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

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.