Классы: синтаксис

Здесь будет встроен видео-разбор темы (5–7 минут, YouTube / RuTube / VK Видео) — тем, кто лучше воспринимает на слух, текст ниже не обязателен.

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

js

class User {
  constructor(name) {
    this.name = name;
  }
}
const u = new User("Аня");
console.log(u.name);

Сначала предположите, что выведет код

Конструктор не обязателен. Если его нет, движок подставит пустой, и new просто вернёт объект без собственных свойств. Конструктор в классе может быть только один — перегрузки, как в других языках, здесь нет.

js

class Empty {}
const e = new Empty();
console.log(typeof e);
console.log(e instanceof Empty);

Сначала предположите, что выведет код

Между методами в теле класса не ставят запятых. Это не объектный литерал, а отдельная грамматика — запятая там будет синтаксической ошибкой.

Метод пишется без слова function: имя, скобки, тело. Внутри this — тот объект, у которого метод вызвали. Важная деталь: сам метод в объект не попадает. В объекте лежат только данные, записанные конструктором, — к полям класса вернёмся ниже.

js

class User {
  constructor(name) { this.name = name; }
  hello() { return `Привет, ${this.name}!`; }
}
const u = new User("Ким");
console.log(u.hello());
console.log(Object.keys(u));

Сначала предположите, что выведет код

Методы складываются в Имя.prototype — по одной копии на весь класс. Тысяча объектов — всё та же одна функция, к которой они обращаются через прототипную цепочку.

js

class Point {
  move() { return "готово"; }
}
const p = new Point();
console.log(p.move());
console.log(p.hasOwnProperty("move"));
console.log(Point.prototype.hasOwnProperty("move"));

Сначала предположите, что выведет код

разбор вывода
За move объект сходил в прототип: своего метода у него нет, поэтому p.hasOwnProperty("move") отвечает false. У Point.prototype метод собственный — true. Копия функции одна на все объекты класса.

Поле — это свойство, объявленное прямо в теле класса, без this и без конструктора. Оно записывается в каждый новый объект при создании, ещё до того, как выполнится тело конструктора. В отличие от методов, поля живут именно в объекте, а не в прототипе.

js

class Counter {
  value = 0;
  step = 1;
  next() { this.value += this.step; return this.value; }
}
const c = new Counter();
console.log(c.next());
console.log(c.next());

Сначала предположите, что выведет код

У полей есть приятный побочный эффект. Если значением поля сделать стрелочную функцию, она навсегда запомнит this того объекта, в котором создалась. Такую «функцию-поле» можно оторвать от объекта и передать куда угодно — она не потеряет контекст, в отличие от обычного метода.

js

class Button {
  label = "ОК";
  say = () => this.label;
}
const b = new Button();
const f = b.say;
console.log(f());

Сначала предположите, что выведет код

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

js

class User {
  get name() { return this._name; }
  set name(value) { this._name = value.trim(); }
}
const u = new User();
u.name = "  Лея  ";
console.log(u.name);
console.log(u._name);

Сначала предположите, что выведет код

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

js

class Rect {
  constructor(w, h) { this.w = w; this.h = h; }
  get area() { return this.w * this.h; }
}
const r = new Rect(3, 4);
console.log(r.area);

Сначала предположите, что выведет код

Никакой отдельной сущности «класс» в языке не появилось. Объявление class создаёт обычную функцию: её тело — это код конструктора, а все методы уходят в её prototype. Проверяется в одну строчку.

js

class User {
  hello() { return "привет"; }
}
console.log(typeof User);
console.log(User.prototype.constructor === User);
console.log(typeof User.prototype.hello);

Сначала предположите, что выведет код

Почти то же самое можно собрать руками — так и писали до появления классов. Результат для того, кто пользуется объектом, неотличим: тот же new, тот же вызов метода, тот же typeof. Класс просто избавляет от ручной возни с prototype.

js

function User(name) { this.name = name; }
User.prototype.hello = function () { return this.name; };
const u = new User("Ро");
console.log(u.hello());
console.log(typeof User);

Сначала предположите, что выведет код

Раз класс — значение, его можно присвоить переменной, передать в функцию или вернуть из неё. Такая запись называется class expression, и имя после слова class в ней необязательно.

js

const User = class {
  hello() { return "привет"; }
};
console.log(new User().hello());
console.log(typeof User);

Сначала предположите, что выведет код

«Синтаксический сахар» не значит «ровно то же самое». У классов есть отличия, и все они сделаны в одну сторону: язык не даёт выстрелить себе в ногу привычными способами.

Что	Функция-конструктор	class
Вызов без new	Работает, this — undefined или глобальный объект	TypeError
Использование до объявления	Объявление всплывает, вызов сработает	Временная мёртвая зона, ReferenceError
Режим кода внутри	Как у окружающего кода	Всегда строгий
Методы в цикле for...in	Перечисляются	Не перечисляются

Класс нельзя вызвать как обычную функцию — забыть new и молча получить мусор не выйдет. Это не мелочь: раньше такая опечатка тихо портила глобальный объект, а теперь она заметна сразу.

js

class A {}
try {
  A();
} catch (e) {
  console.log(e.name);
}

Сначала предположите, что выведет код

И объявление класса не всплывает так, как объявление функции. До строки с class имя уже занято, но обращаться к нему нельзя — это временная мёртвая зона, та же, что у let и const. Плюс всё внутри класса выполняется в строгом режиме, даже если в файле нет "use strict".

js

try {
  new Later();
} catch (e) {
  console.log(e.name);
}
class Later {}

Сначала предположите, что выведет код

Класс — заготовка; объекты создаёт new, а начальные данные записывает constructor — он один на класс и не обязателен.
Методы попадают в prototype и общие для всех объектов, а поля класса записываются в каждый объект при создании.
Поле со стрелочной функцией навсегда привязывает this к своему объекту — такую функцию можно передавать отдельно от объекта.
get и set делают из метода свойство: снаружи обычное чтение и присваивание, внутри — код с проверками и вычислениями.
Класс — это функция с методами в prototype, но со строгими правилами: обязательный new, временная мёртвая зона и всегда строгий режим.

1/3Где хранится метод hello, объявленный в теле класса User?

2/3Что выведет console.log(typeof A), если выше объявлено class A {}?

3/3Что произойдёт при вызове класса без new: class A {}, а затем A()?

Прямоугольник с площадью и масштабом

Напишите класс Rectangle. Конструктор принимает ширину и высоту. Геттер area возвращает площадь. Метод scale(k) умножает обе стороны на k и возвращает сам объект — тогда вызовы можно связывать в цепочку.

js

class Rectangle {
  constructor(width, height) {
    // ваш код: сохраните стороны в объекте
  }
  get area() {
    // ваш код: площадь считается из сторон, а не хранится отдельно
    return 0;
  }
  scale(k) {
    // ваш код: умножьте стороны и верните сам объект — без этого цепочка оборвётся
    return this;
  }
}
const r = new Rectangle(2, 3);
console.log(r.area); // сейчас 0, а нужно 6
console.log(r.scale(2).area); // сейчас 0, а нужно 24
console.log(r.width); // сейчас undefined, а нужно 4

Сначала предположите, что выведет код

Площадь не хранится, а вычисляется геттером — значит, после scale она пересчитается сама. Чтобы работала цепочка, scale возвращает this.

jsлистинг · не запускается

class Rectangle {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }
  get area() {
    return this.width * this.height;
  }
  scale(k) {
    this.width *= k;
    this.height *= k;
    return this;
  }
}

const r = new Rectangle(2, 3);
console.log(r.area); // 6
console.log(r.scale(2).area); // 24
console.log(r.width); // 4

class Rectangle {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }
  get area() {
    return this.width * this.height;
  }
  scale(k) {
    this.width *= k;
    this.height *= k;
    return this;
  }
}

const r = new Rectangle(2, 3);
console.log(r.area); // 6
console.log(r.scale(2).area); // 24
console.log(r.width); // 4

Если бы площадь записывалась в обычное свойство в конструкторе, после scale она осталась бы старой. Геттер снимает эту проблему целиком.

Полное имя через геттер и сеттер

Класс User хранит firstName и lastName. Добавьте свойство fullName: при чтении оно собирает имя и фамилию через пробел, при записи — разбирает строку обратно на две части.

js

class User {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
  get fullName() {
    // ваш код: соберите имя и фамилию через пробел
    return "";
  }
  set fullName(value) {
    // ваш код: разберите строку обратно на две части
  }
}
const u = new User("Ада", "Лавлейс");
console.log(u.fullName); // сейчас пусто, а нужно Ада Лавлейс
u.fullName = "Грейс Хоппер";
console.log(u.firstName); // сейчас Ада, а нужно Грейс
console.log(u.lastName); // сейчас Лавлейс, а нужно Хоппер

Сначала предположите, что выведет код

Подчёркивание здесь не нужно: настоящие данные уже лежат в двух обычных свойствах, а fullName — вычисляемая надстройка над ними.

jsлистинг · не запускается

class User {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
  set fullName(value) {
    const parts = value.split(" ");
    this.firstName = parts[0];
    this.lastName = parts[1];
  }
}

const u = new User("Ада", "Лавлейс");
console.log(u.fullName); // Ада Лавлейс
u.fullName = "Грейс Хоппер";
console.log(u.firstName); // Грейс

class User {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
  set fullName(value) {
    const parts = value.split(" ");
    this.firstName = parts[0];
    this.lastName = parts[1];
  }
}

const u = new User("Ада", "Лавлейс");
console.log(u.fullName); // Ада Лавлейс
u.fullName = "Грейс Хоппер";
console.log(u.firstName); // Грейс

Геттер и сеттер носят одно имя fullName и вместе описывают одно свойство.

Классы: синтаксис

Видеоразбор темы за 5–7 минут

class и constructorновый объект и его начальные данные

Методыфункции в теле класса, общие для всех

Поля классасвойства прямо в объявлении класса

Геттеры и сеттерысвойство снаружи, функция внутри

Класс — это функциясахар над функцией-конструктором и прототипом

Чем класс отличается от функцииTDZ, строгий режим, обязательный new

Итогошпаргалка по теме

Проверьте себятри быстрых вопроса

Задачидве задачи с решениями

Прямоугольник с площадью и масштабом

Полное имя через геттер и сеттер