Explication détaillée de la classification de la portée des variables JavaScript et des techniques d'utilisation avec des exemples

La portée variable est un sujet que chaque langage de programmation touche, et c'est aussi un point de connaissance qu'un programmeur doit maîtriser. Avoir une compréhension approfondie de la portée variable vous aidera à écrire des programmes stables.

1. Classification des portées JavaScript
JavaScript a deux portées : globale (fenêtre) et niveau fonction (fonction). Le niveau de fonction (fonction) ne doit pas être compris comme un « niveau de bloc (niveau accolades {}) ».

2. Distinguer et définir les variables globales JavaScript et les variables locales
1.1 Les variables définies en dehors de toutes les fonctions, avec ou sans le mot-clé var, sont des variables globales. La variable globale est en fait analysée dans un attribut de l'objet window, nous pouvons donc y accéder dans la méthode "window.global variable name". Il est recommandé d'utiliser le nom de la variable pour y accéder directement sauf si nécessaire. L'exemple suivant montre la méthode la plus courante de définition de variables globales :

var msg1='This is message 1'; 
msg2='This is message 2'; 
alert(window.msg1); //This is message 1 使用window关键字进行访问 
alert(window.msg2); //This is message 2 
alert(msg1); //This is message 1 省略window关键字的访问方式 
alert(msg2); //This is message 2 
function otherFunction(){} //其它一些函数或对象声明代码 
var otherObject={};

1.2 Les variables globales peuvent également être définies et obtenues dans une fonction (environnement d'exécution de variables locales). La méthode de définition consiste à ne pas utiliser le mot-clé var, et le contenu de la variable globale peut être facilement obtenu dans l'environnement local, utilisez simplement le nom de la variable globale pour le référencer. Il convient de noter que si une variable locale portant le même nom que la variable globale est définie dans la fonction, alors le corps de la fonction utilisera d'abord sa propre variable locale. Si vous devez utiliser une variable globale portant le même nom à ce moment-là, veuillez ajouter le préfixe de la fenêtre. Par exemple :

var msg1='This is message 1'; 
var msg3='This is message 3'; 
function otherFunction() 
{ 
msg2='This is message 2'; //不使用var关键字，其实也是定义一个全局变量 
var msg3='Message 3'; 
alert(msg1); //This is message 1 （函数内当然可以访问到外面定义的全局变量，再深的函数嵌套一样能正确获到这个全局变量，这是JavaScript闭包的其中一种体现） 
alert(msg3); //Message 3 （局部变量msg3） 
alert(window.msg3); //This is message 3 （使用window前缀访问同名的全局变量msg3） 
alert(this.msg3); //This is message 3 （因为otherFunction ()定义在一个全局的环境中，此时otherFunction ()的this也是指向window，所有你看到window. msg3是等于this. msg3的） 
} 
otherFunction(); 
//otherFunction函数外面定义的msg1和里面定义的msg2依然是全局变量 
alert(window.msg1); //This is message 1 
alert(window.msg2); //This is message 2

2.1 En utilisant le mot-clé var, les variables définies dans le corps de la fonction sont des variables locales. Cette variable peut être utilisée par tous les blocs d'instructions ({}) et sous-fonctions ci-dessous. il. Cette variable est accessible n'importe où dans cette fonction, mais n'est pas accessible "directement" en dehors de cette fonction (les fermetures permettent un accès indirect, ou un accès proxy, ce point de connaissance dépasse le cadre de cet article). Par exemple :

function showMsg() 
{ 
if (true) 
{ 
var msg='This is message'; 
} 
alert(msg); //This is message 
} 
showMsg(); 
alert(typeof(msg)); //undefiend 
//这里在if {}大括号内定义的变量msg还能在if外showMsg()内访问到，但在showMsg()外则是无法访问的

2.2 Les variables de la fonction parent sont accessibles par la fonction enfant, mais les variables de la fonction enfant ne sont pas accessibles par la fonction parent. la portée au niveau des fonctions que nous avons mentionnée au début est cohérente. Il semble que le père soit plus joyeux et que le fils soit avare. Par exemple :

function showMsg() 
{ 
var MsgA='Message A'; 
this.setMsg=function(msg) 
{ 
var MsgB='Message B'; 
alert(MsgA); //Message A （子函数setMsg()可以访问父函数showMsg()的局部变量MsgA） 
} 
alert(MsgB); //MsgB未定义 （在父函数中不能访问其子函数中定义的变量MsgB） 
} 
var sm=new showMsg(); 
sm.setMsg('Message string');

3. Compétences d'utilisation
1 Afin d'éviter toute confusion ou écrasement de variables, n'oubliez pas d'ajouter le mot-clé var à la définition des variables locales (si nécessaire. , nous devons libérer activement la variable après utilisation (c'est-à-dire "nom de la variable = null"). Il est également recommandé que toutes les variables soient définies au début de chaque corps de fonction. Par exemple :

var msg='Message'; 
function showMsg() 
{ 
var msg; //这里即使不小心使用了与全局变量一样的变量名，也不用担心覆盖同名全局变量的问题 
var a; 
var b; 
var c; 
for (a=0;a<10;a++){} 
this.setMsg=function(){} 
}

2. Utilisez habilement les fonctions anonymes pour réduire les conflits de noms ou la pollution variable. Les deux morceaux de code suivants implémentent en fait la même fonction, et la façon dont le premier morceau de code est écrit est que vous pouvez utiliser en toute sécurité les noms de variables que vous souhaitez utiliser dans la fonction anonyme, etc., et vous n'êtes pas obligé de le faire. vous inquiétez des variables que vous définissez qui écrasent les définitions d'autres personnes ou vos propres définitions ailleurs.

//定义一个匿名函数，然后把代码丢到这个匿名函数里面，能有效减少命名冲突或变量污染，这是常见JS框架的做法 
(function() 
{ 
var msg='This is message'; 
alert(msg); 
})(); 
document.write(msg); //msg未定义 （匿名函数外的其它方法已无法调用msg这个变量） 
//----------------------------- 
var msg='This is message'; 
alert(msg);

3. Il n'est pas recommandé d'utiliser ceci à la place de window pour accéder aux variables globales dans les fonctions qui ne nécessitent pas d'instanciation. Normalement, les fonctions utilisant le mot-clé this doivent être traitées comme des classes JavaScript (j'aime préfixer le nom de la classe avec "cls"). Si les fonctions suivantes sont appelées uniquement comme fonctions ordinaires, le mot-clé this ne doit pas apparaître, car il s'agit généralement d'exploiter une variable globale. Exemple :

function clsMsg() 
{ 
this.msg='This is default message'; 
this.showMsg=function() 
{ 
alert(this.msg); 
} 
} 
sMsg=new clsMsg(); 
sMsg.msg='This is new message'; 
sMsg.showMsg();

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!