Wie funktioniert JavaScript hinter den Kulissen?

Lassen Sie uns tiefer springen und die Ausführung von JavaScript innerhalb der Browser-Engine verstehen:

Wie wir alle wissen, ist JavaScript eine prototypbasierte, objektorientierte, interpretierte oder Just-in-Time-kompilierte Single-Thread-Programmiersprache auf hohem Niveau mit erstklassigen Funktionen und einem nicht blockierenden Parallelitätsmodell für Ereignisschleifen.

Und es wird von Tag zu Tag beliebter. Dieser Artikel soll darauf abzielen, tiefer in JavaScript einzutauchen und wie es wirklich funktioniert.

Überblick

Dieser Blogbeitrag ist anfängerfreundlich und auch für erfahrene JS-Entwickler nützlich.
Wir werden all diese Konzepte im Detail durchgehen und erklären, wie JavaScript tatsächlich ausgeführt wird.

In diesem Beitrag werden wir den Ausführungskontext (Speichererstellungsphase und Codeausführungsphase), die CallStack-Ausführung und die JavaScript-Engine und ihre Laufzeitumgebung besprechen. Verstehen Sie auch das Konzept der Ereignisschleife und des Stapelflusses.

Dies ist ein Überblick über alle Kernkomponenten, die an der Ausführung des Skripts beteiligt sind.
Hier werden wir die folgenden Komponenten besprechen:

1. JavaScript-Engine.
2. JavaScript-Laufzeitumgebung.
3. Ausführungskontext.
4. Call-Stack-Ausführung und Stack-Flow.
5. Ereignisschleife.

Wie Sie vielleicht bereits gehört haben, ist JavaScript eine interpretierte Programmiersprache . Das bedeutet, dass der Quellcode vor der Ausführung nicht in Binärcode kompiliert wird.
Dies bedeutet, dass es Zeile für Zeile ausgeführt wird, aber es ist nicht 100% wahr.
JS ist eine just-in-time (JIT) kompilierte Sprache, dieses moderne Verhalten macht es in Webanwendungen schnell, andernfalls verlangsamt es die Anwendung je nach interpretiertem Typ zum Rendern. Daher betrachten wir JS als eine Just-in-Time (JIT)-Kompilierungssprache.

JavaScript-Engine ist einfach ein Computerprogramm, das JavaScript-Code ausführt. JavaScript-Engines sind heute in alle modernen Browser integriert.

Wie: (Nur wenige Engines sind)
# V8 ist die JavaScript-Engine für Chrome.
# Klammeraffe für Mozilla Firefox.
# Chakra für Microsoft Edge.
# JavaScript-Kern für Safari und so weiter.

Wie wir wissen, ist die Chrome-Browser-Engine „V8“ für JavaScript sehr beliebt.
Sie besteht aus zwei Hauptkomponenten:
1: Call Stack ( später im Detail besprechen, sei geduldig.. )
2: Heap : Es ist ein unstrukturierter Speicherplatz, in dem sich alle nützlichen Objekte befinden gelagert.

Die JavaScript-Laufzeitumgebung (JRE) :

Wie wir über die JS-Engine gesprochen haben, läuft die JS-Engine zusammen mit einigen anderen Komponenten in JRE. wie einige asynchrone Anfragen und Aufrufe.
Komponenten sind aufgeführt als:

1. JS-Engine
2. Web-APIs
3. Rückrufwarteschlange oder Nachrichtenwarteschlange
4. Ereignisschleife

Wenn JS-Code ausgeführt wird, wird ein globaler Ausführungskontext (GEC) erstellt.
Diese Ausführung wird in 2 Phasen erstellt:
1: Speichererstellungsphase &
2: Codeausführungsphase.

Nehmen wir ein Beispiel;

Für dieses obige Code-Snippet wird
zuerst GEC erstellt und in der Speicherphase erstellt und allen Variablen ein undefinierter Wert zugewiesen und der gesamte Funktionsblock {} als fnxn-Wert in seinem Speicherplatz abgelegt.

Zweitens beginnt es jetzt in der 2. Phase, dh der Codeausführungsphase, den gesamten Code Zeile für Zeile zu durchlaufen.
Und es hat var a = 3 gefunden, also weist es 3 einer Variablen zu, die undefiniert war , und geht
zur nächsten Zeile und weist 4 der Variablen b zu , die nicht definiert war. Gehen Sie jetzt zur nächsten Zeile für die Funktion add(), es gibt nichts auszuführen, also bleibt es gleich, und gehen Sie zur nächsten Zeile für var c.

In dieser Zeile wird ein neuer Ausführungskontext erstellt, Name als lokaler Ausführungskontext für die Funktion add(3,4), jetzt wieder 2 Phase erstellt,
für die Speichererstellungsphase undefiniert für die Variablen num1, num2 & result zuweisen . Dann beginnt es in der Code-Ausführungsphase Zeile für Zeile im Funktionsblock {} von add().
Es wurde gefunden, 3 für num1 & 4 für num2 zuzuweisen,
und dann für var result = num1 + num2, und 7 wie in der Ergebnisvariablen zuzuweisen.
Danach wird das Ergebnis zurückgegeben, und die Steuerung der Ausführung geht zurück zu Zeile 9 bei
var c = 7.

Wenn das Schlüsselwort return angetroffen wird, gibt es die Steuerung an die aufgerufene Zeile zurück und auch der Kontext der Funktionsausführung wird gelöscht.
Es geht zur nächsten Zeile, Zeile 10: Es tröstet den Wert von c.

So funktioniert der Ausführungskontext wirklich hinter den Kulissen.

Javascript verwaltet das Erstellen und Löschen von Codeausführungskontexten mit Hilfe von Call Stack ( wir werden später auf Call Stack eingehen )

Call-Stack:

Call Stack verwaltet die Ausführungsreihenfolge von Ausführungskontexten . Es ist auch bekannt als Program Stack, Control Stack, Runtime Stack, Machine Stack, Execution Context Stack.
Und wir wissen, dass JS eine Single-Thread-Programmiersprache ist , d.h. einen einzigen Stack hat und jeweils eine Zeile ausführt.

Nehmen Sie einfach die obige Codereferenz und erklären Sie, wie Call Stack für denselben Codeausschnitt funktioniert.

Hier wird GEC erstellt und fällt in den Stack, dann wird der nächste lokale Ausführungskontext in den Stack eingefügt, dann nach der Ausführung wird er herausgesprungen und zurück zu GEC.
Dann wird console.log(c) eingeblendet und nach der Ausführung herausgesprungen, dann zurück zu GEC
gepinnt. Nachdem die Ausführung abgeschlossen ist, wird GEC auch aus dem Stack herausgesprungen und der Stack wird als IDLE-Bedingung leer.

Ereignisschleife:

Die JavaScript-Sprache kann auch auf zwei Arten gesehen werden – synchron und asynchron.

In synchronem JS wird Code Zeile für Zeile ausgeführt, d. h. sequentiell, und
in asynchronem JS ist nichts sequenziell, was bedeutet, dass eine Codezeile ignoriert und später gemäß dem Verhalten ausgeführt wird, das meistens als Web-APIs bekannt ist.

Die Ereignisschleife wird also verwendet, um den asynchronen Teil mit der Rückrufwarteschlange zu behandeln und darauf zu warten, dass der Stapel leer ist, und dann zur Ausführung an den Stapel gesendet wird.

Event Loop ist eine Funktion in JS, die kontinuierlich überprüft, ob der Hauptstapel leer ist. Und wenn es leer ist, überprüft es die Callback-Warteschlange. Wenn in der Warteschlange auszuführende Codes vorhanden sind, werden sie nacheinander an den Aufrufstapel übertragen. Nachdem der Code ausgeführt wurde, verlässt er den Stack und der nächste in der Warteschlange erscheint, bis die Warteschlange leer ist.

Leute, lasst uns die Dinge einpacken und euch in den kommenden Beiträgen erwischen ……….