JavaScript-Ausführungskontext – Wie JS-Code hinter den Kulissen ausgeführt wird

Bevor wir verstehen, was der JavaScript-Ausführungskontext ist, müssen wir wissen, wie und in welchen Umgebungen wir JavaScript-Code ausführen können.

Zuallererst können wir JavaScript in zwei Umgebungen ausführen:

1. Über den Browser
2. Über Node.js

Wie läuft JavaScript-Code auf unserem Computer?

Wenn wir JavaScript-Code auf unserem Computer schreiben und dann versuchen, ihn auszuführen, geht der Code zuerst entweder an den Browser oder an Node.js.

Der von uns geschriebene JavaScript-Code wird jedoch vom Browser oder Node.js nicht direkt verstanden. Zu diesem Zeitpunkt senden beide den Code an die in ihnen integrierte JavaScript-Engine. Es gibt verschiedene Arten von Motoren, zum Beispiel:

1. V8-Engine in Google Chrome,
2. SpiderMonkey in Mozilla Firefox,
3. V8-Engine in Node.js usw.

Als nächstes kompiliert die JavaScript-Engine den JavaScript-Code in Maschinencode. Dieser Maschinencode wird dann an den Computer gesendet, der ihn ausführt, und wir sehen die Ausgabe angezeigt.

Als Programmierer müssen wir diesen Zwischenschritt gut verstehen, d. h. wie die JavaScript-Engine JavaScript-Code in Maschinencode kompiliert.

Jetzt müssen wir also verstehen, wie die JavaScript-Engine funktioniert. Die JavaScript-Engine funktioniert auf zwei Arten, um Code in Maschinencode umzuwandeln. Die erste ist Interpretation und die zweite ist Zusammenstellung. Was sind also Interpretation und Zusammenstellung?

Was ist Interpretation und wie funktioniert sie?

Interpretation ist der Prozess, bei dem der gesamte in einer Hochsprache geschriebene Quellcode Zeile für Zeile gelesen und jede Zeile unmittelbar nach dem Lesen in Maschinencode umgewandelt wird. Wenn beim Lesen einer Codezeile ein Fehler auftritt, stoppt der Vorgang genau dort, sodass der Programmierer den Fehler leicht identifizieren kann. Dies macht das Debuggen unkompliziert. Da dieser Prozess den Code jedoch Zeile für Zeile liest, ist er vergleichsweise langsamer.

Was ist Kompilierung und wie funktioniert sie?

Bei der Kompilierung wird der gesamte in einer Hochsprache geschriebene Quellcode auf einmal in Maschinencode umgewandelt. In diesem Fall wird der Code auch dann kompiliert, wenn Fehler im Code vorhanden sind, und Fehler werden erst zur Laufzeit angezeigt. Dadurch wird es für den Programmierer schwieriger, die Fehler zu identifizieren, was das Debuggen schwieriger macht. Da jedoch der gesamte Quellcode auf einmal in Maschinencode umgewandelt wird, ist dieser Vorgang vergleichsweise schneller. Nun stellt sich die Frage: Ist JavaScript eine kompilierte oder eine interpretierte Sprache?

Ist JavaScript eine kompilierte oder interpretierte Sprache?

Anfangs galt JavaScript in erster Linie als interpretierte Sprache. Da dieser Prozess jedoch recht langsam war, begannen moderne JavaScript-Engines, eine neue Technik zu verwenden, die sowohl Interpretation als auch Kompilierung kombiniert, die sogenannte Just-In-Time-Kompilierung (JIT). Dieser Prozess kombiniert Interpretation und Kompilierung, um Code in Maschinencode umzuwandeln. Dadurch ist das Debuggen im Vergleich zu älteren Methoden viel schneller und einfacher.

Um zu verstehen, wie die Just-In-Time-Kompilierung (JIT) von JavaScript funktioniert, müssen wir den Ausführungskontext von JavaScript verstehen. Versuchen wir nun, den Ausführungskontext von JavaScript zu verstehen.

JavaScript-Ausführungskontext

Schauen Sie sich zunächst das folgende Codebeispiel an.

Codebeispiel

var a = 1;

function one() {
  console.log(a);

  function two() {
    console.log(b);

    var b = 2;

    function three(c) {
      console.log(a + b + c);
    }

    three(4);
  }

  two();
}

one();

Ausgabe

1
undefined
7

Als wir den Code ausgeführt haben, haben wir versucht, die Variable b zu drucken, bevor sie in der Funktion two() deklariert wurde, und die Ausgabe war undefiniert. Es ist jedoch kein Fehler aufgetreten. Es stellt sich die Frage: Wie kam es, dass die b-Variable den Wert undefiniert hatte? Die Antwort liegt im JavaScript-Ausführungskontext. Jetzt werden wir den JavaScript-Ausführungskontext genauer untersuchen.

Es gibt zwei Arten von Ausführungskontexten in JavaScript:

1. Globaler Ausführungskontext
2. Funktionsausführungskontext

Jeder Ausführungskontext durchläuft zwei Phasen: Erstellungsphase und Ausführungsphase.

Globaler Ausführungskontext

Wenn wir JavaScript-Code ausführen, passiert als Erstes der globale Ausführungskontext. Dieser Kontext durchläuft zunächst seine Schöpfungsphase, in der mehrere Dinge passieren:

Schöpfungsphase

1. Ein globales Objekt wird erstellt.
2. Dieses Objekt wird erstellt und ihm wird der Wert des globalen Objekts zugewiesen.
3. Ein Variablenobjekt wird erstellt, in dem alle Funktionen und Variablen deklariert werden. Den Variablen wird als Wert undefiniert zugewiesen und den Funktionen werden Referenzen auf ihre jeweiligen Funktionen zugewiesen.

Sobald die Erstellungsphase abgeschlossen ist, geht der globale Ausführungskontext zur nächsten Phase über: der Ausführungsphase, in der weitere Schritte stattfinden.

Ausführungsphase

1. Den Variablen, die in der Erstellungsphase deklariert und mit undefiniert initialisiert wurden, werden nun ihre jeweiligen Werte zugewiesen.
2. Die in der Erstellungsphase deklarierten Funktionen, die als Referenzen gespeichert wurden, werden nun aufgerufen und ausgeführt.

Funktionsausführungskontext

Wenn die Funktionen aufgerufen werden, auf die während der Ausführungsphase des globalen Ausführungskontexts verwiesen wird, erstellt jede Funktion ihren eigenen Funktionsausführungskontext. Genau wie der globale Ausführungskontext durchläuft auch der Funktionsausführungskontext eine Erstellungsphase, in der mehrere Schritte stattfinden:

Schöpfungsphase

1. Für die Funktion wird ein Parameterobjekt erstellt.
2. Dieses Objekt wird erstellt und ihm wird der Wert des globalen Objekts zugewiesen.
3. Ein Variablenobjekt wird erstellt, in dem alle Funktionen und Variablen deklariert werden. Den Variablen wird als Wert undefiniert zugewiesen und den Funktionen werden Referenzen auf ihre jeweiligen Funktionen zugewiesen.

Sobald die Erstellungsphase abgeschlossen ist, geht der Funktionsausführungskontext in die Ausführungsphase über, in der weitere Schritte stattfinden.

Ausführungsphase

1. Den in der Erstellungsphase deklarierten Variablen, die mit undefiniert initialisiert wurden, werden nun ihre jeweiligen Werte zugewiesen.
2. Die in der Erstellungsphase deklarierten Funktionen werden nun aufgerufen und ausgeführt.

Funktionsausführungskontext in verschachtelten Funktionen

Wenn Funktionen innerhalb anderer Funktionen aufgerufen werden, wird für jede dieser Funktionen ein neuer Funktionsausführungskontext erstellt. Jeder Funktionsausführungskontext durchläuft dann sowohl die Erstellungsphase als auch die Ausführungsphase. Dieser Vorgang wird für jede Funktion fortgesetzt, die innerhalb einer anderen Funktion aufgerufen wird, und jede Funktion durchläuft diese Phasen separat.

Sehen wir uns das Diagramm unten an.

Wir haben gesehen, dass sowohl der globale Ausführungskontext als auch der Funktionsausführungskontext bestimmte Schritte durchlaufen. Der einzige Unterschied besteht darin, dass im globalen Ausführungskontext der erste Schritt darin besteht, das globale Objekt zu erstellen, während im Funktionsausführungskontext der erste Schritt darin besteht, ein Parameterobjekt für die Funktion zu erstellen.

Nun stellt sich die Frage: Wie verwaltet JavaScript diese Ausführungskontexte, wenn sie sowohl für den globalen Kontext als auch für jede Funktion erstellt werden?

Verwalten von Ausführungskontexten mit dem Ausführungsstapel

Um diese Kontexte zu verwalten, verwendet JavaScript eine Datenstruktur namens Execution Stack. Der Ausführungsstapel speichert Kontexte auf stapelartige Weise: zuerst den globalen Ausführungskontext, gefolgt von jedem Funktionsausführungskontext. Wenn alle Ausführungskontexte im Stapel gespeichert sind, verarbeitet JavaScript sie nacheinander, beginnend am oberen Rand des Stapels.

Scoping mit let und const

Es ist wichtig zu beachten, dass, wenn wir Variablen mit let oder const innerhalb eines globalen oder Funktionsbereichs deklarieren, diese Variablen während der Erstellungsphase nicht im Variablenobjekt gespeichert und nicht mit undefiniert initialisiert werden. Stattdessen werden diese Variablen direkt deklariert und ihren Werten in der Ausführungsphase zugewiesen.

Betrachten Sie das folgende Codebeispiel:

Codebeispiel

var a = 1;

function one() {
  console.log(a);

  function two() {
    console.log(b);

    var b = 2;

    function three(c) {
      console.log(a + b + c);
    }

    three(4);
  }

  two();
}

one();

Wenn wir diesen Code ausführen, stoßen wir auf einen ReferenceError. Dies liegt daran, dass wir versuchen, den Wert der b-Variablen auszugeben, bevor wir sie deklarieren, und da b mit const deklariert wird, verhält es sich anders als reguläre Variablen. Mit const oder let deklarierte Variablen werden während der Erstellungsphase nicht im Variablenobjekt gespeichert, weshalb wir eine Fehlermeldung erhalten, wenn wir versuchen, auf sie zuzugreifen, bevor ihnen ein Wert zugewiesen wird.

Abschluss

Ich hoffe, dass diese Erklärung, wie JavaScript funktioniert und was während seiner Ausführungskontextphasen passiert, Ihnen ein klareres Verständnis vermittelt hat. In der nächsten Lektion werden wir uns mit einem anderen JavaScript-Thema befassen.

Sie können sich mit mir auf GitHub und Linkedin verbinden.

Das obige ist der detaillierte Inhalt vonJavaScript-Ausführungskontext – Wie JS-Code hinter den Kulissen ausgeführt wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!