Funktionsweise von JavaScript: Ausführungskontext verstehen (vereinfacht für Anfänger)

JavaScript ist eine der beliebtesten Programmiersprachen der Welt. Doch wie funktioniert es unter der Haube? Lassen Sie es uns Schritt für Schritt aufschlüsseln und dabei einfache Konzepte und Pseudocode verwenden, damit jeder Anfänger es verstehen kann.

Was ist JavaScript?

JavaScript ist eine Programmiersprache, die in einem Browser (wie Chrome, Firefox oder Safari) oder auf einem Server (mit Tools wie Node.js) ausgeführt wird. Es wird verwendet, um Websites interaktiv zu gestalten. Wenn Sie Animationen, Schaltflächen, die coole Dinge tun, oder Spiele in einem Browser sehen, dann ist JavaScript genau das Richtige für Sie.

Um zu verstehen, wie JavaScript funktioniert, müssen wir zwei Dinge verstehen:

1. Ausführungskontext
2. Aufrufstapel

Was ist ein Ausführungskontext?

Ein Ausführungskontext ist wie eine Box, in der JavaScript alles aufbewahrt, was es zum Ausführen Ihres Codes benötigt. Dazu gehört:

1. Variablen (Daten, die Sie speichern, z. B. x = 5)
2. Funktionen (Codeteile, die etwas tun, wie showMessage())
3. Auszuführender Code (die tatsächlichen Anweisungen, die Sie schreiben)

Es gibt zwei Haupttypen von Ausführungskontexten:

1. Globaler Ausführungskontext (GEC): Dies ist das Standardfeld, in dem JavaScript mit der Ausführung Ihres Codes beginnt. Es ist wie auf der Hauptbühne.
2. Funktionsausführungskontext (FEC): Dies ist ein neues Feld, das immer dann erstellt wird, wenn eine Funktion aufgerufen wird. Es funktioniert nur für diese Funktion.

Schritt-für-Schritt-Beispiel

Stellen Sie sich vor, Sie hätten diesen einfachen Pseudocode geschrieben:

// Global Code
var name = "Alex";
function greet() {
    var message = "Hello, " + name;
    return message;
}
greet();

Hier erfahren Sie Schritt für Schritt, was JavaScript tut:

1. Erstellen Sie einen globalen Ausführungskontext

Wenn das Programm startet, erstellt JavaScript automatisch einen Global Execution Context (GEC).

• Speicher (variable Umgebung):

  • name = undefiniert (Platzhalter vorerst)
  • Greet = Funktionsdefinition (speichert den Code für Greet())

• Codeausführungsphase:

  • Es führt den globalen Code Zeile für Zeile aus:
  • var name = „Alex“; → Aktualisiert den Speicher: name = „Alex“
  • Begegnungen grüßen(); → Ruft die Begrüßungsfunktion auf.

2. Erstellen Sie einen Funktionsausführungskontext

Wenn Greet() aufgerufen wird, erstellt JavaScript einen neuen Funktionsausführungskontext (FEC) speziell für Greet.

• Speicher (variable Umgebung):

  • message = undefiniert (Platzhalter für die Variable ingreet)

• Codeausführungsphase:

  • Führt die Begrüßungsfunktion aus:
  • var message = „Hallo,“ name; → Kombiniert „Hallo“ mit dem Namen („Alex“), also message = „Hallo, Alex“.
  • Antwortnachricht; → Sendet „Hallo, Alex“ zurück.

3. Aufräumen und zurückbringen

Sobald die Begrüßungsfunktion abgeschlossen ist, wird ihr Funktionsausführungskontext entfernt (gelöscht). Das Programm kehrt zum Global Execution Context zurück.

Was passiert mit Ausführungskontexten?

JavaScript verfolgt alle diese Ausführungskontexte mithilfe eines Aufrufstapels.

Was ist ein Call Stack?

Der Aufrufstapel ist wie ein Stapel Teller:

1. Der Global Execution Context befindet sich unten (auf der ersten Platte).
2. Jedes Mal, wenn eine Funktion aufgerufen wird, wird oben ein Funktionsausführungskontext hinzugefügt (eine neue Platte).
3. Wenn die Funktion beendet ist, wird ihr Kontext entfernt (die Platte wird abgenommen).

Visualisierung mit Pseudocode

So verarbeitet JavaScript unseren Code:

1. Anfänglicher globaler Code (GEC erstellen):
   

   // Global Code
   var name = "Alex";
   function greet() {
       var message = "Hello, " + name;
       return message;
   }
   greet();
   

   Nach dem Login kopieren

   Nach dem Login kopieren

2. Globale Ausführungsaktualisierungen (Ausführungscode):
   

   GEC:
     Memory: { name: undefined, greet: function }
     Code: Execute global lines
   

   Nach dem Login kopieren

3. Greet() aufrufen (FEC erstellen):
   

   GEC:
     Memory: { name: "Alex", greet: function }
     Code: Encounters greet()
   

   Nach dem Login kopieren

4. Führen Sie „greet()“ aus und geben Sie zurück:
   

   Call Stack:
     1. GEC
     2. FEC for greet()
   FEC (greet):
     Memory: { message: undefined }
     Code: Execute function lines
   

   Nach dem Login kopieren

5. Ausführung beenden:
   

   FEC (greet):
     Memory: { message: "Hello, Alex" }
     Return value: "Hello, Alex"
   Call Stack after return:
     1. GEC
   

   Nach dem Login kopieren

Wichtige Dinge, an die Sie sich erinnern sollten

1. Ausführungskontexte sind wie Container, in denen JavaScript Code ausführt. Jedes Programm beginnt mit einem Globalen Ausführungskontext und jede Funktion erhält ihren eigenen Funktionsausführungskontext.
2. Der Call Stack verfolgt, was gerade läuft. Das Letzte, was hinzugefügt wird, ist das Erste, was entfernt wird (LIFO: Last In, First Out).
3. JavaScript bereinigt, wenn eine Funktion ausgeführt wird. Deshalb bleibt die Erinnerung an eine Funktion nicht ewig erhalten.

Warum ist das wichtig?

Das Verständnis von Ausführungskontexten hilft Ihnen, bessere Programme zu schreiben:

• Sie werden wissen, warum Variablen an manchen Stellen verfügbar sind und an anderen nicht (Bereich).
• Sie werden Fehler wie „undefinierte“ Variablen verstehen.
• Sie werden sehen, wie Funktionen interagieren und warum sie Werte zurückgeben.

Fordern Sie sich selbst heraus

Versuchen Sie, diesen Pseudocode in Ihrem Kopf auszuführen:

Call Stack:
  Empty (Program Ends)

Fragen Sie sich:

1. Was steht im Global Execution Context?
2. Was passiert, wenn multiply() aufgerufen wird?
3. Was ist der Endwert des Ergebnisses?

Durch die Beherrschung von Ausführungskontexten verfügen Sie über eine solide Grundlage, um selbst die kniffligsten JavaScript-Probleme zu lösen!

Das obige ist der detaillierte Inhalt vonFunktionsweise von JavaScript: Ausführungskontext verstehen (vereinfacht für Anfänger). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!