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

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

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

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

Контент

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

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

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

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

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

## 1. Що таке `this` у класі

`this` всередині класу, це **посилання на поточний екземпляр** (об'єкт), створений за допомогою `new`.

### Приклад:

```javascript
class User {
  constructor(name) {
    this.name = name; // this вказує на об'єкт, що створюється
  }

greet() {
    console.log(`Hi, ${this.name}!`);
  }
}

const u = new User("Alice");
u.greet(); // Hi, Alice!
```

Тут:

- У момент `new User("Alice")` створюється **новий об'єкт**.
- `this` всередині конструктора вказує саме на **цей новий об'єкт**.
- `this.name = name` записує властивість в екземпляр.
- Потім `u.greet()` викликає метод, де `this === u`.

---

## 2. `this` у методах класу

Методи класу не мають власного `this`, він визначається **в момент виклику**.

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

sayHi() {
    console.log(this.name);
  }
}

const user = new User("Alice");
user.sayHi(); // this → user → "Alice"
```

Якщо викликати метод окремо (втративши контекст), `this` буде `undefined` (у strict mode):

```javascript
const say = user.sayHi;
say(); // TypeError: Cannot read properties of undefined
```

> Класи **завжди працюють у strict mode**, навіть якщо ти явно його не вмикав.

---

## 3. `this` у конструкторі

Конструктор викликається автоматично при `new`, і `this` вказує на **новий екземпляр**:

```javascript
class Product {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }
}

const p = new Product("Shirt", 3000);
console.log(p.name); // Shirt
```

Якщо не викликати через `new` → буде помилка:

```javascript
Product("Shirt", 3000); // TypeError: Class constructor cannot be invoked without 'new'
```

---

## 4. `this` при успадкуванні (extends)

Якщо клас успадковується, ти зобов'язаний викликати `super()` **до звернення до** `this`, інакше буде помилка.

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

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // створює this через батьківський конструктор
    this.breed = breed; // тепер можна використовувати this
  }
}
```

Якщо не викликати `super()`:

```javascript
class Dog extends Animal {
  constructor(name) {
    this.name = name; // ReferenceError: Must call super constructor before accessing 'this'
  }
}
```

---

## 5. Втрата контексту `this`

Коли метод передається як колбек, `this` втрачається:

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

greet() {
    console.log(`Hi, ${this.name}`);
  }
}

const u = new User("Alice");
setTimeout(u.greet, 1000); // undefined, бо контекст втрачено
```

### Рішення 1: Прив'язати `this` вручну

```javascript
setTimeout(u.greet.bind(u), 1000); // Hi, Alice
```

### Рішення 2: Використати стрілкову функцію

```javascript
class User {
  name = "Alice";

greet = () => {
    console.log(`Hi, ${this.name}`);
  };
}

const u = new User();
setTimeout(u.greet, 1000); // Hi, Alice
```

> Стрілкові функції **зберігають** `this` **із зовнішнього контексту**,
> тому всередині класу їх часто використовують для обробників подій.

---

## 6. У статичних методах `this` вказує на сам клас

```javascript
class MathUtils {
  static describe() {
    console.log(this); // class MathUtils { ... }
  }
}

MathUtils.describe(); // this → MathUtils
```

Якщо ти успадковуєш клас:

```javascript
class AdvancedMath extends MathUtils {}

AdvancedMath.describe(); // this → AdvancedMath
```

Тобто `this` у статичному методі **вказує не на екземпляр, а на сам клас**.

---

## 7. У приватних і стрілкових методах

```javascript
class Counter {
  #count = 0;

increment = () => {
    this.#count++;
    console.log(this.#count);
  };
}

const c = new Counter();
setTimeout(c.increment, 1000); // this збережено, працює коректно
```

> Тут `this` не втрачається, бо стрілкова функція не створює власний `this`.

---

## Підсумок

| Контекст | Значення `this` |
| --- | --- |
| У конструкторі | Новий екземпляр класу |
| У звичайному методі | Об'єкт, через який викликано метод |
| При втраті контексту (`setTimeout(obj.method)`) | `undefined` |
| У стрілковому методі | Успадковується із зовнішнього контексту (не втрачається) |
| У статичному методі | Сам клас (не екземпляр) |
| До виклику `super()` у нащадку | Помилка: `this` недоступний |

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

Для рев’юера

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

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