Interprétation approfondie du mécanisme de levage dans les connaissances JavaScript_Basic

mécanisme de levage

La déclaration de variable Javascript a un mécanisme de levage. Lorsque le moteur JavaScript est exécuté, il placera toutes les déclarations de variable au premier plan de la portée actuelle.

Regardez d'abord un morceau de code

var v = "hello";
(function(){
 console.log(v);
 var v = "world";
})();

Quel est le résultat de l’exécution de ce code ?
La réponse est : indéfini
Ce code illustre deux problèmes,
Premièrement, la variable v dans la portée de la fonction couvre la variable de portée supérieure v. Apportez moins de modifications au code

var v = "hello";
if(true){
 console.log(v);
 var v = "world";
}  

Le résultat de sortie est "hello", indiquant que JavaScript n'a pas de portée au niveau du bloc. Les fonctions sont les seules structures en JavaScript qui ont leur propre portée.

Deuxièmement, dans le cadre de la fonction, la déclaration de la variable v est promue. Le code initial est donc équivalent à :

var v = "hello";
(function(){
 var v; //declaration hoisting
 console.log(v);
 v = "world";
})();  

Déclaration, définition et initialisation

La déclaration déclare l'existence d'un nom, la définition alloue un espace de stockage pour le nom, et l'initialisation attribue une valeur initiale à l'espace de stockage alloué par le nom.
Utilisez C pour exprimer ces trois concepts

extern int i;//Ceci est une déclaration indiquant que le nom i existe déjà quelque part
int i;//Il s'agit de déclarer et de définir le nom i, et d'allouer un espace de stockage pour i
i = 0;//C'est le nom d'initialisation i, attribuant une valeur initiale de 0
C'est le cas en javascript

var v;//Déclarer la variable v
v = "bonjour";//(définir et) initialiser la variable v
Étant donné que JavaScript est un langage dynamique, ses variables n'ont pas de type fixe et la taille de son espace de stockage change avec l'initialisation et l'affectation. Par conséquent, la « définition » de ses variables n'est pas la même que celle des langages statiques traditionnels. sa définition n'est pas pertinente.

Déclaration de promotion

Les déclarations dans la portée actuelle seront placées au premier plan de la portée, y compris les déclarations de variables et de fonctions

(function(){
 var a = "1";
 var f = function(){};
 var b = "2";
 var c = "3";
})();  

La déclaration des variables a, f, b, c sera promue au premier plan de la portée de la fonction, comme suit :

(function(){
 var a,f,b,c;
 a = "1";
 f = function(){};
 b = "2";
 c = "3";
})();

Veuillez noter que les expressions de fonction ne sont pas promues, ce qui constitue également la différence entre les expressions de fonction et les déclarations de fonction. Regardons de plus près les différences entre les deux :

(function(){
 //var f1,function f2(){}; //hoisting,被隐式提升的声明

 f1(); //ReferenceError: f1 is not defined
 f2();

 var f1 = function(){};
 function f2(){}
})();  

La déclaration de fonction f2 dans le code ci-dessus est promue, il n'y a donc aucun problème à appeler f2 plus tôt. Bien que la variable f1 soit également promue, la valeur de f1 après promotion n'est pas définie et sa valeur initiale réelle est attribuée lors de l'exécution de l'expression de fonction. Ainsi, seule la déclaration est promue.

Ordre de résolution de nom

Un nom en JavaScript entre dans la portée de quatre manières, et leur ordre de priorité est le suivant :
1. Langage intégré : toutes les étendues ont des mots-clés this et arguments
2. Paramètres formels : Les paramètres de la fonction sont valides dans la portée de la fonction
3. Déclaration de fonction : sous la forme de la fonction foo() {}
4. Déclaration de variable : sous forme de var bar ;

La priorité de la déclaration du nom est comme indiqué ci-dessus, c'est-à-dire que si le nom d'une variable est le même que le nom de la fonction, alors le nom de la fonction remplacera le nom de la variable, quel que soit son ordre. dans le code. Cependant, les noms sont initialisés dans l'ordre dans lequel ils sont écrits dans le code et ne sont pas affectés par les priorités ci-dessus. Regardez le code :

(function(){
  var foo;
  console.log(typeof foo); //function

  function foo(){}

  foo = "foo";
  console.log(typeof foo); //string
})();  

S'il y a plusieurs variables portant le même nom dans les paramètres formels, le dernier paramètre portant le même nom écrasera les autres paramètres portant le même nom, même si le dernier paramètre portant le même nom n'est pas défini.

Il existe des exceptions aux priorités de résolution de noms ci-dessus, telles que la possibilité de remplacer les arguments de nom intégrés du langage.

Expression de fonction nommée

Une expression de fonction peut recevoir un nom tout comme une déclaration de fonction, mais cela ne fait pas de l'expression de fonction une déclaration de fonction. Le nom d'une expression de fonction nommée n'entre pas dans l'espace de noms et n'est pas promu.

f();//TypeError : f n'est pas une fonction
foo();//ReferenceError : foo n'est pas défini
var f = function foo(){console.log(typeof foo);};
f();//fonction
foo();//ReferenceError : foo n'est pas défini
Le nom d'une expression de fonction nommée n'est valide que dans le cadre de la fonction.

Regardons l'exemple suivant :

var myval = "my global var";
(function() {
 console.log(myval); // log "my global var"
})();

Le code ci-dessus affichera évidemment "ma variable globale", mais si nous modifions légèrement le code ci-dessus comme suit :

var myval = "my global var";
(function() {
 console.log(myval); // log "undefined"
 var myval = "my local var";
})();

Le résultat de l'exécution est qu'un indéfini est généré. La raison de ce résultat est que la déclaration de variable est promue. Le code ci-dessus est équivalent à ce qui suit :

var myval = "my global var";
(function() {
 var myval;
 console.log(myval); // log "undefined"
 myval = "my local var";
})();

Seule la partie déclaration de la variable est promue et n'est pas initialisée immédiatement, donc undefined sera affiché.

Cependant, ce mécanisme de promotion ne se reflète pas seulement dans les variables ordinaires, mais aussi dans les fonctions. Par exemple, le code suivant ne peut pas être exécuté correctement :

(function() {
 fun(); // Uncaught TypeError: undefined is not a function
 var fun = function() {
 console.log("Hello!");
 }
})();

Parce que c'est équivalent à :

(function() {
 var fun;
 fun(); // Uncaught TypeError: undefined is not a function
 fun = function() {
 console.log("Hello!");
 }
})();

Comme la déclaration de la fonction est également levée et n'est pas initialisée immédiatement, une erreur se produit.

Bien sûr, cette façon de définir une fonction est appelée « expression de fonction » et il y aura un mécanisme de promotion. S'il s'agit de la méthode de « déclaration de fonction » suivante, il n'y aura aucun problème avec le mécanisme de promotion :

(function() {
 fun();
 function fun() {
 console.log("Hello!"); // log "Hello!"
 }
})();

C'est aussi la principale différence entre la déclaration de fonction et l'expression de fonction.