Execution context

JavaScriptSenior~2 хв читання

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

Основна ідея

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

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

Глобальний контекст

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

javascript

var x = 10;
function foo() {}
// Глобальний контекст

Контекст функції

Створюється при кожному виклику функції.
Містить локальні змінні, параметри та значення this.

javascript

function greet(name) {
  let message = "Hello " + name;
  return message;
}
greet("Tim"); // створюється новий контекст для цього виклику

Контекст eval (рідко використовується)

Створюється при виконанні коду через eval().
Ізольований або використовує зовнішній контекст - залежить від виклику.

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

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

Variable Environment (змінні)

Зберігає оголошення var, функції та їхні значення.

Lexical Environment (лексичне оточення)

Відображає структуру вкладеності коду (замикання).
Використовується для пошуку змінних «вгору по ланцюжку».

This Binding (значення this)

Визначає, на який об'єкт посилається this всередині контексту.

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

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

javascript

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

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

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

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

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	стек	порядок виконання коду

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

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

Premium

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

Execution context

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

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

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

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

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

#Коротко

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

Основна ідея

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

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

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

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

Коротко