Portée et mécanisme de pré-analyse de js (tutoriel détaillé)

Cet article vous donne principalement une analyse détaillée de la portée de js, du mécanisme de pré-analyse et de l'analyse du code associée. Les amis qui sont intéressés par cela peuvent en tirer des leçons.

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 où 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 undefined. Avant que la fonction function ne soit exécutée, c'est l'ensemble du bloc fonction

interprété ligne par ligne

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

S'il y a des noms en double, il n'en restera qu'un. Les variables et les fonctions ont des noms en double et les fonctions ont une priorité plus élevée que les variables. Seules les fonctions seront laissées

Appel de fonction (une fonction est une portée. Lorsque vous rencontrez une portée, elle sera exécutée selon le processus de pré-analyse puis d'interprétation ligne par ligne). pour les paramètres localement. Si vous ne les trouvez pas localement, recherchez-les de bas en haut (fonction Chaîne de domaine)

Le concept est étendu depuis longtemps. On estime que les débutants sont encore un. Les conducteurs peu étourdis et expérimentés peuvent descendre du bus à l'avance. Ensuite, donnons quelques petites châtaignes et combinons-les avec la théorie ci-dessus.

Pratique

Exemple 1 :

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

Analyse :

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.

Exemple 2 :

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

Analyse :

Pré-analyse

Comme mentionné ci-dessus, seule la pré-analyse sera 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

Exemple 3 :

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 :

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

Chapitre Ligne sept : 3

apparaîtra. Ligne huit : La déclaration de la fonction ne changera pas la valeur de a.

Ligne 9 : La valeur de a n'a pas changé, elle est donc toujours 3

Grâce à l'exemple ci-dessus, je pense que tout le monde devrait avoir une certaine compréhension du processus de pré-analyse de la portée variable . Ensuite, donnons quelques exemples supplémentaires de portée de fonction

Exemple 4 :

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

Exemple 5 :

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

Exemple 6 :

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

Exemple 7 :

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

Comment ajouter dynamiquement des éléments de balise HTML avec des styles dans jquery

Comment l'implémenter dans node.js fs fonctionnement du répertoire du système de fichiers et fonctionnement des informations sur les fichiers ?

Comment ajouter dynamiquement des balises li, ajouter des attributs et lier des méthodes d'événement dans jQuery

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!