Avant d'en apprendre davantage sur la portée des variables en JavaScript, nous devons clarifier quelques points :
•La portée variable de JavaScript est basée sur sa chaîne de portée unique.
•JavaScript n'a pas de portée au niveau du bloc.
•Les variables déclarées dans une fonction sont définies tout au long de la fonction.
1. Chaîne de portée JavaScript
Regardez d’abord le code suivant :
Copiez le code comme suit :
<script type="text/javascript"> var rain = 1; function rainman(){ var man = 2; var innerVar = 4; alert(rain); } rainman(); //Appelle la fonction rainman</script>
Observez le code d'alerte (pluie);. JavaScript vérifie d'abord si la variable rain est définie dans la fonction interne. Si elle est définie, la variable rain dans la fonction interne est utilisée. Si la variable rain n'est pas définie dans la fonction interne, JavaScript continuera à vérifier si la variable rain est définie. est défini dans la fonction rainman. Dans ce code, la variable rain n'est pas définie dans le corps de la fonction rainman, donc le moteur JavaScript continuera à rechercher (objet global) pour voir si la pluie est définie dans l'objet global, nous avons ; pluie définie = 1, donc le résultat final apparaîtra « 1 ».
Chaîne de portée : lorsque JavaScript doit interroger une variable x, il recherchera d'abord le premier objet de la chaîne de portée. Si le premier objet ne définit pas la définition, la recherche se poursuivra, et ainsi de suite.
Le code ci-dessus implique trois objets de chaîne de portée, dans l'ordre : inner, rainman et window.
2. Dans le corps de la fonction, les variables locales ont une priorité plus élevée que les variables globales du même nom.
Copiez le code comme suit :
<script type="text/javascript"> var rain = 1; //Définissez la variable globale rain function check(){ var rain = 100; //Définissez la variable locale rain alert( rain ); ici } check (); alert( rain ); //1 apparaîtra ici</script>
3. JavaScript n'a pas de portée au niveau du bloc.
C'est également la partie où JavaScript est plus flexible que les autres langages.
Observez attentivement le code ci-dessous, vous constaterez que les portées des variables i, j et k sont les mêmes et qu'elles sont globales dans tout le corps de la fonction pluie.
Copiez le code comme suit :
<script type="text/javascript"> function rainman(){ // Il y a trois variables locales ijk dans le corps de la fonction rainman var i = 0; if ( 1 ) { var j = 0; k < 3; k++) { alert( k ); //Pop up 0 1 2 respectivement } alert( k ); //Pop up 3 } alert( j );
4. Les variables déclarées dans la fonction sont définies tout au long de la fonction.
Observez d’abord ce code :
Copiez le code comme suit :
<script type="text/javascript"> function rain(){ var x = 1; function man(){ x = 100; man( //Appeler man alert( x ); } rain(); //Appeler la pluie</script>
Le code ci-dessus montre que la variable x peut être utilisée dans tout le corps de la fonction pluie et peut être réaffectée. En raison de cette règle, des résultats « incroyables » seront produits, respectez le code ci-dessous.
Copiez le code comme suit :
<script type="text/javascript"> var x = 1; function rain(){ alert( x ); //Pop up 'indéfini' au lieu de 1 var x = 'rain-man'; /pop 'homme-de-pluie' } rain();</script>
En effet, la variable locale x dans la fonction rain est définie dans tout le corps de la fonction (var x= 'rain-man', déclaré), donc la variable globale x du même nom est masquée dans tout le corps de la fonction rain. La raison pour laquelle « non défini » apparaît ici est que lorsque alert(x) est exécuté pour la première fois, la variable locale x n'a pas encore été initialisée.
La fonction pluie ci-dessus est donc équivalente à la fonction suivante :
Copiez le code comme suit :
function rain(){ var x; alert( x ); x = 'homme-pluie';
5. Les variables définies sans utiliser le mot-clé var sont des variables globales.
Copiez le code comme suit :
<script type="text/javascript"> function rain(){ x = 100; //La variable globale x est déclarée et attribuée} rain( //100 apparaîtra </script>
C'est également une erreur courante parmi les débutants en JavaScript, laissant involontairement de nombreuses variables globales.
6. Les variables globales sont toutes les propriétés de l'objet fenêtre.
Copiez le code comme suit :
<script type="text/javascript"> var x = 100; alert( window.x);//pop up 100 alert(x);</script>
Equivalent au code suivant
Copiez le code comme suit :
<script type="text/javascript"> window.x = 100; alert( window.x );