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

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

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

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

Контент

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

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

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

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

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

## Що таке контекст функції

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

Контекст визначається **в момент виклику функції**, а не в момент її оголошення.

---

## Приклад

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

showThis(); // У звичайному виклику - контекст = глобальний об'єкт
```

У браузері:

```javascript
this === window
```

У Node.js:

```javascript
this === undefined (у строгому режимі)
```

---

## Контекст залежить від способу виклику

| Як викликаємо функцію | Чим буде `this` |
|---|---|
| Звичайний виклик `func()` | Глобальний об'єкт (`window` або `undefined` у strict mode) |
| Виклик як метод `obj.method()` | Об'єкт `obj` |
| Через `new` | Новий створений об'єкт |
| Через `call` / `apply` / `bind` | Вказаний вручну об'єкт |
| У стрілковій функції | `this` береться із зовнішнього контексту (лексичний) |

---

## 1. Звичайний виклик (глобальний контекст)

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

test(); // window (або undefined у strict mode)
```

---

## 2. Метод об'єкта

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

user.sayHi(); // "Alice"
```

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

---

## 3. Втрата контексту

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

const hi = user.sayHi;
hi(); // undefined (this втрачено)
```

Чому:

- Ми передали **посилання на функцію**, але не сам об'єкт.
- При виклику `hi()` - це звичайний виклик, без контексту `user`.

Виправлення:

```javascript
const hi = user.sayHi.bind(user);
hi(); // "Alice"
```

---

## 4. Контекст при `new`

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

const u = new User("Alice");
console.log(u.name); // "Alice"
```

Тут `this` вказує на **новий створений об'єкт** (`u`).

---

## 5. call / apply / bind

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

const user = { name: "Tim" };

greet.call(user);  // "Tim"
greet.apply(user); // "Tim"

const boundGreet = greet.bind(user);
boundGreet();      // "Tim"
```

| Метод | Що робить |
|---|---|
| `call(thisArg, arg1, arg2, …)` | викликає функцію з вказаним `this` і аргументами |
| `apply(thisArg, [args])` | те саме, але аргументи в масиві |
| `bind(thisArg)` | повертає нову функцію із зафіксованим `this` |

---

## 6. Стрілкові функції - особливий випадок

```javascript
const obj = {
  name: "Alice",
  arrow: () => console.log(this.name),
  regular() {
    console.log(this.name);
  },
};

obj.arrow();   // undefined (this - зовнішній контекст, не obj)
obj.regular(); // "Alice"
```

Важливо:

- У стрілкових функцій **немає власного** `this`.
- Вони "беруть" `this` із зовнішнього лексичного оточення - там, де були створені.

---

## Коротко запам'ятати

| Ситуація | Чим буде `this` |
|---|---|
| Звичайний виклик | `window` / `undefined` |
| Метод об'єкта | Сам об'єкт |
| `new` | Новий екземпляр |
| `call`, `apply`, `bind` | Вказаний вручну об'єкт |
| Стрілкова функція | Успадковує `this` ззовні |

---

## Проста аналогія

> Контекст функції - це **"власник виклику"**.
> Хто викликає функцію - той і стає `this`.

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

Для рев’юера

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

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