Контекст виконання в JavaScript

Що таке Контекст Виконання?

Контекст виконання — це середовище, в якому оцінюється та виконується код JavaScript. Він містить всю інформацію, необхідну для виконання коду: змінні, this, ланцюг області видимості та інше.

Типи Контексту Виконання

Тип	Опис
Глобальний Контекст Виконання	Створюється, коли запускається скрипт. Існує лише один. Створює глобальний об'єкт (`window`/`globalThis`) і встановлює `this` на нього.
Контекст Виконання Функції	Створюється щоразу, коли викликається функція. Кожна функція отримує свій власний контекст.
Контекст Виконання Eval	Створюється всередині виклику `eval()` (використовується рідко).

Фази Контексту Виконання

Кожен контекст виконання проходить через дві фази:

1. Фаза Створення

Створює Лексичне Середовище (зберігає let/const, функції)
Створює Змінне Середовище (зберігає декларації var)
Налаштовує прив'язку this
Створює ланцюг області видимості (посилання на зовнішнє середовище)
Змінні, оголошені з var, ініціалізуються значенням undefined (підняття)
Змінні, оголошені з let/const, знаходяться в Тимчасовій Мертвій Зоні
Декларації функцій повністю піднімаються (доступні до їх рядка)

2. Фаза Виконання

Код виконується рядок за рядком
Змінним присвоюються їх значення
Викликаються функції, створюючи нові контексти виконання

Стек Викликів

Стек викликів (стек контексту виконання) — це структура LIFO (Останній Увійшов, Перший Вийшов), яка відстежує поточний контекст виконання:

javascript

function first() {
  console.log("first");
  second();
  console.log("first end");
}

function second() {
  console.log("second");
  third();
}

function third() {
  console.log("third");
}

first();

Прогресія стека викликів:

[Глобальний]
[Глобальний] → [first()]
[Глобальний] → [first()] → [second()]
[Глобальний] → [first()] → [second()] → [third()]
[Глобальний] → [first()] → [second()]  // third() видаляється
[Глобальний] → [first()]               // second() видаляється
[Глобальний]                            // first() видаляється

Що всередині Контексту Виконання

ExecutionContext = {
  LexicalEnvironment: {
    EnvironmentRecord: {
      // let, const, function declarations
    },
    outer: <посилання на батьківське Лексичне Середовище>
  },
  VariableEnvironment: {
    EnvironmentRecord: {
      // var declarations
    },
    outer: <посилання на батьківське>
  },
  ThisBinding: <значення this>
}

Практичний Приклад

javascript

var x = 10;
let y = 20;

function add(a, b) {
  var result = a + b;
  return result;
}

const sum = add(x, y);

Фаза створення (Глобальна):

x = undefined (підняття var)
y = TDZ (let — тимчасова мертва зона)
add = функція (повністю піднята)
sum = TDZ (const)

Фаза виконання (Глобальна):

x = 10
y = 20
add(10, 20) викликається → новий Контекст Виконання Функції

Фаза створення (add):

a = 10, b = 20 (параметри)
result = undefined (підняття var)

Фаза виконання (add):

result = 30
Повертає 30

Розуміння контексту виконання пояснює підняття, область видимості, замикання та прив'язку this. Кожен виклик функції створює новий контекст у стеці викликів. Двигун використовує фази створення та виконання для налаштування змінних перед виконанням коду.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань