Контекст выполнения JavaScript и Heating объясняется примерами кода

Автор оригинала: FreeCodeCamp Community Member.

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

В этой статье мы узнаем около двух таких концепций,

• Контекст выполнения
• Подъемник

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

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

А Лексическая среда Определяет, как и где мы пишем наш код физически. Посмотрите на код ниже:

function doSomething() {
  var age= 7;
  // Some more code
 }

В приведенном выше коде переменная возраст лексически внутри функции Досметочное Отказ

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

Обычно будет больше одного Лексическая среда в вашем коде. Однако не все среды выполняются одновременно.

Окружающая среда, которая помогает выполнить код, называется Контекст исполнения Отказ Это код, который в данный момент работает, и все окружающее, которое помогает запустить его.

Там могут быть много Лексическая среда S доступен, но тот, который в данный момент работает код, управляемый Контекст исполнения Отказ

Проверьте изображение ниже, чтобы понять разницу между лексической средой и контекстом выполнения:

Так что же происходит в контексте исполнения? Код получает анализируемую строку, генерирует исполняемый байт-код, выделяет память и выполняет.

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

var age = 7;

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

• Токенизация: На этом этапе строки исходного кода разрывается на несколько осмысленных кусочков, называемых Токены Отказ Например, код var; токены в var , возраст , = , 7 и, ; Отказ
• Разбор: Следующий этап анализирует, где массив токенов превращается в дерево вложенных элементов, понятых на грамматике языка. Это дерево называется AST (Абстрактное синтаксическое дерево).
• Генерация кода: На этом этапе AST, созданный в фазе анализа, превращается в исполняемый байт-код. Этот исполняемый байт-код затем оптимизирован в дальнейшем компилятором JIT (Rest-Time).

Анимированная картинка ниже показывает переход исходного кода к исполняемому байту.

Все эти вещи случаются в Контекст исполнения Отказ Таким образом, контекст выполнения – это среда, в которой определенная часть кода выполняется.

Есть два типа контекстов выполнения:

• Глобальный контекст исполнения (GEC)
• Контекст выполнения функций (FEC)

И каждое из контекстов выполнения имеет две фазы:

• Этап создания
• Фаза выполнения

Давайте сделаем подробный взгляд на каждого из них и понять их немного лучше.

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

Всякий раз, когда мы выполняем код JavaScript, он создает глобальный контекст выполнения (также знает как контекст базового выполнения). Глобальный контекст выполнения имеет две фазы.

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

На этапе создания две уникальные вещи создаются:

• Глобальный объект под названием окно (Для JavaScript на стороне клиента).
• Глобальная переменная под названием это Отказ

Если в коде представлены какие-либо переменные, память выделяется для переменной. Переменная получает инициализированную с помощью уникального значения, называемого undefined Отказ Если есть Функция В коде он размещен непосредственно в память. Мы узнаем больше об этой части в Подъем раздел позже.

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

Выполнение кода начинается на этом этапе. Здесь назначение стоимости глобальных переменных происходит. Обратите внимание, что здесь не вызывается функция, так как это происходит в контексте выполнения функций. Мы увидим это через некоторое время.

Давайте понять обе фазы с парой примеров.

Пример 1: загрузить пустой скрипт

Создайте пустой файл JavaScript с именем index.js Отказ Теперь создайте HTML-файл со следующим содержимым:

    
    
    
    
    


    I'm loading an empty script

Обратите внимание, что мы импортируем пустой файл сценария в файл HTML, используя