Как JavaScript работает за кулисами?

Давайте прыгнем глубже и разберемся с выполнением JavaScript внутри движка браузера:

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

И с каждым днем ​​он становится все более и более популярным. Целью этой статьи является более глубокое изучение JavaScript и того, как он на самом деле работает.

Обзор

Этот пост в блоге удобен для начинающих, а также полезен для опытных разработчиков JS.
Мы подробно рассмотрим все эти концепции и объясним, как на самом деле работает JavaScript.

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

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

1. JavaScript-движок.
2. Среда выполнения JavaScript.
3. Контекст выполнения.
4. Выполнение стека вызовов и поток стека.
5. Цикл событий.

Как вы уже могли слышать, 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 вместе с некоторыми другими компонентами. как некоторые асинхронные запросы и вызовы.
Компоненты перечислены как:

1. JS-движок
2. Веб-API
3. Очередь обратного вызова или очередь сообщений
4. Цикл событий

При запуске кода 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, которая постоянно проверяет, не пуст ли основной стек. И когда он пуст, он проверяет Очередь обратного вызова. Если в очереди есть коды для выполнения, они по одному передаются в стек вызовов. После выполнения кода он покидает стек, а следующий в очереди появляется до тех пор, пока очередь не опустеет.

Ребята, давайте подведем итоги и поймаем вас в следующих постах……….