Quelles sont les deux catégories de portées JavaScript ?

La portée JavaScript est divisée en deux catégories : la portée globale et la portée locale. Les variables sont définies comme des variables globales en dehors de la fonction, et les variables globales ont une portée globale, c'est-à-dire que tous les scripts et fonctions de la page Web peuvent être utilisés ; les variables sont déclarées comme portée locale à l'intérieur de la fonction, et la portée locale est généralement uniquement dans des fragments de code fixes (par exemple, une fonction) sont accessibles en interne.

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

La portée d'une variable fait référence à la plage valide de lecture et d'écriture de la variable dans le code du script, c'est-à-dire la zone du code du script où la variable peut être utilisée.

La portée des variables est principalement divisée en deux types : la portée globale et la portée locale (également appelée portée de la fonction).

Les variables dans la portée correspondante sont appelées respectivement variables globales et variables locales. Les variables globales sont déclarées en dehors de toutes les fonctions ; les variables locales sont des variables déclarées dans le corps de la fonction ou dans les paramètres nommés de la fonction.

Portée globale

Les variables sont définies comme des variables globales en dehors de la fonction. Les variables globales ont une portée globale : tous les scripts et fonctions de la page Web peuvent être utilisés.

Les objets accessibles n'importe où dans le code ont une portée globale. De manière générale, les situations suivantes ont une portée globale :

　1. La fonction la plus externe et les variables définies en dehors de la fonction la plus externe ont une portée globale

　2. qui ne sont pas définis et directement attribués sont automatiquement déclarés comme ayant une portée globale

　3. Toutes les propriétés de l'objet window ont une portée globale

Généralement, les propriétés intégrées de l'objet window ont une portée globale, par exemple, window.name. , fenêtre.emplacement, fenêtre.top, etc.

Portée locale

Les variables sont déclarées comme portée locale à l'intérieur de la fonction.

Contrairement à la portée globale, la portée locale n'est généralement accessible qu'à l'intérieur d'un fragment de code fixe (par exemple : fonction), le plus courant se trouve à l'intérieur d'une fonction, donc à certains endroits, vous verrez également des gens faire référence à cette portée comme est la portée de la fonction.

En bref, lorsque l'analyseur JS est exécuté, il construira d'abord un objet global dans l'environnement d'exécution. Les propriétés globales que nous définissons sont lues comme propriétés de l'objet, nous utilisons le mot-clé this et. Les objets de la fenêtre peuvent y accéder.

Les variables locales dans le corps de la fonction n'existent que dans l'objet appelant généré lorsque la fonction est exécutée. Les variables locales sont détruites immédiatement lorsque la fonction est exécutée.

Par conséquent, en programmation, nous devons réfléchir à la manière de déclarer les variables de manière raisonnable, ce qui non seulement réduit la surcharge de mémoire inutile, mais évite également en grande partie les problèmes de débogage causés par la définition répétée des variables et l'écrasement des variables précédemment définies.

Explication :

La portée d'une variable est étroitement liée à la méthode de déclaration. Les variables déclarées à l'aide de var ont une portée globale et une portée de fonction ; les variables déclarées à l'aide de let et const ont une portée globale et une portée locale.

Remarque : les variables globales au sens strict appartiennent aux propriétés de l'objet window, mais les variables déclarées par let et const n'appartiennent pas à l'objet window, ce ne sont donc pas des variables globales au sens strict. se référer à leurs portées. De ce point de vue, ce sont des variables globales.

Étant donné que var prend en charge la promotion de variable, la portée globale de la variable var est valide pour le code de script de la page entière ; alors que let et const ne prennent pas en charge la promotion de variable, donc la portée globale des variables let et const fait référence à la déclaration. La zone entière entre la fin du code de script de la page entière et la zone avant l'instruction de déclaration n'est pas valide.

De même, comme var prend en charge la promotion de variables, mais que let et const ne prennent pas en charge la promotion de variables, les variables locales déclarées à l'aide de var sont valides tout au long de la fonction, tandis que les variables locales déclarées à l'aide de let et const sont valides du début de l'instruction de déclaration jusqu'au la fin de la zone de fonction est valide. Il convient de noter que si la variable locale et la variable globale ont le même nom, dans la portée de la fonction, la variable locale écrasera la variable globale, c'est-à-dire que la variable locale fonctionnera dans le corps de la fonction en dehors du corps de la fonction ; la variable globale fonctionnera et la variable locale fonctionnera. La variable n'est pas valide et une erreur de syntaxe se produira lors du référencement des variables locales.

Exemple : Portée des variables

     var v1 = "JavaScript"; //全局变量
     let v2 = "JScript"; //全局变量
     let v3 = "Script"; //全局变量
     scopeTest();    //调用函数
     function scopeTest(){
         var lv = "aaa"; //局部变量
         var v1 = "bbb"; //局部变量
         let v2 = "ccc"; //局部变量

         console.log("函数体内输出的lv = " + lv); //aaa
         console.log("函数体内输出的v1 = " + v1); //bbb
         console.log("函数体内输出的v2 = " + v2); //ccc
         console.log("函数体内输出的v3 = " + v3); //Script
         //v4为全局变量，赋值在后面，因而值为undefined
         console.log("函数体内输出的v4 = " + v4);
     }
     var v4 = "VBScript"; //全局变量
     console.log("函数体外输出的lv = " + lv); //① 报ReferenceError错误
     console.log("函数体外输出的v1 = " + v1); //JavaScript
     console.log("函数体外输出的v2 = " + v2); //JScript
     console.log("函数体外输出的v3 = " + v3); //Script
     console.log("函数体外输出的v3 = " + v4); //VBScript

Le code de script ci-dessus déclare respectivement 4 variables globales et 3 variables locales. En dehors de la fonction scopeTest, les variables v1, v2, v3 et v4 sont des variables globales ; à l'intérieur du corps de la fonction scopeTest, lv et v2 sont des variables globales.

Nous voyons que les variables locales v1 et v2 ont les mêmes noms que les variables globales v1 et v2. Dans le corps de la fonction scopeTest, les variables locales v1 et v2 sont valides, donc les résultats de sortie de ces deux variables dans le corps de la fonction sont "bbb". " et "ccc" respectivement. "; En dehors du corps de la fonction, les variables globales v1 et v2 sont valides, donc en dehors du corps de la fonction, les résultats de sortie de ces deux variables sont respectivement "JavaScript" et "JScript".

De plus, les variables globales v3 et v4 ne sont pas écrasées dans le corps de la fonction, donc la valeur de la variable globale est sortie, donc le résultat de sortie de v3 à l'intérieur et à l'extérieur du corps de la fonction est "Script", tandis que l'affectation du La variable v4 est dans l'appel de fonction. Plus tard, le résultat de sortie de v4 dans le corps de la fonction est "indéfini", tandis que la sortie en dehors du corps de la fonction est après la déclaration, donc le résultat est "VBScript". lv est une variable locale, donc y accéder en dehors de la fonction signalera une erreur "ReferenceError".

Une fois le code ci-dessus exécuté dans le navigateur Chrome, ouvrez la console du navigateur et vous pourrez voir les résultats de sortie affichés dans la figure ci-dessous

La 18ème ligne de code affichée dans la figure ci-dessus (c'est-à-dire le commentaire dans l'exemple ① Code) lv n'est pas une erreur de référence définie En effet, la variable lv est une variable locale et n'est pas valide après avoir quitté la fonction. Commentez cette ligne de code, puis exécutez-la. À ce moment-là, ouvrez la console du navigateur et vous pourrez voir les résultats affichés dans l'image ci-dessous

[Apprentissage recommandé : Tutoriel avancé javascript]

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!