Bringen Sie Ihnen Schritt für Schritt bei, den Ausführungskontext in JS zu verstehen

Dieser Artikel führt Sie Schritt für Schritt zu einem umfassenden Verständnis des Ausführungskontexts in JavaScript. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Nur wenn wir den Ausführungskontext verstehen, können wir die JavaScript-Sprache selbst besser verstehen, z. B. Variablenförderung, Umfang, Schließung usw.

Ausführungskontext

Der Ausführungskontext ist die Ausführungsumgebung des aktuellen Codes .

Es gibt hauptsächlich drei Arten von Ausführungskontexten:

• Globaler Ausführungskontext: Die globale Ausführungsumgebung ist die peripherste Ausführungsumgebung. Das globale Objekt im Browser ist ein Fenster, das auf dieses Objekt verweist

• Funktionsausführungskontext: Es kann unzählige geben, sie werden erstellt, wenn die Funktion aufgerufen wird. Jeder Funktionsaufruf erstellt einen neuen Ausführungskontext.

• Bewertungsausführungskontext, selten verwendet.

Jeder Ausführungskontext hat drei wichtige Attribute:

• Variables Objekt (VO): Jeder Ausführungsumgebung ist ein Variablenobjekt zugeordnet, das in der Umgebung definiert ist. Alle Variablen und Funktionen werden darin gespeichert dieses Objekt. Obwohl der von uns geschriebene Code keinen Zugriff auf dieses Objekt hat, verwendet der Parser es im Hintergrund bei der Verarbeitung der Daten.

Verwenden Sie im Funktionskontext das Aktivierungsobjekt (AO), um variable Objekte darzustellen. Aktive Objekte und variable Objekte sind eigentlich dasselbe. Nur beim Betreten einer Ausführungsumgebung wird das variable Objekt dieses Ausführungskontexts aktiviert. Zu diesem Zeitpunkt wird es als aktives Objekt (AO) bezeichnet zugegriffen werden kann.

• Bereichskette: Wenn Code in einer Umgebung ausgeführt wird, wird eine Bereichskette variabler Objekte erstellt. Der Zweck der Bereichskette besteht darin, einen geordneten Zugriff auf alle Variablen und Funktionen sicherzustellen, auf die die Ausführungsumgebung Zugriff hat.

• dieser

Lebenszyklus des Ausführungskontexts: Erstellen-> Ausführung-> Wiederverwenden

1.1 Variables Objekt erstellen:

Initialisierungsfunktionsparameter Argumente

Funktionsdeklaration

• Variablendeklaration
• Ein einfaches Beispiel zum Verständnis des Variablenobjekts

• function getName(name) {
      var b = 2;
      function foo() {};
      var bar = function() {};
  
  }
  getName('lucystar')

Der AO sieht zu diesem Zeitpunkt ungefähr wie folgt aus

AO = {
    arguments: {
        0: 'lucystar',
        length: 1
    },
    name: 'lucystar',
    b: undefined,
    foo: reference to function foo(){},
    bar: undefined
}

Das obige Beispiel beinhaltet Variablenförderung und Funktionsförderung, die zuvor

von waren JS Das zugrunde liegende Verständnis von var, let, const

wurde ebenfalls in diesem Artikel vorgestellt

1.2 Erstellen Sie eine Bereichskette

Der Bereich einer Funktion wird bestimmt, wenn die Funktion definiert wird. Die Bereichskette selbst enthält Variablenobjekte, die zunächst vom Variablenobjekt im aktuellen Kontext aus gesucht werden. Wenn sie nicht gefunden wird, wird vom Variablenobjekt des übergeordneten Ausführungskontexts aus gesucht, bis die Variable gefunden wird Objekt des globalen Ausführungskontexts.

1.3 Bestimmen Sie die Richtung davon.

Weitere Informationen finden Sie in einem anderen Artikel Ausführung der Variablenzuweisung und Codeausführung

3. Recyclingphase

Der Ausführungskontext wird aus dem Stapel entnommen und vom Garbage-Collection-Mechanismus recycelt. Informationen zum Speicherrecycling finden Sie unter V8-Speicherverwaltungs- und Garbage-Collection-Mechanismus

Ausführungskontextstapel

Der Ausführungskontextstapel wird zur Verwaltung des Ausführungskontexts verwendet. Nachdem der Ausführungskontext erstellt wurde, schiebt die JavaScript-Engine den Ausführungskontext in den Stapel. Dieser zur Verwaltung des Ausführungskontexts verwendete Stapel wird normalerweise als Ausführungskontextstapel oder Aufrufstapel bezeichnet.

let a = 'javascript';

function foo() {
    console.log('foo');
    bar();
}
function bar() {
    console.log('bar');
}
foo();

Wenn der obige Code in den Browser geladen wird, erstellt die JavaScript-Engine einen globalen Ausführungskontext und schiebt ihn in den aktuellen Ausführungsstapel.

Wenn der Funktionsaufruf foo() auftritt, erstellt die JavaScript-Engine einen Foo-Funktionsausführungskontext und schiebt ihn an die Spitze des aktuellen Ausführungsstapels.

Wenn die Funktion bar() innerhalb der Funktion foo() aufgerufen wird, erstellt die JavaScript-Engine einen Ausführungskontext für die Bar-Funktion und schiebt ihn auf die aktuelle Ausführung Stapel von oben.
Wenn die Ausführung der Funktionsleiste abgeschlossen ist, wird ihr Ausführungskontext aus dem aktuellen Stapel entfernt und der Kontrollfluss erreicht den nächsten Ausführungskontext, der der Ausführungskontext der Funktion foo() ist.

• foo() 函数调用时， JavaScript 引擎创建了一个 foo 函数执行上下文并把它压入到当前执行栈的顶部。

• 当从 foo() 函数内部调用 bar() 函数时，JavaScript 引擎创建了一个 bar 函数执行上下文并把它压入到当前执行栈的顶部。

• 当函数 bar 执行完毕，它的执行上下文会从当前栈中弹出，控制流程到达下一个执行上下文，即 foo()

  Wenn foo() die Ausführung abschließt, wird sein Ausführungskontext vom Stapel entfernt und der Kontrollfluss erreicht den globalen Ausführungskontext. Sobald die gesamte Codeausführung abgeschlossen ist, entfernt die JavaScript-Engine den globalen Ausführungskontext vom aktuellen Stapel.

Warum werden Basisdatentypen auf dem Stapel und Referenzdatentypen auf dem Heap gespeichert? Die JavaScript-Engine muss den Stapel verwenden, um den Status des Kontexts während der Programmausführung aufrechtzuerhalten. Wenn der Stapelspeicher groß ist, werden alle Daten im Stapelspeicher gespeichert, was sich auf die Effizienz des Kontextwechsels und damit auf die Ausführungseffizienz auswirkt das gesamte Programm.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Programmiervideos! !

Das obige ist der detaillierte Inhalt vonBringen Sie Ihnen Schritt für Schritt bei, den Ausführungskontext in JS zu verstehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!