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

Хост, на котором размещен javascript, имеет своего рода движок javascript, который берет наш код и выполняет его.
Таким образом, движок JavaScript — это, как правило, программа, которая выполняет код JavaScript.
Существует множество движков сравнения, таких как движок Google V8, используемый в Google Chrome, SpiderMonkey, ядре JavaScript и многом другом!

ОСНОВНАЯ МЫСЛЬ

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

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

НАСТОЯЩАЯ ВНУТРЕННЯЯ РАБОТА

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

Весь код JS должен выполняться в среде, называемой контекстом выполнения. Итак, представьте себе это как контейнер, в котором хранятся переменные, в которых оценивается и выполняется часть нашего кода.

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

Каждая новая функция получает свой новый контекст выполнения и помещается в текущий контекст, формируя стек выполнения. И до тех пор, пока вызов функции не будет завершен, связанный контекст является активным контекстом.

Создание контекста выполнения, этапы выполнения и подъем:

Представление контекста выполнения будет следующим:

Его можно рассматривать как объект, обладающий тремя свойствами:

1. Объект-переменная (VO), в котором будут аргументы функций, объявления внутренних переменных и объявления функций.
2. Цепочка области действия, которая также содержит текущий VO. как ВО всех своих родителей.
3. Переменная "This".

Переменный объект

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

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

Код сканируется на наличие объявлений переменных: для каждой переменной в объекте переменной создается свойство, которому присваивается значение undefined.

Так что, даже если вы объявите функцию до или после вызова функции, не имеет значения, все равно она работает!

Область охвата и цепочка охвата

Область видимости отвечает на вопрос «где мы можем получить доступ к определенной переменной?»

Каждая новая функция создает область: пространство/среду, в которой доступна определяемая ею переменная.

Лексическая область действия: функция, которая лексически находится внутри другой функции, получает доступ к области видимости внешней функции.

Теперь последний шаг, ключевое слово «Это»

Куда указывает ключевое слово This?

Обычный вызов функции: ключевое слово this указывает на глобальный объект (объект окна в браузере).

Вызов метода: переменная this указывает на объект, вызывающий метод.

Ключевому слову this не присваивается значение до тех пор, пока не будет фактически вызвана функция, в которой оно определено.

Итак, теперь контекст выполнения завершил процесс выполнения, и те же шаги выполняются для следующего.

В следующий раз, когда вы будете запускать файл js, знайте, что он должен пройти все эти шаги, чтобы выполнить вашу задачу :)