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

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

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

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

Контент

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

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

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

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

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

## 1. Що таке `this`

> `this` **- це посилання на контекст виконання функції**,
> тобто - *на об'єкт, у контексті якого функцію було викликано*.

Простіше кажучи:

- `this` не визначається під час оголошення функції;
- воно **призначається в момент виклику** функції (runtime);
- і залежить від **способу виклику**, а не від того, де функція написана.

---

## 2. Глобальний контекст

У **глобальній області** (поза функцією):

```javascript
console.log(this);
```

- У **браузері** → `window`
- У **Node.js** → `{}` (порожній об'єкт у модулі)

---

## 3. Всередині звичайної функції

```javascript
function showThis() {
  console.log(this);
}

showThis(); // ?
```

Без "власника" (`obj.method()`):

- У **нестрогому режимі** → `this = window`
- У **строгому (**`'use strict'`**)** → `this = undefined`

---

## 4. У методі об'єкта

```javascript
const user = {
  name: 'Tim',
  sayHi() {
    console.log(`Привіт, я ${this.name}`);
  }
};

user.sayHi(); // Привіт, я Tim
```

Тут `this` → посилається на об'єкт `user`,
тому що функцію викликано **через крапку** (`user.sayHi()`).

---

## 5. Втрата `this`

```javascript
const user = {
  name: 'Tim',
  sayHi() {
    console.log(this.name);
  }
};

const fn = user.sayHi;
fn(); // undefined, тому що контекст втрачено
```

Коли ми зберігаємо посилання на метод у змінній - `this` більше не пов'язаний з `user`.

---

## 6. Як зберегти `this`

### Спосіб 1 - `bind`

```javascript
const boundFn = user.sayHi.bind(user);
boundFn(); // Привіт, я Tim
```

### Спосіб 2 - стрілкова функція

Стрілкові функції **не мають власного** `this` -
вони **успадковують** `this` **із зовнішньої області**:

```javascript
const user = {
  name: 'Tim',
  sayHiLater() {
    setTimeout(() => {
      console.log(this.name); // 'Tim'
    }, 1000);
  }
};

user.sayHiLater();
```

---

## 7. У конструкторах (`new`)

Якщо функцію викликано з `new`,
`this` вказує на **новий створюваний об'єкт**:

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

const tim = new User('Tim');
console.log(tim.name); // Tim
```

Під час виклику через `new`:

1. створюється порожній об'єкт `{}`;
2. він зв'язується з `this`;
3. функція виконується;
4. повертається цей об'єкт.

---

## 8. В обробниках подій (браузер)

```javascript
button.addEventListener('click', function() {
  console.log(this); // елемент button
});
```

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

Якщо використати стрілкову функцію:

```javascript
button.addEventListener('click', () => {
  console.log(this); // не button, а зовнішній контекст
});
```

---

## 9. Явне керування `this` (`call`, `apply`, `bind`)

| Метод | Що робить | Коли викликається |
|---|---|---|
| `call(thisArg, a, b)` | викликає функцію з указаним `this` | одразу |
| `apply(thisArg, [a, b])` | те саме, але аргументи масивом | одразу |
| `bind(thisArg)` | повертає нову функцію з "прив'язаним" `this` | пізніше |

```javascript
function greet() {
  console.log(`Привіт, ${this.name}`);
}

const user = { name: 'Tim' };

greet.call(user);  // Привіт, Tim
greet.apply(user); // Привіт, Tim
greet.bind(user)(); // Привіт, Tim
```

---

## 10. У стрілкових функціях

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

```javascript
const user = {
  name: 'Tim',
  showThis: () => console.log(this)
};

user.showThis(); // window (або undefined у strict)
```

Тут `this` не `user`,
тому що стрілкова функція взяла `this` із глобального контексту.

---

## 11. `this` у класах

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

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

const tim = new User('Tim');
tim.sayHi(); // Привіт, Tim
```

У методах класів `this` працює аналогічно звичайним методам об'єктів.

---

## ПІДСУМОК

| Контекст | Що буде в `this` |
|---|---|
| Глобальний (у браузері) | `window` |
| У звичайній функції | `undefined` (у strict), `window` (у нестрогому) |
| У методі об'єкта | Сам об'єкт |
| У стрілковій функції | `this` зовнішньої області |
| У конструкторі / класі | Новий екземпляр |
| В обробнику події | DOM-елемент |
| Через `call` / `apply` / `bind` | Указаний вручну об'єкт |

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

Для рев’юера

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

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