Description détaillée du contexte d'exécution JavaScript

Cet article décrit comment JavaScript exécute le contexte. Si vous ne connaissez pas le contexte d'exécution de JavaScript ou si vous êtes intéressé par le contexte d'exécution de JavaScript, jetons un coup d'œil à cet article ensemble. D'accord, c'est absurde. Parlons moins et. aller droit au but

Contexte : Lors des entretiens, nous rencontrons souvent des problèmes tels que la fonction et la promotion variable, la portée, etc. Si nous voulons comprendre ses principes en profondeur, nous doit d'abord comprendre Comprendre les concepts de contexte d'exécution de fonction et de pile de contexte d'exécution.

Encore une fois, introduisons la structure des données de la pile :

Pour résumer, les nouvelles données sont poussées depuis le haut de la pile, et les données contextuelles sont également extraites du haut de la pile, ce que nous appelons le principe du magazine.

1. Contexte d'exécution

Le contexte d'exécution peut être compris comme le contexte actuel. environnement d'exécution du code, qui forme un scope. L'environnement d'exécution en JavaScript comprend grosso modo trois situations.

Environnement global : le code JavaScript entrera d'abord dans cet environnement lors de l'exécution.

Environnement de fonction : lorsqu'une fonction est appelée et exécutée, il entrera la fonction actuelle pour exécuter le code

eval (non recommandé, peut être ignoré)

2. Pile de contexte d'exécution (Pile de contexte d'exécution)

JavaScript est exécuté sur un seul thread, donc tous les codes sont mis en file d'attente pour l'exécution. Le bas de la pile est toujours le contexte global et le. en haut de la pile se trouve le contexte d’exécution actuel. Lorsque le navigateur commence à exécuter du code global, il crée d'abord un contexte d'exécution global unique et le pousse en haut de la pile d'exécution (cela se produit lorsque le navigateur est fermé lors de l'exécution d'une fonction

n'est pas saisi, un nouveau contexte d'exécution de fonction sera créé et poussé en haut de la pile d'exécution en conséquence. Une fois la fonction actuelle terminée, l'exécution de la fonction actuelle. Le contexte est sauté du haut. de la pile et attend le ramassage des déchets

.

3. Le cycle de vie du contexte d'exécution

Cycle de vie total : Créer-->Exécuter-->Pop pour attendre la destruction

Phase de création

 :

A

Créer un objet variable : initialiser en premier Fonction paramètres arguments, déclaration de fonction d'initialisation, variable d'initialisation (non définie). La priorité d'une fonction est supérieure à celle d'une variable. Si la variable a le même nom que la fonction, la variable. sera ignoré.

a

crée un objet arguments, vérifie le contexte, initialise les noms et valeurs des paramètres et crée un copie de la référence.

b

analyse le contexte à la recherche de déclarations de fonction (plutôt que de expressions de fonction)1.

Chaque fois qu'une fonction est trouvée, créez un attribut sur l'objet variable ----- pour être précis, le nom de la fonction - l'attribut valeur C'est une référence pointant vers l'adresse de la fonction en mémoire. 2.

Si le nom de la fonction ci-dessus existe déjà sous variableObject, la valeur de l'attribut correspondant sera écrasée par la nouvelle référence.

c Analyser les déclarations de variables en contexte

1. Chaque fois qu'une déclaration de variable est trouvée, un attribut sera créé sur l'objet variable --- c'est-à-dire le mot nom de la variable, et la valeur de la variable sera initialisée à undefined

d Déterminez le pointeur de ceci dans le contexte

. B Créer une chaîne de portée

Phase d'exécution :

Exécution de l'affectation des variables, exécution du code

Phase de recyclage :

La pile de contexte d'exécution attend que le mécanisme de garbage collection recycle le contexte

Cas : (Le code suivant est utilisé pour illustrer le principe de fonctionnement du pile de contexte d'exécution)

	//变量声明
	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;
	}

Diagramme de pile d'environnement :

Si vous n'y connaissez pas encore grand chose, vous pouvez facilement le maîtriser en mettant en œuvre davantage de des deux côtés !

Recommandations associées :

Front-end avancé (2) : diagramme de contexte d'exécution

Objet variable JavaScript Partie 2 : VO dans différents contextes d'exécution

Front-end Basic Advanced ( 2) : Contexte d'exécutionIllustration détaillée

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!