Explication détaillée de la portée et de la pré-analyse de js

Cette fois, je vais vous apporter une explication détaillée de l'utilisation de js scope et de la pré-analyse. Quelles sont les précautions concernant l'utilisation de js scope et la pré-analyse. Voici des cas pratiques, voyons. jetez un oeil.

Bien que ES6 soit de plus en plus largement utilisé dans notre travail, de nombreux projets conservent encore la méthode d'écriture ES5. Par conséquent, aujourd'hui, je vais vous emmener reconsolider la portée et le mécanisme de pré-analyse sous ES5.

Concept :

Portée : Le domaine fait référence à un espace, une plage et une zone, et sa fonction signifie que des opérations de lecture et d'écriture peuvent être effectuées au sein du domaine. La portée d'une variable est la zone dans laquelle la variable est définie dans le code source du programme.

Dans ES5, il n'y a que des portées globales et au niveau des fonctions. Dans ES6, la portée au niveau du bloc est introduite. Le mécanisme de pré-analyse de js est grossièrement divisé en deux processus : la pré-analyse et le processus descendant. étape par étape. Interprétation de la ligne

Pré-analyse : l'analyseur js stockera d'abord les variables, fonctions, paramètres et autres éléments définis par var dans l'entrepôt (mémoire). Avant que la variable var ne soit officiellement exécutée, on lui attribue la valeur non définie. Avant que la fonction function ne soit exécutée, c'est l'intégralité du bloc fonction

interprétée ligne par ligne

expressions =, +, - ,*,/,++,--,! , %....number() et les paramètres peuvent tous se voir attribuer des valeurs

supérieure à la variable. , ne laissant que la fonction appel de fonction (la fonction est une portée, et lorsqu'elle rencontre une portée, elle sera exécutée selon le processus de pré- en analysant d'abord, puis en l'interprétant ligne par ligne). Commencez par rechercher les paramètres localement, et s'ils ne sont pas trouvés localement, recherchez de bas en haut (chaîne de portée)

Le concept est un long chemin. Je suppose que les débutants sont encore un peu confus. Les conducteurs expérimentés peuvent descendre du bus à l'avance, donnons ensuite quelques petites châtaignes, combinées à la théorie ci-dessus, pour une compréhension approfondie.

Pratique

alert(a); //error: a is not defined
a = 3;

Pré-analyse

Dit ci-dessus , seuls les var, fonctions, paramètres, etc. seront stockés lors de la pré-analyse, donc :

Les paramètres de la fonction Var ne sont pas trouvés dans toute la portée

Interprétés ligne par ligne

Après la pré-analyse, a existe dans la mémoire et se voit attribuer la valeur de l'intégralité de la variable underfind. Par conséquent, le programme signale directement une erreur lors de l'exécution du code.

alert(a); //undefined
var a = 3;

Pré-analyse

Comme mentionné ci-dessus, seule la pré-analyse sera be done var, fonction, paramètres, etc. sont stockés, donc :

Lorsque la deuxième ligne est exécutée, la valeur de a n'est pas définie.

Interprétation ligne par ligne

Première ligne : Après pré-analyse, a existe dans la mémoire et est attribué sous-fin

alert(a);          // function a (){ alert(4); }
var a = 1;
alert(a);          // 1
function a (){ alert(2); }
alert(a);          // 1
var a = 3;    
alert(a);          // 3
function a (){ alert(4); }
alert(a);          // 3

Analyse du domaine

Comme mentionné ci-dessus, seuls les variables, fonctions, paramètres, etc. seront stockés lors de la pré-analyse, donc :

Exécuter À la deuxième ligne, la valeur de a n'est pas définie.

Lorsque l'exécution atteint la quatrième ligne, la valeur de a est la fonction elle-même, c'est-à-dire la fonction a(){alert(2);}.

Lorsque l'exécution atteint la sixième ligne, la valeur de a est toujours la valeur de la quatrième ligne, c'est-à-dire la fonction a(){alert(2);}, car la fonction a une priorité plus élevée que la variable.

Lorsque l'exécution atteint la huitième ligne, la valeur de a devient function a(){alert(4);}, car lorsque deux fonctions portent le même nom, le code est exécuté de haut en bas.

Interprétation ligne par ligne

Une fois la pré-analyse terminée, le code est exécuté ligne par ligne

La première ligne : function a(){alert(4. );} apparaîtra, car une fois la pré-analyse terminée, la valeur de a stockée dans la mémoire est function a(){alert(4);}

La deuxième ligne : Il y a une expression dans la deuxième ligne, et a est attribué. La nouvelle expression valeur 1 modifie la valeur de la variable. Les expressions peuvent modifier la valeur préparée.

La troisième ligne : a reçoit maintenant la valeur 1, et tous les 1 apparaîtront

La quatrième ligne : C'est juste une déclaration de fonction, aucune expression n'est utilisée, et il y a aucun appel de fonction. La valeur de a ne sera donc pas modifiée.

Ligne 5 : Parce que la valeur de a n'a pas changé, elle est toujours 1

Ligne 6 : Une expression est utilisée et a se voit attribuer une nouvelle valeur 3

Lignes du chapitre sept : 3

第八行：函数的声明，不会改变a 的值。

第九行：a的值没有改变，所以还是3

通过上面的栗子，相信大家应该对变量作用域的预解析过程有一定的了解了，接下来，咋们再举几个函数作用域的栗子

例4：

var a=1;
function fn1(){
  alert(a); //undefined
  var a = 2;
}
fn1();
alert(a) //1

例5：

var a=1;
function fn1(a){
  alert(a); //1
  var a = 2;
}
fn1(a);
alert(a) //1

例6：

var a=1;
function fn1(a){
  alert(a); //1
  a = 2;
}
fn1(a);
alert(a) //1

例7：

var a=1;
function fn1(){
  alert(a); //1
  a = 2;
}
fn1(a);
alert(a) //2

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

async与await的用法详解

node+express实现聊天室

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!