Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Класи в JS». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Що таке клас

> **Клас** - це синтаксичний цукор над **функцією-конструктором** і **прототипами**.

Тобто "під капотом" класи працюють так само, як і раніше в JavaScript, але виглядають і читаються значно простіше.

---

## Приклад простого класу

```javascript
class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

sayHi() {
    console.log(`Привіт, мене звати ${this.name}`);
  }
}

const user1 = new User('Alex', 25);
user1.sayHi(); // Привіт, мене звати Alex
```

`class` - оголошує клас
`constructor()` - спеціальний метод, який викликається при `new User()`
`this` - посилання на об'єкт, що створюється
Методи в класі автоматично потрапляють у `prototype`

---

## Як це виглядає під капотом

Цей код:

```javascript
class User {
  constructor(name) {
    this.name = name;
  }
  sayHi() {
    console.log(this.name);
  }
}
```

еквівалентний старому ES5-коду:

```javascript
function User(name) {
  this.name = name;
}
User.prototype.sayHi = function() {
  console.log(this.name);
};
```

---

## Ключові особливості класів

| Можливість | Опис |
|---|---|
| **constructor()** | Метод, який виконується при створенні об'єкта (`new`) |
| **методи класу** | Додаються в `prototype` і доступні всім екземплярам |
| **extends** | Наслідування від іншого класу |
| **super()** | Виклик конструктора батька |
| **static** | Статичні методи/властивості, належать самому класу |
| **приватні поля** (`#`) | Поля, недоступні поза класом |
| **геттери/сеттери** | Дозволяють керувати читанням і записом властивостей |

---

## Приклад з наслідуванням

```javascript
class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(`${this.name} видає звук.`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // викликає constructor батька
    this.breed = breed;
  }
  speak() {
    console.log(`${this.name} гавкає!`);
  }
}

const rex = new Dog('Rex', 'shepherd');
rex.speak(); // Rex гавкає!
```

`extends` - зв'язує прототипи класів
`super()` - викликає `constructor` батька
Можна перевизначати методи (як у класичному ООП)

---

## Статичні методи і властивості

```javascript
class MathUtil {
  static add(a, b) {
    return a + b;
  }
}

console.log(MathUtil.add(2, 3)); // 5
```

`static` - метод належить **самому класу**, а не його екземплярам.

---

## Приватні поля і методи (`#`)

Додані в ES2022:

```javascript
class Account {
  #balance = 0; // приватне поле

deposit(amount) {
    this.#balance += amount;
  }

getBalance() {
    return this.#balance;
  }
}

const acc = new Account();
acc.deposit(100);
console.log(acc.getBalance()); // 100
console.log(acc.#balance); // Помилка: приватна властивість
```

Поля з `#` доступні **тільки всередині класу**.

---

## Геттери і сеттери

```javascript
class User {
  constructor(name) {
    this._name = name;
  }

get name() {
    return this._name.toUpperCase();
  }

set name(value) {
    this._name = value.trim();
  }
}

const user = new User(' tim ');
console.log(user.name); // TIM
user.name = ' Alex ';
console.log(user.name); // ALEX
```

> Дозволяють керувати тим, як властивості читаються і змінюються.

---

## Класові вирази

Клас можна оголосити як вираз:

```javascript
const User = class {
  sayHi() {
    console.log('Hi!');
  }
};
new User().sayHi(); // Hi!
```

Або навіть дати йому ім'я тільки всередині визначення:

```javascript
const User = class MyUser {
  getClassName() {
    return MyUser.name;
  }
};
```

---

## Відмінність класів від функцій-конструкторів

| Критерій | Функція-конструктор | Клас |
|---|---|---|
| Синтаксис | Старий, громіздкий | Сучасний, декларативний |
| `new` обов'язковий | Так | Так |
| Методи | Через `prototype` | Усередині тіла класу |
| Поведінка `this` | Може бути непередбачуваною | Зрозуміла, стандартна |
| Підтримка `extends` | Ручна | Вбудована |
| Приватні поля | Немає | Є (через `#`) |

---

## Важливо пам'ятати

1. Класи **не піднімаються (не hoistяться)**, як функції.

```javascript
  const user = new User(); // ReferenceError
  class User {}
  ```
2. Усередині класу всі методи **не перелічувані (non-enumerable)**,
на відміну від звичайних властивостей у прототипах.
3. Класи - **синтаксичний цукор** над прототипами,
а не нова модель наслідування.

---

## Коротке резюме

| Поняття | Що робить |
|---|---|
| `class` | Оголошує клас |
| `constructor` | Метод, що викликається при `new` |
| `extends` | Наслідування |
| `super()` | Виклик батьківського конструктора |
| `static` | Методи класу, а не екземпляра |
| `#field` | Приватна властивість |
| `get` / `set` | Керування доступом до властивостей |

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати670 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.