Классы JavaScript
Классы дают синтаксис для описания объектов с конструктором и методами. new создаёт экземпляр; демонстрация заканчивается строкой tea / regular / mint.
Класс и конструктор
Конструктор запускается при создании экземпляра и инициализирует его поля.
class Drink {
constructor(name, size) {
this.name = name;
this.size = size;
}
}
const order = new Drink("tea", "regular");
Конструктор сохраняет значения в новом объекте. this означает текущий экземпляр, а new Drink(...) создаёт его и запускает конструктор.
Метод экземпляра
Методы описывают действия, которые могут выполнять экземпляры.
class Drink {
constructor(name, size) { this.name = name; this.size = size; }
label() { return this.name + " / " + this.size; }
}
const order = new Drink("tea", "regular");
console.log(order.label());
order.label() возвращает tea / regular. Методы класса находятся в прототипе и используются экземплярами совместно.
Расширение класса
extends устанавливает наследование, super(...) вызывает конструктор родителя, а super.label() использует унаследованный метод.
class SpecialDrink extends Drink {
constructor(name, size, extra) { super(name, size); this.extra = extra; }
fullLabel() { return super.label() + " / " + this.extra; }
}
const special = new SpecialDrink("tea", "regular", "mint");
console.log(special.fullLabel());
SpecialDrink наследует label() и добавляет extra и fullLabel(). Результат — tea / regular / mint. В производном конструкторе нужно вызвать super(...) до обращения к this.
Статические методы и приватные поля
Статический метод принадлежит классу, а не его экземплярам. Поле вроде #secret читается только внутри класса.
class Drink {
static kind() { return "drink"; }
#secret = "recipe";
reveal() { return this.#secret; }
}
console.log(Drink.kind());
console.log(new Drink().reveal());
Вызывайте статический метод как Drink.kind(), а не как new Drink().kind(). Внешний код не может прочитать drink.#secret.
Классы на одной странице
Демонстрация записывает результат особого экземпляра в документ.
<p id="result"></p>
<script>
class Drink { constructor(name,size){this.name=name;this.size=size;} label(){return this.name+" / "+this.size;} }
class SpecialDrink extends Drink { constructor(name,size,extra){super(name,size);this.extra=extra;} fullLabel(){return super.label()+" / "+this.extra;} }
const order=new SpecialDrink("tea","regular","mint");
document.querySelector("#result").textContent=order.fullLabel();
</script>
Страница показывает ровно tea / regular / mint. Объявление класса нельзя использовать до места объявления: это temporal dead zone, а не утверждение о hoisting.
Классы организуют создание объектов и общее поведение. Модули организуют файлы, а метод, написанный непосредственно в одном объекте, — отдельный случай.
📊 Возможности классов
| Синтаксис | Назначение | Пример |
|---|---|---|
constructor(...) |
Инициализировать экземпляр | constructor(name, size) |
this |
Обратиться к текущему экземпляру | this.name = name |
extends и super |
Повторно использовать поведение родителя | class SpecialDrink extends Drink |
static |
Определить метод класса | Drink.kind() |
В таблице собрана основная синтаксическая форма классов из этого урока.
Практическое упражнение
Создайте Drink с name, size и label(). Затем создайте SpecialDrink через extends, добавьте extra и выведите tea / regular / mint через fullLabel(). Вызовите также Drink.kind().
Частые ошибки
Не вызывайте метод экземпляра у класса, не забывайте super(...) в производном конструкторе и не используйте this до него.
Главное
Конструктор инициализирует поля, методы совместно используются через прототип, а наследование повторно применяет поведение.
🧠 Проверьте Свои Знания
Проверьте Свои Знания
Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему
📝 Инструкции
- Внимательно прочитайте каждый вопрос
- Выберите лучший ответ на каждый вопрос
- Вы можете пересдавать тест столько раз, сколько захотите
- Ваш прогресс будет показан вверху