Skip to main content

З чого складається контекст виконання?

JavaScriptSenior~1 хв читання
Запропонувати правку

Контекст виконання (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.

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

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

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

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