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

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

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

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

Контент

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

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

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

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

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

**Контекст виконання (Execution Context)** у JavaScript складається з **трьох основних компонентів** - це внутрішні структури, які рушій створює для роботи твого коду.

## Структура контексту виконання

Кожен контекст (глобальний або функції) включає:

1. **Variable Environment (VE)**
2. **Lexical Environment (LE)**
3. **This Binding (зв'язка this)**

### 1. Variable Environment

Зберігає **змінні та функції**, оголошені за допомогою `var`, `function` (не `let`/`const`!).

- Визначається при створенні контексту.
- Використовується для **ініціалізації** змінних і функцій.
- Доступний лише всередині поточного контексту.

Приклад:

```javascript
function test() {
  var a = 10;
  function inner() {}
}
```

Тут `a` і `inner` - частина **Variable Environment** функції `test`.

### 2. Lexical Environment

Відповідає за **пошук змінних** і замикання.
Зберігає:

- змінні, оголошені через `let` і `const`;
- посилання на зовнішні оточення (outer lexical environment reference);
- функцію як "лексичне оточення".

Можна уявити як "ланцюжок областей видимості" (scope chain).

Приклад:

```javascript
let x = 10;

function outer() {
  let y = 20;

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

inner();
}
outer();
```

Lexical Environment функції `inner()` містить:

- свою змінну `z`
- посилання на оточення `outer()` (де `y`)
- і посилання на глобальне оточення (де `x`)

Саме **Lexical Environment** робить можливими **замикання (closures)**.

### 3. This Binding

Визначає, **на який об'єкт посилається** `this` у цьому контексті.

Залежить від того, **як викликана функція**:

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

Приклад:

```javascript
const obj = {
  name: "Tim",
  show() {
    console.log(this.name);
  }
};

obj.show(); // this = obj -> "Tim"
```

## Зведена структура

Кожен контекст виконання виглядає приблизно так:

```javascript
Execution Context {
  LexicalEnvironment: {
    EnvironmentRecord: { let, const },
    OuterEnvironmentReference: <посилання на зовнішній LE>
  },
  VariableEnvironment: {
    EnvironmentRecord: { var, function },
    OuterEnvironmentReference: <посилання на зовнішній LE>
  },
  ThisBinding: <значення this>
}
```

## Приклад візуально

```javascript
let a = 1;

function outer() {
  var b = 2;

function inner() {
    let c = 3;
    console.log(a, b, c);
  }

inner();
}

outer();
```

Коли викликається `inner()`:

- Створюється **новий Execution Context**, який містить:
  - **Variable Environment:** `[]`
  - **Lexical Environment:** `{ c: 3 }`
  - **This Binding:** `undefined` (строгий режим)
- Має **Outer Environment Reference -> outer -> global**,
що дозволяє знаходити `b` і `a`.

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

Для рев’юера

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

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