Contenu principal :
1. Analyser la signification de la portée lexicale JavaScript
2. Analyser la chaîne de portée des variables
3. Que se passe-t-il lorsque les noms de variables sont promus ?
Récemment, j'expliquais les cours JavaScript sur Chuanzhi Podcast. De nombreux amis pensaient que JavaScript était si simple, mais ils ne savaient pas comment l'utiliser, alors j'ai préparé du contenu à partager avec vous.
Cette série explique principalement les parties avancées de JavaScript, y compris les chaînes de portée, les fermetures, les modèles d'appel de fonctions, les prototypes et les éléments orientés objet. La syntaxe de base de JavaScript n'est pas incluse ici. Si vous avez besoin de connaître les bases, les étudiants peuvent accéder à http. : Allez sur //net.itcast.cn pour télécharger des vidéos gratuites pour apprendre. Bon, sans plus tarder, passons directement à notre sujet.
1. À propos de la portée au niveau du bloc
En parlant de la portée variable de JavaScript, elle est différente du langage de type C que nous utilisons habituellement.
Par exemple, le code suivant en C# :
Copiez le code comme suit :
static void Main(string[] arguments)
{
si (vrai)
{
numéro int = 10 ;
}
System.Console.WriteLine(num);
}
Si ce code est compilé, il ne passera pas car "le nom num n'existe pas dans le contexte actuel".
La portée des variables est limitée par des accolades et est appelée portée au niveau du bloc.
Dans la portée au niveau du bloc, toutes les variables se trouvent entre les accolades de la définition, du début de la définition à la fin des accolades.
Il peut être utilisé dans le périmètre. Il n'est pas accessible en dehors de ce périmètre.
Copiez le code comme suit :
si (vrai)
{
numéro int = 10 ;
System.Console.WriteLine(num);
}
Elle est accessible ici car la variable est définie et utilisée entre les mêmes accolades.
Mais c'est différent en JavaScript. Il n'y a pas de concept de portée au niveau du bloc en JavaScript.
2. Portée en JavaScript
En JavaScript, le code suivant :
Copiez le code comme suit :
si (vrai) {
varnum = 10 ;
}
alerte(num);
Le résultat de l'opération est une fenêtre pop-up 10. Alors, comment la portée des variables est-elle limitée en JavaScript ?
2.1 La fonction limite la portée des variables
En JavaScript, seules les fonctions peuvent limiter la portée d'une variable. Qu'est-ce que cela signifie ?
C'est-à-dire qu'en JavaScript, les variables définies au sein d'une fonction sont accessibles au sein de la fonction, mais en dehors de la fonction.
Accès impossible. Consultez le code suivant :
Copiez le code comme suit :
var func = fonction() {
varnum = 10 ;
} ;
essayer {
alerte(num);
} attraper ( e ) {
alerte(e);
}
Lorsque ce code est exécuté, une exception sera levée et la variable num n'est pas définie. En d'autres termes, la variable définie dans la fonction ne peut pas.
Utilisé en dehors de la fonction, il peut bien entendu être utilisé librement au sein de la fonction, même avant affectation. Voir le code suivant :
Copiez le code comme suit :
var func = fonction() {
alerte(num);
varnum = 10 ;
alerte(num);
} ;
essayer {
fonction();
} attraper ( e ) {
alerte(e);
}
Une fois ce code exécuté, aucune erreur ne sera générée et la fenêtre contextuelle apparaîtra deux fois, respectivement indéfini et 10 (pourquoi, je l'expliquerai ci-dessous).
On peut voir à partir d'ici que les variables ne sont accessibles que dans une fonction. De même, les fonctions au sein de la fonction sont également accessibles.
2.2 Le sous-domaine accède au domaine parent
Comme mentionné précédemment, une fonction peut limiter la portée d'une variable, de sorte que la fonction dans la fonction devient un sous-domaine de la portée du sous-domaine.
Le code peut accéder aux variables du domaine parent. Consultez le code suivant :
Copiez le code comme suit :
var func = fonction() {
varnum = 10 ;
var sub_func = fonction() {
alerte(num);
} ;
sub_func();
} ;
fonction();
Le résultat de l'exécution de ce code est 10. Vous pouvez voir l'accès aux variables mentionné ci-dessus mais lors de l'accès au domaine parent dans le domaine enfant.
Le code est également conditionnel. Tel que le code suivant :
Copiez le code comme suit :
var func = fonction() {
varnum = 10 ;
var sub_func = fonction() {
varnum = 20 ;
alerte(num);
} ;
sub_func();
} ;
fonction();
Ce code a un "var num = 20;" de plus qu'avant. Ce code est dans le sous-domaine, donc le sous-domaine accédera au domaine parent.
Il y a eu un changement, le résultat imprimé par ce code est 20. Autrement dit, le numéro auquel le sous-domaine accède à ce moment est une variable du sous-domaine, pas du domaine parent.
On peut voir qu'il existe certaines règles d'accès lors de l'utilisation de variables en JavaScript, l'interpréteur JavaScript est d'abord utilisé.
Recherchez dans le domaine utilisateur s'il existe une définition de la variable. Si tel est le cas, utilisez cette variable. Sinon, recherchez la variable dans le domaine parent.
Par analogie, jusqu'à ce que la portée de niveau supérieur soit toujours introuvable, une exception « la variable n'est pas définie » sera levée. Voir le code suivant :
Copiez le code comme suit :
(fonction() {
varnum = 10 ;
(fonction() {
varnum = 20 ;
(fonction(){
alerte(num);
})()
})();
})();
Une fois ce code exécuté, 20 est imprimé Si « var num = 20 ; » est supprimé, alors 10 est imprimé de la même manière, si « var num = 20 ; » est supprimé.
"var num = 10", alors une erreur indéfinie se produira.
3. Chaîne de portée
Grâce à la division des étendues JavaScript, les étendues d'accès JavaScript peuvent être connectées dans une structure arborescente chaînée.
Une fois que la chaîne de portée de JavaScript pourra être clairement comprise, les variables et les fermetures de JavaScript seront alors très claires.
La méthode suivante utilise le dessin pour dessiner la chaîne de portée.
3.1 Règles de tirage :
1) La chaîne de portée est un tableau d'objets
2) Tous les scripts sont des chaînes de niveau 0, chaque objet occupe une position
3) Chaque fois que vous voyez une fonction s'étendre dans une chaîne, développez-la niveau par niveau.
4) Lors de l'accès, regardez d'abord la fonction actuelle. Si elle n'est pas définie, vérifiez la chaîne.
5) Répétez cette opération jusqu'à la chaîne de niveau 0
3.2 Exemples
Regardez le code ci-dessous :
Copiez le code comme suit :
varnum = 10 ;
var func1 = fonction() {
varnum = 20 ;
var func2 = fonction() {
varnum = 30 ;
alerte(num);
} ;
fonction2();
} ;
var func2 = fonction() {
varnum = 20 ;
var func3 = fonction() {
alerte(num);
} ;
fonction3();
} ;
fonction1();
fonction2();
Analysons ce code :
-> Tout d'abord, l'ensemble du code est une portée globale et peut être marqué comme une chaîne de portée de niveau 0. Ensuite, il y a un tableau.
var link_0 = [num, func1, func2];//Décrit ici avec un pseudo-code
-> Ici func1 et func2 sont toutes deux des fonctions, donc deux chaînes de portée de niveau 1 sont dérivées, à savoir
var link_1 = { func1: [ num, func2 ] }; // Décrit ici avec un pseudo-code
var link_1 = { func2: [ num, func3 ] }; // Décrit ici avec un pseudo-code
-> La première chaîne de niveau 1 dérive de la chaîne de niveau 2
var link_2 = { func2: [ num ] }; // Décrit ici avec un pseudo-code
-> La chaîne de deuxième niveau 1 n'a aucune variable définie et est une chaîne vide, qui s'exprime sous la forme
var lien_2 = { func3 : [ ] } ;
-> En intégrant le code ci-dessus, la chaîne de portée peut être exprimée comme suit :
Copiez le code comme suit :
//Décrit ici avec un pseudo-code
var link = [ // Chaîne de niveau 0
nombre,
{ func1 : [ // La première chaîne de niveau 1
nombre,
{ func2 : [ // Chaîne de niveau 2
num
] }
]},
{ func2 : [ // La chaîne de deuxième niveau 1
nombre,
{ fonction3 : [] }
]}
];
-> Représenté sous forme d'image comme
Figure : 01_01 scope chain.bmp
Remarque : utilisez le code js pour exprimer le diagramme en chaîne, et il sera très clair une fois mis en surbrillance.
Avec ce diagramme de chaîne de portée, vous pouvez clairement comprendre comment s'effectue l'accès aux variables :
Lorsque vous devez utiliser une variable, recherchez d'abord la variable sur la chaîne actuelle. Si vous la trouvez, utilisez-la directement.
Recherchez vers le haut ; s'il n'est pas trouvé, recherchez la chaîne de portée à un niveau jusqu'à la chaîne de portée à 0 niveau.
Si vous pouvez déterminer très clairement le niveau de la chaîne de portée auquel appartient une variable, alors lors de l'analyse de JavaScript
C'est très simple lorsqu'il s'agit de coder et d'utiliser des fonctionnalités JavaScript avancées telles que les fermetures (du moins pour moi).
3. Promotion du nom de variable et promotion du nom de fonction
Avec les chaînes de portées et les règles d’accès aux variables, il existe un problème très épineux. Examinons d’abord ce qui suit.
Code Javascript :
Copiez le code comme suit :
varnum = 10 ;
var func = fonction() {
alerte(num);
varnum = 20 ;
alerte(num);
} ;
fonction();
Quel sera le résultat de l’exécution ? Vous pouvez y réfléchir, je ne révélerai pas encore la réponse.
Analysons d'abord ce code.
Il existe une chaîne de portée de niveau 0 dans ce code, qui contient les membres num et func. Sous func, il existe une fonction de niveau 1.
Chaîne de domaine, qui contient le numéro de membre. Par conséquent, lors de l'appel de la fonction func, il sera détecté dans la portée actuelle.
La variable num a été définie, donc cette variable sera utilisée. Cependant, num n'a pas de valeur pour le moment, car le code.
Le code s'étend de haut en bas. Par conséquent, la première impression n'est pas définie et la deuxième impression est 20.
Avez-vous bien compris ?
Il est également courant en JavaScript de définir du code à l'arrière et de l'utiliser au début comme ceci
Question. A ce moment, c'est comme si la variable avait été définie au début, et le résultat ressemble au code suivant :
Copiez le code comme suit :
varnum = 10 ;
var func = fonction() {
var num;// On a l'impression que cela a été défini ici, mais il n'y a pas d'affectation.
alerte(num);
varnum = 20 ;
alerte(num);
} ;
fonction();
Ce phénomène est souvent appelé promotion de nom de variable. Il existe également une promotion de nom de fonction. Par exemple, le code suivant :
Copiez le code comme suit :
var func = fonction() {
alert("Appeler une fonction externe");
} ;
var foo = fonction() {
fonction();
var func = fonction() {
alert("Appeler la fonction interne");
} ;
fonction();
} ;
D'accord, à quoi ressemble ce code ? Ou alors il devrait y avoir quelque chose de différent, je ne laisse pas aux lecteurs le soin de réfléchir !
Je donnerai la réponse dans le prochain article.
En raison de ces différences, lors du développement réel, il est recommandé d'écrire toutes les variables au début.
C'est-à-dire que les variables sont définies au début de la fonction, à l'instar des dispositions du langage C. Cela est également vrai dans les bibliothèques js.
Ceci est fait, comme jQuery, etc.
4. Résumé
D'accord, cet article explique principalement en quoi consiste la portée lexicale de JavaScript et son explication.
Comment analyser la chaîne de scope et le statut d’accès des variables ? Terminons par un autre exercice ! ! !
Voyez quel est le résultat de l’exécution du code ci-dessous :
Copiez le code comme suit :
if( ! "a" dans la fenêtre) {
var a = "définir une variable" ;
}
alerte(a);