Jak JavaScript działa za kulisami?

Przejdźmy głębiej i zrozummy, jak działa JavaScript w silniku przeglądarki:

Jak wszyscy wiemy, JavaScript jest wysokopoziomowym, opartym na prototypach, zorientowanym obiektowo, interpretowanym lub kompilowanym na czas, jednowątkowym językiem programowania, z pierwszorzędnymi funkcjami i nieblokującym się modelem współbieżności pętli zdarzeń.

I staje się coraz bardziej popularny z dnia na dzień. Ten artykuł ma na celu głębsze zagłębienie się w JavaScript i to, jak naprawdę działa.

Przegląd

Ten post na blogu jest przyjazny dla początkujących, a także przydatny dla doświadczonych programistów JS.
Omówimy szczegółowo wszystkie te koncepcje i wyjaśnimy, jak właściwie działa JavaScript.

W tym poście omówimy kontekst wykonywania (faza tworzenia pamięci i faza wykonywania kodu), wykonywanie CallStack i silnik JavaScript oraz jego środowisko wykonawcze. Zapoznaj się także z koncepcją pętli zdarzeń i przepływu stosu.

Będzie to przegląd wszystkich podstawowych komponentów, które są zaangażowane w wykonanie skryptu.
Tutaj omówimy następujące komponenty:

1. Silnik JavaScript.
2. Środowisko wykonawcze JavaScript.
3. Kontekst wykonania.
4. Wykonywanie stosu wywołań i przepływ stosu.
5. Pętla zdarzeń.

Jak być może słyszałeś wcześniej, JavaScript jest interpretowanym językiem programowania . Oznacza to, że kod źródłowy nie jest kompilowany do kodu binarnego przed wykonaniem.
Oznacza to, że wykonuje wiersz po wierszu, ale nie jest to w 100% prawdziwe.
JS jest językiem kompilowanym just in time (JIT), to nowoczesne zachowanie sprawia, że ​​jest szybki w aplikacjach internetowych, w przeciwnym razie, zgodnie z interpretowanym typem, spowalnia renderowanie aplikacji. Dlatego uważamy, że JS jest językiem kompilacji Just-in-time (JIT).

Silnik JavaScript to po prostu program komputerowy, który wykonuje kod JavaScript. Silniki JavaScript są obecnie wbudowane we wszystkie nowoczesne przeglądarki.

Na przykład: (niewiele silników jest)
# V8 to silnik JavaScript dla Chrome.
# Pajęcza małpa dla przeglądarki Mozilla Firefox.
# Czakra dla Microsoft Edge.
# JavaScript rdzeń dla Safari i tak dalej.

Jak wiemy, silnik przeglądarki Chrome „V8” jest bardzo popularny w JavaScript.
Składa się on z dwóch głównych elementów:
1: Stos wywołań ( szczegóły omówimy później, bądź cierpliwy. )
2: Sterta : Jest to nieustrukturyzowana przestrzeń pamięci, w której znajdują się wszystkie przydatne obiekty przechowywane.

Środowisko wykonawcze JavaScript (JRE):

Jak rozmawialiśmy o silniku JS, ale silnik JS- działa wewnątrz JRE wraz z kilkoma innymi komponentami. jak niektóre żądania i wywołania asynchroniczne.
Komponenty są wymienione jako:

1. Silnik JS
2. Interfejsy API sieci Web
3. Kolejka wywołań zwrotnych lub kolejka komunikatów
4. Pętla zdarzeń

Po uruchomieniu kodu JS tworzony jest globalny kontekst wykonania (GEC) .
To wykonanie jest tworzone w 2 fazach:
1: Faza tworzenia pamięci i
2: Faza wykonywania kodu.

Weźmy przykład;

W przypadku powyższego fragmentu kodu
najpierw tworzony jest GEC , w którym tworzona jest faza pamięci, przypisuje się wartość niezdefiniowaną wszystkim zmiennym i umieszcza cały blok funkcyjny {} jako wartość fnxn w jego przestrzeni pamięci.

Po drugie, teraz w drugiej fazie, czyli fazie wykonania kodu, zaczyna przechodzić przez cały kod linia po linii.
I znalazł var a = 3, więc przypisuje 3 do zmiennej, która była niezdefiniowana , i
przechodzi do następnej linii i przypisuje 4 do zmiennej b, która była niezdefiniowana. Teraz przejdź do następnej linii dla funkcji add(), nie ma nic do wykonania, więc pozostaje taka sama i przejdź do następnej linii dla var c.

W tej linii tworzony jest nowy kontekst wykonania, name jako lokalny kontekst wykonania dla funkcji add(3,4), teraz ponownie utworzona faza 2.
Dla fazy tworzenia pamięci przypisuje undefined dla zmiennych num1, num2 i result. Następnie w fazie wykonywania kodu zaczyna wiersz po wierszu w bloku funkcyjnym {} funkcji add().
Znaleziono przypisanie 3 dla num1 i 4 dla num2,
a następnie dla var wynik = num1 + num2 i przypisanie 7 jak w zmiennej wynikowej.
Po tym zwrocie wyniku i kontroli wykonania wraca do linii 9 przy
var c = 7.

W przypadku napotkania słowa kluczowego return zwraca sterowanie do wywoływanej linii, a także usuwany jest kontekst wykonania funkcji.
Przechodzi do następnej linii, linii 10: konsoliduje wartość c.

W ten sposób kontekst wykonania naprawdę działa za sceną.

Javascript zarządza tworzeniem i usuwaniem kontekstu wykonywania kodu za pomocą stosu wywołań ( później omówimy stos wywołań )

Stos wywołań:

Stos wywołań utrzymuje kolejność wykonywania kontekstów wykonania . Jest również znany jako stos programów, stos kontroli, stos czasu wykonywania, stos maszyn, stos kontekstu wykonania.
I wiemy, że JS jest jednowątkowym językiem programowania , co oznacza, że ​​ma jeden stos i wykonuje jedną linię na raz.

Wystarczy wziąć powyższe odwołanie do kodu i wyjaśnić, jak działa stos wywołań dla tego samego fragmentu kodu.

Tutaj GEC utworzył się i spadł na stos, następnie następny lokalny kontekst wykonania jest umieszczany na stosie, a po wykonaniu wyskakuje i wraca do GEC.
Następnie wyskakuje console.log(c) i po wykonaniu wyskakuje, a następnie pinter wraca do GEC.
Po zakończeniu tego wykonania GEC również wyskakuje ze stosu, a stos staje się pusty jako warunek IDLE.

Pętla zdarzeń:

Język JavaScript można również postrzegać na dwa sposoby — synchroniczny i asynchroniczny.

W synchronicznym JS kod jest wykonywany linia po linii, co oznacza sekwencyjność, a
w asynchronicznym JS nic nie jest sekwencyjne, co oznacza, że ​​linia kodu zostanie zignorowana i wykonana później, zgodnie z zachowaniem znanym głównie jako web API.

Tak więc pętla zdarzeń służy do obsługi części asynchronicznej z kolejką wywołania zwrotnego i czekania, aż stos się opróżni, a następnie wysyła do stosu w celu wykonania.

Event Loop to funkcja w JS, która stale sprawdza, czy główny stos jest pusty. A kiedy jest pusta, sprawdza kolejkę wywołań zwrotnych. Jeśli w kolejce znajdują się kody do wykonania, są one przesyłane jeden po drugim do stosu wywołań. Po wykonaniu kodu opuszcza on stos i pojawia się następny w kolejce, dopóki kolejka nie będzie pusta.

Chłopaki, podsumujmy sprawy i złapmy was w nadchodzących postach……….