Front-End Advanced (2): Ausführungskontextdiagramm

Lass uns einfach zuerst ein Bild machen

Wir stoßen häufig auf Bewertungsvariablenin den frühen Phasen des Lernens JS oder während Interviews Denkfragen zur Verbesserung. Beginnen wir zum Beispiel mit einer einfacheren Lösung.

console.log(a);   // 这里会打印出什么？
var a = 20;

Wenn wir dieses Beispiel vorerst ignorieren, stellen wir das grundlegendste, aber auch wichtigste Konzept in JavaScriptAusführungskontext (Ausführungskontext) vor.

Jedes Mal, wenn der Controller zu ausführbarem Code wechselt, tritt er in einen Ausführungskontext ein. Der Ausführungskontext kann als die Ausführungsumgebung des aktuellen Codes verstanden werden, der einen Bereich bildet. Die Ausführungsumgebung in JavaScript umfasst grob drei Situationen.

• Globale Umgebung: JavaScript-Code gelangt zuerst in diese Umgebung, wenn er ausgeführt wird.

• Funktion Umgebung: Wenn die Funktion aufgerufen wird , wird ausgeführt Wenn die aktuelle Funktion eingegeben wird, um den Code auszuführen

• eval

Daher in einem JavaScript-Programm mehrere Ausführungskontexte müssen generiert werden, die JavaScript-Engine verarbeitet sie in Form eines Stapels. Dieser Stapel wird als Funktionsaufrufstapel (call Stapel) bezeichnet. Das untere Ende des Stapels ist immer der globale Kontext und das obere Ende des Stapels ist der aktuell ausgeführte Kontext.

Wenn der Code während der Ausführung auf die oben genannten drei Situationen stößt, wird ein Ausführungskontext generiert und auf dem Stapel platziert. Nachdem der Kontext oben im Stapel ausgeführt wurde, wird er automatisch aus dem Stapel entfernt. Um diesen Vorgang besser zu verstehen, zeigen wir ihn Ihnen anhand der folgenden Beispiele und Diagramme.

var color = 'blue';

function changeColor() {
    var anotherColor = 'red';

    function swapColors() {
        var tempColor = anotherColor;
        anotherColor = color;
        color = tempColor;
    }

    swapColors();
}

changeColor();

Wir verwenden ECStack, um den Stapel darzustellen, der Ausführungskontextgruppen verarbeitet. Wir können leicht erkennen, dass der erste Schritt darin besteht, den globalen Kontext auf den Stapel zu verschieben.

Schritt 1: Schieben Sie den globalen Kontext auf den Stapel

Nachdem der globale Kontext auf den Stapel verschoben wurde, wird der darin enthaltene ausführbare Code gestartet auszuführen, bis es auf changeColor() trifft. Dieser Satz aktiviert die Funktion changeColor, um einen eigenen Ausführungskontext zu erstellen. Der zweite Schritt besteht also darin, den Ausführungskontext von changeColor auf den Stapel zu verschieben.

Schritt 2: Der Ausführungskontext von changeColor wird auf den Stapel geschoben

Nachdem der Kontext von changeColor auf den Stapel geschoben wurde, wird der Controller beginnt mit der Ausführung des darin enthaltenen ausführbaren Codes. Nach der Begegnung mit swapColors() wird ein anderer Ausführungskontext aktiviert. Daher besteht der dritte Schritt darin, den Ausführungskontext von swapColors auf den Stapel zu verschieben.

Schritt 3: Der Ausführungskontext von swapColors wird auf den Stapel verschoben

Im ausführbaren Code von swapColors wird kein anderer Ausführungskontext angetroffen . context, sodass dieser Code erfolgreich ausgeführt wird und der Kontext von swapColors vom Stapel entfernt wird.

Schritt 4: Der Ausführungskontext von swapColors wird vom Stapel entfernt

Nachdem der Ausführungskontext von swapColors angezeigt wird, fahren Sie mit der Ausführung der ausführbaren Datei fort Code von changeColor, auch Es wird kein anderer Ausführungskontext gefunden und dieser wird nach erfolgreicher Ausführung angezeigt. Auf diese Weise gibt es in ECStack nur einen globalen Kontext.

Schritt 5: Der Ausführungskontext von changeColor wird vom Stapel entfernt

Der globale Kontext wird vom Stapel entfernt, nachdem das Browserfenster geöffnet ist geschlossen.

Hinweis: In einer Funktion kann das Auftreffen von return die Ausführung des ausführbaren Codes direkt beenden, sodass der aktuelle Kontext direkt vom Stapel entfernt wird.

Der gesamte Prozess

Nachdem wir diesen Prozess im Detail verstanden haben, können wir einige Schlussfolgerungen zum Ausführungskontext zusammenfassen.

• Einzelner Thread

• Synchronisierte Ausführung, nur der Kontext oben im Stapel wird ausgeführt, andere Kontexte müssen warten

• Es gibt nur einen globalen Kontext, der beim Schließen des Browsers angezeigt wird

• Es gibt keine Begrenzung für die Anzahl der Ausführungskontexte einer Funktion

• Jedes Mal, wenn eine Funktion aufgerufen wird, wird ein neuer Ausführungskontext für sie erstellt, auch wenn es sich um die aufgerufene Funktion selbst handelt.

为了巩固一下执行上下文的理解，我们再来绘制一个例子的演变过程，这是一个简单的闭包例子。

function f1(){
    var n=999;
    function f2(){
        alert(n); 
    }
    return f2;
}
var result=f1();
result(); // 999

因为f1中的函数f2在f1的可执行代码中，并没有被调用执行，因此执行f1时，f2不会创建新的上下文，而直到result执行时，才创建了一个新的。具体演变过程如下。

上例演变过程

如果你在某公众号看到我的文章，然后发现下面的评论说最后一个例子错了，请不要管他们，他们把函数调用栈和作用域链没有分清楚就跑出来质疑，真的很有问题。建议大家读一读这系列的第六篇文章，教你如何自己拥有判断对错的能力。

下一篇文章继续总结执行上下文的创建过程与变量对象，求持续关注与，谢谢大家。

Das obige ist der detaillierte Inhalt vonFront-End Advanced (2): Ausführungskontextdiagramm. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!