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

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

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

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

Контент

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

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

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

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

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

**Контекст виконання (execution context)** - це *внутрішнє середовище*, у якому виконується конкретний шматок JavaScript-коду.
Він визначає, **що доступно коду** у певний момент: які змінні, функції, `this` тощо.

### Основна ідея

Коли JS-код запускається, рушій створює *контекст виконання* - своєрідну «робочу зону» з потрібними даними.
Кожного разу, коли викликається функція, створюється **новий контекст**.

### Види контексту виконання

1. **Глобальний контекст**
  - Створюється при запуску скрипту.
  - Доступний всюди.
  - У браузері пов'язаний з об'єктом `window`, у Node.js - з `global`.
  - Змінні і функції, оголошені поза функціями, потрапляють сюди.

```javascript
  var x = 10;
  function foo() {}
  // Глобальний контекст
  ```
2. **Контекст функції**
  - Створюється при кожному виклику функції.
  - Містить локальні змінні, параметри та значення `this`.

```javascript
  function greet(name) {
    let message = "Hello " + name;
    return message;
  }
  greet("Tim"); // створюється новий контекст для цього виклику
  ```
3. **Контекст eval (рідко використовується)**
  - Створюється при виконанні коду через `eval()`.
  - Ізольований або використовує зовнішній контекст - залежить від виклику.

### Що зберігається в контексті виконання

Кожен контекст складається з трьох головних частин:

1. **Variable Environment (змінні)**
  - Зберігає оголошення `var`, функції та їхні значення.
2. **Lexical Environment (лексичне оточення)**
  - Відображає структуру вкладеності коду (замикання).
  - Використовується для пошуку змінних «вгору по ланцюжку».
3. **This Binding (значення this)**
  - Визначає, на який об'єкт посилається `this` всередині контексту.

### Стек контекстів виконання (Call Stack)

JavaScript - *однопотокова мова*, тому в кожен момент часу активний **лише один контекст**.
Коли викликається нова функція, її контекст додається у **стек викликів**, а після завершення - видаляється.

```javascript
function a() {
  console.log("A");
  b();
}
function b() {
  console.log("B");
}
a();
```

Відбувається:

1. Створюється глобальний контекст → у стек.
2. Виклик `a()` → контекст `a` додається у стек.
3. Виклик `b()` → контекст `b` додається у стек.
4. `b` завершується → видаляється зі стека.
5. `a` завершується → видаляється.
6. Залишається лише глобальний контекст.

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

```javascript
let x = 1;

function outer() {
  let y = 2;

function inner() {
    let z = 3;
    console.log(x, y, z);
  }

inner();
}

outer();
```

**Що відбувається:**

- Створюється **глобальний контекст** → `x`, `outer`.
- Виклик `outer()` → створюється новий контекст `outer`.
- Всередині нього створюється `y`, `inner`.
- Виклик `inner()` → створюється контекст `inner`, у якому:
  - Доступні `x` (з глобального), `y` (з outer) та `z` (локальна).
- Після завершення всі контексти по черзі видаляються зі стека.

### Коротко

| Рівень | Приклад | Що містить |
|---|---|---|
| **Глобальний контекст** | увесь файл | глобальні змінні та функції |
| **Контекст функції** | при виклику функції | локальні змінні, параметри, `this` |
| **Lexical Environment** | вкладені області | ланцюжок для пошуку змінних |
| **Call Stack** | стек | порядок виконання коду |

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

Для рев’юера

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

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