Механизм работы JavaScript: контекст выполнения и стек вызовов

Что такое контекст выполнения

Контекст выполнения – это виртуальная «коробка», в которой JavaScript хранит всю информацию, необходимую для обработки конкретного куска кода. Каждый раз, когда движок начинает интерпретировать скрипт, он создает такой контейнер, заполняет его переменными, функциями и другими объектами, а затем использует его для последовательного выполнения инструкций. По сути, контекст выполнения гарантирует изоляцию данных между различными частями программы и обеспечивает предсказуемый порядок работы кода.

Фазы контекста выполнения

Контекст проходит две последовательные стадии: фаза создания (или фаза выделения памяти) и фаза исполнения.

Фаза создания (Memory Allocation)

1. Сканирование кода – движок просматривает весь исходный файл, определяя, какие переменные и функции объявлены.
2. Выделение памяти – для каждой переменной и функции резервируется место в памяти.
3. Инициализация var – переменные, объявленные через var, получают значение undefined.
4. Хранение функций – функции сохраняются полностью, их тело становится доступным для последующего вызова.
5. Hoisting let и const – переменные, объявленные через let и const, «поднимаются», но находятся в temporal dead zone (TDZ) до момента их фактического объявления. Обращение к ним до инициализации приводит к ошибке.

На этом этапе никакой пользовательский код не исполняется – происходит только подготовка среды.

Фаза исполнения

1. Построчное выполнение – интерпретатор последовательно обрабатывает каждую инструкцию.
2. Присваивание значений – переменным, объявленным ранее, присваиваются реальные данные.
3. Вызов функций – при встрече вызова функции создаётся новый контекст (см. ниже) и начинается его исполнение.
4. Оценка выражений – вычисляются арифметические, логические и другие операции.

Эта фаза отвечает за реальное выполнение бизнес‑логики приложения.

Типы контекстов выполнения

В JavaScript выделяют два основных типа контекстов:

Глобальный контекст выполнения (Global Execution Context, GEC)

• Создаётся в момент загрузки скрипта.
• Существует единожды за весь жизненный цикл программы.
• Охватывает глобальную область видимости (в браузере – объект window, в Node.js – global).
• Остаётся в стеке вызовов до завершения выполнения программы.

Функциональный контекст выполнения (Function Execution Context, FEC)

• Создаётся каждый раз при вызове функции.
• Имеет собственный набор переменных, параметров и ссылки на внешние контексты (замыкания).
• После завершения функции контекст удаляется из стека вызовов, освобождая память.

Каждый вызов функции порождает отдельный FEC, что позволяет рекурсии и вложенным вызовам работать независимо друг от друга.

Стек вызовов и порядок выполнения

Стек вызовов (Call Stack) – это структура данных LIFO (Last In, First Out), в которой хранятся активные контексты выполнения. При старте программы в стек помещается глобальный контекст. Когда интерпретатор встречает вызов функции, создаётся новый FEC и «набрасывается» поверх стека. После завершения функции её контекст «съедается» со стека, и управление возвращается к предыдущему контексту.

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

function second() {
    console.log('second start');
    third();
    console.log('second end');
}

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

first();

Визуализация стека вызовов:

1. GEC – запущен.
2. first() → создаётся FEC‑first, помещается в стек.
3. Внутри first вызывается second() → создаётся FEC‑second, «надстраивается» над first.
4. second вызывает third() → появляется FEC‑third.
5. third завершает работу, её контекст удаляется, стек возвращается к second.
6. После вывода second end контекст second удаляется, стек обратно к first.
7. Выводятся first end, затем удаляется first, оставшийся только GEC.

Таким образом, стек гарантирует, что каждая функция завершится полностью, прежде чем управление вернётся к её вызывающему коду.

Внутреннее исполнение функций

При вызове функции движок создаёт активный объект (Activation Object), который объединяет:

• Переменные и параметры функции.
• Внутренние ссылки (arguments), позволяющие обращаться к переданным аргументам.
• Ссылку на внешний контекст через [[Scope]], обеспечивая работу замыканий.

После создания активного объекта происходит та же двухфазная обработка: в фазе создания переменным присваивается undefined, а функции – полностью. Затем, в фазе исполнения, значения параметров заменяются реальными аргументами, а тело функции выполняется построчно. По завершении контекст удаляется из стека, а все ссылки, не удерживаемые замыканиями, освобождаются сборщиком мусора.

Эта модель обеспечивает предсказуемое поведение кода, упрощает отладку и позволяет реализовывать такие возможности JavaScript, как асинхронные колбэки, промисы и генераторы, без изменения базовой структуры контекстов и стека вызовов.