Detaillierte Beschreibung des JavaScript-Ausführungskontexts

Dieser Artikel beschreibt, wie JavaScript den Kontext der JavaScript-Ausführung ausführt. Wenn Sie sich nicht mit dem JavaScript-Ausführungskontext auskennen, werfen wir gemeinsam einen Blick auf diesen Artikel Kommen Sie auf den Punkt

Hintergrund: In Vorstellungsgesprächen stoßen wir oft auf Probleme wie Funktions- und Variablenbeförderung, Umfang etc. Wenn wir dessen Prinzipien tiefgreifend verstehen wollen, sind wir Sie müssen zunächst die Konzepte des Funktionsausführungskontexts und des Ausführungskontextstapels verstehen.

Lassen Sie uns noch einmal die Datenstruktur des Stapels vorstellen:

Um es zusammenzufassen: Neue Daten werden von oben in den Stapel eingeschoben, und Popup-Daten werden ebenfalls von oben in den Stapel eingefügt, was wir als Magazinprinzip bezeichnen.

1. Ausführungskontext

Der Ausführungskontext kann als der aktuelle verstanden werden Ausführungsumgebung des Codes, die einen Bereich bildet. Die Laufumgebung in JavaScript umfasst grob drei Situationen.

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

Funktionsumgebung: Wenn eine Funktion aufgerufen und ausgeführt wird, Es wird die aktuelle Funktion eingeben, um den Code auszuführen

eval (nicht empfohlen, kann ignoriert werden)

2. Ausführungskontextstapel (Ausführungskontextstapel)

JavaScript wird in einem einzelnen Thread ausgeführt, sodass alle Codes zur Ausführung in die Warteschlange gestellt werden Oben im Stapel befindet sich der aktuelle Ausführungskontext. Wenn der Browser mit der Ausführung von globalem Code beginnt, erstellt er zunächst einen eindeutigen globalen Ausführungskontext und verschiebt ihn an die Spitze des Ausführungsstapels (er wird angezeigt, wenn der Browser geschlossen wird). 🎜>

wird nicht eingegeben, ein neuer Funktionsausführungskontext wird erstellt und entsprechend an die Spitze des Ausführungsstapels verschoben. Nachdem die aktuelle Funktion abgeschlossen ist, wird die Ausführung der aktuellen Funktion entfernt ganz oben auf dem Stapel und wartet auf die Garbage Collection

.

3. Der

Lebenszyklus des Ausführungskontexts

Gesamtlebenszyklus: Erstellen-->Ausführen-->Pop, um auf Zerstörung zu warten

Erstellungsphase

:

A Variablenobjekt erstellen: zuerst initialisieren

Funktion Parameter

Argumente, Initialisierungsfunktionsdeklaration, Initialisierungsvariable (undefiniert). Die -Priorität einer -Funktion ist höher als die einer Variablen. Wenn die Variable den gleichen Namen wie der Funktionsname hat, wird die Variable wird ignoriert.

a

erstellt ein Argumentobjekt, überprüft den Kontext, initialisiert Parameternamen und -werte und erstellt ein Kopie der Referenz. b durchsucht den Kontext nach Funktionsdeklarationen (statt

Funktionsausdrücken

)1.Jedes Mal, wenn eine Funktion gefunden wird, erstellen Sie ein Attribut für das variable Objekt ----- um genau zu sein, den Namen der Funktion – das Attribut value Es handelt sich um eine Referenz, die auf die Adresse der Funktion im Speicher verweist.

2.Wenn der obige Funktionsname bereits unter variableObject vorhanden ist, wird der entsprechende Attributwert durch die neue Referenz überschrieben.

c Variablendeklarationen im Kontext scannen

1. Jedes Mal, wenn eine Variablendeklaration gefunden wird, wird ein Attribut für das Variablenobjekt erstellt, d. h. das Wort Variablenname, und der Wert der Variablen wird auf undefiniert

d Bestimmen Sie den Zeiger davon im Kontext

BBereichskette erstellen

Ausführungsphase:

Ausführung der Variablenzuweisung, Codeausführung

Recyclingphase:

Der Ausführungskontextstapel wartet darauf, dass der Garbage-Collection-Mechanismus den Kontext recycelt

Fall: (Der folgende Code wird verwendet, um das Funktionsprinzip des zu veranschaulichen Ausführungskontextstapel)

	//变量声明
	var a1 = 9,
	a2 = 8,
	a3 = "sss",
	b1 = {name:"xixi"};

	//函数调用
	a1 = f1(a1,a2);
	
	//函数声明
	function f1(a,b){
		//f1函数的执行上下文
		/*
			1.扫描参数: a = 9 b = 8
			2.扫描函数声明 f2 = function(){}
			3.扫描变量声明 t = undefined , m = undefined , i = undefined
		*/
		var t = 0,
		m = 10;

		for(var i=0;i<a;i++){
			console.log(i);
		}

		function f2(){
			console.log("f2");
		}

		return a+b;
	}

Umgebungsstapeldiagramm:

Wenn Sie noch nicht viel darüber wissen, können Sie es leicht meistern, indem Sie mehr davon implementieren beide Seiten!

Verwandte Empfehlungen:

Front-End Advanced (2): Ausführungskontextdiagramm

JavaScript Variable Object Teil 2: VO in verschiedenen Ausführungskontexten

Front-End Basic Advanced ( 2): AusführungskontextDetaillierte Darstellung

Das obige ist der detaillierte Inhalt vonDetaillierte Beschreibung des JavaScript-Ausführungskontexts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!