Detaillierte Erklärung des Ausführungskontexts und des Aufrufstapels in JavaScript

1. Was ist der Ausführungskontext

Der Code wird in einer bestimmten Umgebung ausgeführt, die wir Ausführungsumgebung oder Ausführungskontext nennen. Je nach Ausführungsumgebung können wir sie in drei Kategorien unterteilen:

Globale Ausführungsumgebung: die Standardumgebung bei der ersten Ausführung des Codes

Funktionsausführungsumgebung: Immer wenn der Ausführungsfluss in einen Funktionskörper eintritt

Eval-Ausführungsumgebung: Wenn der Text innerhalb der Eval-Funktion ausgeführt wird

2. Was ist der Ausführungskontextstapel?

Da es sich um einen „Stapel“ handelt, muss er den Merkmalen eines „Stapels“ entsprechen, d. h. die Datenstruktur ist First-In, Last-Out. Schauen wir uns einen Codeabschnitt an:

Funktion Katze(a){
    wenn(a<0){
        gibt false zurück;
    }
    console.log('Zum Stapel verschieben:'+a);
    Katze(a-1);
    console.log('Ausblenden:'+a);
}
Katze(3);
// Auf Stapel verschieben: 3
// Auf Stapel verschieben: 2
// Auf Stapel verschieben: 1
// Auf Stapel verschieben: 0
// Pop-Stapel: 0
// Bevölkerung: 1
// Bevölkerung: 2
// Bevölkerung: 3

Lassen Sie uns den Ausführungsprozess des obigen Codes analysieren:

① Wenn der Browser geladen wird, tritt das Programm in den globalen Ausführungskontext ein und schiebt es in einen Stapel (der erste, der eintritt, also die unterste Ebene). Unter diesem Ausführungskontext gibt es nur eine Funktion cat, cat-Aufruf, Parameter 3.

② Das Programm tritt in die cat-Funktion ein, d. h. tritt in den Ausführungskontext der Funktion ein und schiebt sie in den Stapel (der zweite, der eingegeben wird, also die vorletzte Ebene). Da der Parameter 3 größer als 0 ist, wird die Ausführung fortgesetzt und es wird „Push stack: 3“ ausgegeben.

③Das Programm wird weiterhin ausgeführt, ruft die Funktion cat auf, gibt erneut einen neuen Funktionsausführungskontext ein und schiebt es weiter in den Stapel (dritter Eintrag, drittletzte Ebene) mit dem Parameter a-1 und durchläuft Schritt 2 in einer Schleife. Hierbei ist zu beachten, dass aufgrund des Aufrufs der Funktion cat(a-1) die nächste Codezeile „Pop: a“ (zu diesem Zeitpunkt ist a noch 3), d. h. „Pop: 3“, vorübergehend gestrandet ist und in der vorletzten Ebene des Stapels existiert.

④ Wiederholen Sie die Schritte ②③ und geben Sie nacheinander „Push: 2“, „Push: 1“ und „Push: 0“ aus. Gleichzeitig sind die Ausgaben „Pop: 2“ (dritte Ebene von unten im Stapel), „Pop: 1 (vierte Ebene von unten im Stapel)“ und „Pop: 0 (fünfte Ebene von unten im Stapel)“ gestrandet.

⑤ Entsprechend den Eigenschaften des Stapels werden die vier gestrandeten Ausgabeelemente in der folgenden Reihenfolge ausgegeben: „Zum Stapel verschieben: 3“, „Zum Stapel verschieben: 2“, „Zum Stapel verschieben: 1“, „Zum Stapel verschieben: 0“;
Das Obige ist die spezifische Situation des Ausführungskontextstapels. Bitte üben Sie den Code manuell, ich glaube, er wird leicht gründlich zu verstehen sein.

3. Details des Ausführungskontextstapelprozesses

Wir wissen bereits, dass bei jedem Aufruf einer Funktion ein neuer Kontext ausgeführt wird. Jeder Ausführungskontext ist in zwei Phasen unterteilt: Erstellungsphase und Ausführungsphase. Erstellungsphase: bezieht sich auf die Phase, in der das Programm eine Funktion aufruft, der Code jedoch nicht ausgeführt wird;
Ausführungsphase: bezieht sich auf die Codeausführungsphase wie Variablenzuweisung und Funktionsausführung;

1. Erstellungsphase

Wenn die Funktion in dieser Phase aufgerufen wird, wird ein Ausführungskontextobjekt (executionContextObj) erstellt, das drei Objekte enthält: Bereichskettenobjekt (scopeChain), Variablenobjekt (variableObject, als VO bezeichnet) und dieses Objekt. VO umfasst Variablendeklaration (variable), Funktionsdeklaration (function), Parameter (Argumente) usw.
Die Erstellung dieser drei Objekte erfolgt in drei Schritten:
Schritt 1: Initialisieren Sie die Bereichskette (scopeChain) und weisen Sie den Stapelspeicher zu

Schritt 2: Parameter, Funktionen und Variablen erstellen

Schritt 3: Bestimmen Sie den Wert des Kontexts „this“.

Lassen Sie uns die obigen Schritte mit dem Code weiter analysieren:

Funktion Katze(Name) {
    var a = 'Jahr für Jahr';
    var b = Funktion () {};
    dieser.name = Name;
    Funktion c() {
        konsole.log(dieser.name);
    }
    C();
}
Katze('Da ist Fisch');

Wenn dieser Code die Funktion cat('有鱼') aufruft, befindet sich der Ausführungskontext in der Erstellungsphase und der Code wird wie folgt analysiert:

cat Ausführungskontextobjekt = {
    scopeChain: { ... }, // 1. Erzeuge eine Scope-Kette und ordne Stapelspeicher zu variableObject: { 2. Erzeuge ein variables Objekt arguments: { // 2.1 Parse-Parameter 0: 'Da ist Fisch',
            Länge: 1
        },
        Name: '有鱼', // 2.1 Parameter analysieren, Parameternamen erstellen und Parameter zuweisen c: Funktion c() // 2.2 Funktionsdeklaration c suchen und c als Attribut und Funktion c als Wert verwenden a: nicht definiert, // 2.3 Variablendeklaration a suchen, auf nicht definiert initialisieren, zu diesem Zeitpunkt nur den Deklarationsteil ansehen und keinen Wert zuweisen b: nicht definiert // 2.3 Variablendeklaration b suchen, auf nicht definiert initialisieren, zu diesem Zeitpunkt nur den Deklarationsteil ansehen und keinen Wert zuweisen },
    this: { 3. Erzeuge dieses Objekt this:cat('有鱼') // 3.1 Zeigt auf das Objekt dieses Aufrufs name:undefined // 3.2 Die Objekteigenschaft name wird auf undefined initialisiert
    };
    c() //Geben Sie den Ausführungskontext der Funktion c erneut ein, gleich wie bei der Cat-Funktion, noch nicht erweitert}

Durch die Codeanalyse können wir folgende Schlussfolgerungen ziehen

① Die Reihenfolge der drei Schritte darf nicht vertauscht werden. ② Führen Sie im VO-Schritt zuerst die Funktionsdeklaration und dann die Variablendeklaration aus. ③ In dieser Phase können nur Parameter zugewiesen werden, Variablen und Funktionen können nur deklariert werden.

2. Umsetzung

In dieser Phase führt der JS-Interpreter den Funktionscode im Kontext aus, führt den JS-Code Zeile für Zeile aus und weist Variablen Werte zu.
Oder analysieren Sie es in Kombination mit dem Code:

cat Ausführungskontextobjekt = {
    Geltungsbereich: { ... },
    Variablenobjekt: { 
        Argumente: { 
            0: 'Es gibt Fische',
            Länge: 1
        },
        Name: 'Es gibt Fisch', 
        c: Funktion c(),
        a: 'Funktion', // Variable a wird ein Wert zugewiesen b: Funktion b // Variable b wird ein Wert zugewiesen },
    dies: { 3. Erstellen Sie dieses Objekt dies:cat('Da ist Fisch') 
        name:'有鱼' // Weisen Sie dem Objektattributnamen einen Wert zu}
}

Oben finden Sie eine ausführliche Erläuterung des Ausführungskontexts und des Aufrufstapels in JavaScript. Weitere Informationen zum Ausführungskontext und zum Aufrufstapel in JavaScript finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!