Понимание контекста выполнения в JavaScript

В этом руководстве вы узнаете о контексте выполнения JavaScript, чтобы лучше понять, как выполняется код JavaScript.

Начнем со следующего примера:

let x = 10;

function timesTen(a){
    return a * 10;
}

let y = timesTen(x);

console.log(y); // 100

В этом примере:

• Сначала объявите переменную x и инициализируйте ее значение 10.
• Во-вторых, объявите timesTen(), которая принимает аргумент и возвращает значение, являющееся результатом умножения аргумента на 10.
• В-третьих, вызовите timesTen() с аргументом в качестве значения переменной x и сохраните результат в переменной y.
• Наконец, выведите переменную y в консоль.

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

Когда механизм JavaScript выполняет код JavaScript, он создает контексты выполнения.

Каждый из них имеет две фазы: фазу создания и фазу выполнения.

Этап создания

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

• Создание глобального объекта, т. е. window в веб-браузере или global объект в Node.js.
• Создание this объект и привязка его к глобальному объекту.
• Настройка кучи памяти для хранения переменных и ссылок на функции.
• Сохранение объявления функций в куче памяти и переменных в глобальном контексте выполнения с начальными значениями как undefined.

Когда движок JavaScript выполняет приведенный выше пример кода, на этапе создания он делает следующее:

• Во-первых, сохраняет переменные x и y и объявление функции timesTen() в глобальном контексте выполнения.
• Во-вторых, инициализирует переменные x и y значением undefined.

После этапа создания глобальный контекст выполнения переходит к этапу выполнения.

Этап выполнения

На этапе выполнения механизм JavaScript выполняет код построчно, присваивает значения переменным и выполняет вызовы функций.

Для каждого вызова функции движок JavaScript создает новый контекст выполнения функции.

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

В нашем примере контекст выполнения функции создает объект arguments, который ссылается на все параметры, переданные в функцию, устанавливает this значение в глобальный объект и инициализирует параметр a значением undefined.

На этапе выполнения контекста выполнения функции механизм JavaScript присваивает параметру a 10 и возвращает результат( 100 ) в глобальный контекст выполнения:

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