Как JavaScript работает за кулисами?
Давайте прыгнем глубже и разберемся с выполнением JavaScript внутри движка браузера:
Как мы все знаем, JavaScript — это высокоуровневый, основанный на прототипах, объектно-ориентированный, интерпретируемый или компилируемый точно в срок, однопоточный язык программирования с первоклассными функциями и неблокирующей моделью параллелизма цикла событий.
И с каждым днем он становится все более и более популярным. Целью этой статьи является более глубокое изучение JavaScript и того, как он на самом деле работает.
Обзор
Этот пост в блоге удобен для начинающих, а также полезен для опытных разработчиков JS.
Мы подробно рассмотрим все эти концепции и объясним, как на самом деле работает JavaScript.
В этом посте мы обсудим контекст выполнения (этап создания памяти и этап выполнения кода), выполнение стека вызовов и механизм JavaScript, а также его среду выполнения. Кроме того, разберитесь с концепцией цикла событий и потока стека.
Это будет обзорный обзор всех основных компонентов, участвующих в выполнении скрипта.
Здесь мы обсудим следующие компоненты:
- JavaScript-движок.
- Среда выполнения JavaScript.
- Контекст выполнения.
- Выполнение стека вызовов и поток стека.
- Цикл событий.
Как вы уже могли слышать, JavaScript — это интерпретируемый язык программирования . Это означает, что исходный код не компилируется в двоичный код перед выполнением.
Это означает, что он выполняется построчно, но это не на 100% верно.
JS — это скомпилированный язык точно в срок (JIT), это современное поведение делает его быстрым в веб-приложениях, в противном случае, в соответствии с интерпретируемым типом, он замедляет рендеринг приложения. Поэтому мы считаем , что JS — это язык компиляции Just-in-time (JIT).

Движок JavaScript — это просто компьютерная программа, которая выполняет код JavaScript. Механизмы JavaScript сегодня встроены во все современные браузеры.
Например: (несколько движков)
# V8 — это движок JavaScript для Chrome.
# Обезьяна-паук для Mozilla Firefox.
# Чакра для Microsoft Edge.
# Ядро JavaScript для Safari и так далее.
Как мы знаем, движок браузера Chrome «V8» очень популярен для JavaScript
. Он состоит из двух основных компонентов:
1: Стек вызовов ( подробно обсудим позже, будьте внимательны.. )
2: Куча : это неструктурированное пространство памяти, где находятся все полезные объекты. хранится.

Среда выполнения JavaScript (JRE):
Как мы уже говорили о движке JS, но движок JS работает внутри JRE вместе с некоторыми другими компонентами. как некоторые асинхронные запросы и вызовы.
Компоненты перечислены как:
- JS-движок
- Веб-API
- Очередь обратного вызова или очередь сообщений
- Цикл событий

При запуске кода JS создается глобальный контекст выполнения (GEC) .
Это выполнение создается в 2 этапа:
1: этап создания памяти и
2: этап выполнения кода.
Возьмем пример;

Для приведенного выше фрагмента кода
сначала создается GEC, в котором создается фаза памяти , присваивается значение undefined для всех переменных и помещается весь функциональный блок {} в качестве значения fnxn в его пространство памяти.
Во- вторых, теперь на второй фазе, то есть на фазе выполнения кода, он начинает выполнять весь код построчно.
И он обнаружил, что var a = 3, поэтому он присваивает 3 переменной, которая была неопределенной , и
переходит к следующей строке, и присваивает 4 переменной b , которая не была определена. Теперь перейдите к следующей строке для функции add(), выполнять нечего, поэтому она остается прежней, и перейдите к следующей строке для var c.

В этой строке создается новый контекст выполнения, имя которого является локальным контекстом выполнения для функции add(3,4), теперь снова создается 2 этапа .
Для этапа создания памяти он назначает значение undefined для переменных num1, num2 и результата. Затем, на этапе выполнения кода , он запускается построчно в функциональном блоке {} функции add().
Было найдено назначение 3 для num1 и 4 для num2,
а затем для var result = num1+num2 и назначение 7 как в переменной результата.
После этого возвращаем результат, а управление выполнением возвращается к строке 9 по адресу
var c = 7.
Когда встречается ключевое слово return , оно возвращает управление в вызываемую строку, а также удаляется контекст выполнения функции.
Он переходит к следующей строке, строке 10: это консольное значение c.
Вот как контекст выполнения действительно работает за кулисами.
Javascript управляет созданием и удалением контекста выполнения кода с помощью стека вызовов ( позже мы обсудим стек вызовов )
Стек вызовов :
Стек вызовов поддерживает порядок выполнения контекстов выполнения . Он также известен как программный стек, стек управления, стек времени выполнения, стек машины, стек контекста выполнения.
И мы знаем, что JS — это однопоточный язык программирования , то есть имеет один стек и выполняет по одной строке за раз.
Просто взяв приведенную выше ссылку на код и объяснив, как работает стек вызовов для того же фрагмента кода.

Здесь GEC создается и попадает в стек, затем следующий локальный контекст выполнения появляется в стеке, затем после выполнения он выскакивает и возвращается в GEC.
Затем появляется console.log(c), и после выполнения он выскакивает, затем возвращается обратно в GEC.
После завершения выполнения GEC также выскакивает из стека, и стек становится пустым как условие IDLE.
Цикл событий:
Язык JavaScript также можно рассматривать двояко — синхронно и асинхронно.
В синхронном JS код выполняется построчно, что означает последовательно, а
в асинхронном JS ничто не является последовательным, что означает, что строка кода будет игнорироваться и выполняться позже в соответствии с поведением, в основном известным как веб-API.
Таким образом, цикл обработки событий используется для обработки асинхронной части с очередью обратного вызова и ждет, пока стек опустеет, а затем отправляется в стек для выполнения.

Event Loop — это функция JS, которая постоянно проверяет, не пуст ли основной стек. И когда он пуст, он проверяет Очередь обратного вызова. Если в очереди есть коды для выполнения, они по одному передаются в стек вызовов. После выполнения кода он покидает стек, а следующий в очереди появляется до тех пор, пока очередь не опустеет.
Ребята, давайте подведем итоги и поймаем вас в следующих постах……….