Содержание
Введение
При написании кода на JavaScript это больше, чем просто набор инструкций. Код создает последовательность событий и выполняет их в определенном порядке.
Но как JavaScript решает, в каком порядке выполнять эти события?
Ответ прост: с помощью контекста выполнения JavaScript.
В этой статье мы рассмотрим, что это такое, как оно работает, лексические контексты и множество других концепций! Так что, без лишних слов, давайте начнем!
Что такое контекст выполнения?
Давайте попробуем понять это по частям слова!
Выполнение = выполнение кода,
Контекст = окружение.
Итак, контекст выполнения - это окружение, в котором хранится и выполняется наш конкретный код.
Не поняли? Не беспокойтесь!
Теперь давайте понять, как выполняется код JavaScript. Тогда концепция станет ясной для вас.
Как выполняется код JavaScript?
Браузер не может нативно понимать код JavaScript, который мы пишем в нашем приложении. Для того чтобы сделать его понятным, браузер преобразует код JavaScript в машинный код.
Звучит интересно, верно?
Давайте погрузимся в это глубже!
Когда мы открываем веб-страницу, браузер запрашивает необходимые файлы (в основном файлы HTML, CSS и JavaScript) с веб-сервера.
При чтении HTML, если браузер находит код JavaScript, который нужно выполнить через тег <script> или атрибут, содержащий код JavaScript, например, onClick, он отправляет его в свой движок JavaScript.
Затем движок JavaScript браузера создает специальное окружение для преобразования кода JavaScript в машинный код. Это окружение называется “контекстом выполнения JavaScript”.
💡 У каждого браузера есть своя собственная версия движка JavaScript. Chrome использует движок V8, Firefox использует SpiderMonkey, а Safari использует JavaScriptCore.
Затем движок JavaScript читает код посимвольно, формирует абстрактное синтаксическое дерево (AST), сохраняет переменные и функции в памяти и выполняет код.
Лексический контекст:
Прежде чем понимать разные типы контекстов выполнения, давайте разберемся с лексическим контекстом.
Слово “лексический” означает связанный с чем-то. Лексическая среда означает то, как и где ваш код физически находится.
function outer() {
const x = 10;
function inner() {
console.log(x); // 'x' is accessible here because of lexical context.
}
inner();
}
В этом фрагменте кода лексический контекст позволяет внутренней функции обращаться к переменной x, объявленной в ее родительской области видимости, outer.
Лексический контекст помогает создать абстрактное синтаксическое дерево (AST) и позволяет вложенным функциям правильно работать внутри своих родительских областей видимости.
Как создаются контексты выполнения?
Контексты выполнения создаются в две фазы.
- Фаза создания
- Фаза выполнения
Типы контекста выполнения:
- Существует два вида контекста выполнения в JavaScript:
- Глобальный контекст выполнения:
Когда мы выполняем код JavaScript, создается глобальный контекст выполнения (также известный как базовый контекст выполнения). Вы можете представлять его себе как контейнер, который содержит другие контексты выполнения.
Создается глобальный объект (объект window в случае браузера) и глобальная переменная с именем this.
💡 Примечание: для каждого файла JavaScript может существовать только один GEC.
Давайте разберем это на примерах,
Первый пример:
Сначала создайте файл HTML Demo,
<html>
<head>
<script src="index.js" />
</head>
<body>
Hello! I'm Arindam
</body>
</html>
Теперь запустите этот простой код и откройте консоль браузера. Затем введите это и посмотрите, что произойдет.
Мы получили объект окна. Теперь введите window и посмотрите, что произойдет.
Догадайтесь, что? Мы снова получили объект окна!
Таким образом, из этого примера мы понимаем, что в глобальном контексте выполнения this и объект window идентичны.
Давайте разберемся на примере:
Второй пример:
var name = 'Ronaldo';
function sayName() {
console.log(this.name); // Ronaldo
}
В этом примере код выполняется в две фазы.
В фазе создания переменные и функции объявляются и инициализируются (выделяется память для соответствующих переменных и функций). Они поднимаются вверх своих областей видимости и создают глобальный объект this (в случае браузера - объект window).
В фазе выполнения код выполняется последовательно. Сначала переменной name присваивается значение Ronaldo. Затем выполняется функция sayName() и выводится результат (в данном случае это Ronaldo).
Контекст выполнения функции:
Контекст выполнения функции создается при вызове функции. Он создается в рамках контекста выполнения глобального объекта. Внутри локального контекста выполнения движок JavaScript создает объект arguments и объект this по умолчанию.
💡 Примечание: для каждого вызова функции будет создан контекст выполнения функции.
Давайте разберем это на примере.
function greet(name) {
var message = 'Hello, ' + name;
console.log(message);
}
greet('Aritree'); // Output: "Hello, Aritree"
В этом коде, когда вызывается функция greet(), она создает свой контекст выполнения функции (FEC). Внутри области видимости функции происходит то же самое, что и в контексте выполнения глобального объекта (GEC).
На этапе создания FEC объявляются и инициализируются переменные и вложенные функции (если они есть).
На этапе выполнения переменной name присваивается значение, переданное через аргумент функции (в данном случае - Aritree). Затем объявляется и инициализируется переменная message строкой “Hello, Aritree”. Затем она выводит значение переменной message.
В заключение:
Если вы нашли этот блог полезным, пожалуйста, подумайте о том, чтобы поделиться им с другими, кому это может пригодиться. Вы также можете следить за мной, чтобы получать больше контента о JavaScript и других темах веб-разработки.
Спасибо за чтение :)
