Analyse complète des variables JavaScript_Connaissances de base

La portée de la variable est la zone du programme où la variable est définie.
Regardons d'abord un exemple :

/*Code 1*/

var scope = "global ";
function checkScope() {
 var scope = "local ";
 function childCheck() {
  var scope = "childLocal ";
  document.write(scope);
 }
 function childUndefined() {
  document.write(scope);
  var scope;
 }
 function childOverride() {
  scope = "childOverride ";
  document.write(scope);
 }
 document.write(scope); //输出"local"
 childCheck();   //输出"childLocal"
 childUndefined();  //输出"undefined"
 childOverride();  //输出"childOverride"
 document.write(scope); //输出"childOverride"
}
checkScope();    //输出"local childLocal undefinedchildOverride childOverride"
document.write(scope);  //输出"global "

Portée mondiale et portée locale
Les variables globales ont une portée globale et sont définies partout en Javascript ; les variables déclarées à l'intérieur d'une fonction sont des variables locales, et leur portée est locale et ne sont définies que dans le corps de la fonction. Le résultat suivant ne devrait pas surprendre les lecteurs.
/* Code 2 */

var scope = "global";
function checkScope() {
 var scope = "local";
 document.write(scope);
}
checkScope();   //输出"local"
document.write(scope); //输出"global"

Vous pouvez utiliser des variables dans la portée de la variable globale sans l'instruction var, mais vous devez utiliser l'instruction var lors de la déclaration des variables locales, sinon elle sera considérée comme une référence à la variable globale. Regardez le code ci-dessous :
/* Code 3 */

var scope = "global";
function checkScope() {
 scope = "local";
 document.write(scope);
}
checkScope();   //输出"local"
document.write(scope); //输出"local"

Aucune portée de blocage
Javascript n'a pas de portée au niveau du bloc et les variables déclarées dans une fonction sont définies dans toute la fonction. Le code suivant peut surprendre les lecteurs inconnus :
/* Code 4 */

var scope = "global";
function checkScope() {
 document.write(scope); //语句4.1
 var scope = "local"; //语句4.2
 document.write(scope);
}
checkScope();   //输出"undefinedlocal"

Étant donné que les variables déclarées dans l'instruction 4.1 (var scope = "local";) sont valides dans toute la portée de la fonction checkScope, lorsque l'instruction 4.2 (document.write(scope);) est exécutée, la portée fait référence aux variables locales. Pour le moment, la portée de la variable locale n'a pas été définie, donc « non défini » est affiché. Par conséquent, une bonne pratique de programmation consiste à regrouper toutes les déclarations de variables au début de la fonction.

Après avoir compris le contenu ci-dessus, les lecteurs ne devraient pas être confus s'ils regardent le code 1.
Variables d'attribut de l'objet
Les variables d'attribut des objets sont relativement faciles à comprendre. Les lecteurs qui regardent le code suivant ne doivent pas être confus.
/* Code 5 */

var scope = "global ";
var obj = new Object();
obj.scope = "object ";
obj.checkScope = function () {
 var scope = "loacl ";
 document.write(scope);   //输出"loacl"
 document.write(this.scope);  //输出"object"
 document.write(window.scope); //输出"global"
}
obj.checkScope(); //输出"loacl object global"

La soi-disant portée fait référence à la plage valide de cette variable dans le bloc de code. Si vous ne comprenez pas la portée de JavaScript, il peut être difficile de déboguer votre code.

Dans une fonction, si vous utilisez var pour déclarer une variable, la portée de la variable est limitée à l'intérieur de la fonction et le code extérieur à la fonction ne peut pas accéder à la variable. Si vous déclarez une fonction au sein de cette fonction, la fonction interne peut également accéder à cette variable.

À l'inverse, si var n'est pas utilisé lors de la déclaration d'une variable, alors la portée de cette variable n'est pas limitée à cette fonction. Le moteur JavaScript vérifiera si la variable a été définie dans la portée globale. Si la variable n'a pas été définie, elle sera définie comme variable globale.

Les fonctions peuvent accéder aux variables dans la même portée :

var foo = 'hello';

var sayHello = function() {
 console.log(foo);
};

sayHello();   // logs 'hello'
console.log(foo); // also logs 'hello'

Le code en dehors de la portée de la variable ne peut pas accéder à la variable :

var sayHello = function() {
 var foo = 'hello';
 console.log(foo);
};

sayHello();   // logs 'hello'
console.log(foo); // doesn't log anything

N'utilisez pas de variables portant le même nom dans le scope, mais ayant des valeurs différentes :

var foo = 'world';

var sayHello = function() {
 var foo = 'hello';
 console.log(foo);
};

sayHello();   // logs 'hello'
console.log(foo); // logs 'world'

Une fois la fonction définie, vous pouvez voir les changements dans les valeurs des variables​​dans la fonction :

var myFunction = function() {
 var foo = 'hello';

 var myFn = function() {
  console.log(foo);
 };

 foo = 'world';

 return myFn;
};

var f = myFunction();
f(); // logs 'world' -- haha

Les portées traversent également — fermetures

// 一个自执行的匿名函数
(function() {
 var baz = 1;
 var bim = function() { alert(baz); };
 bar = function() { alert(baz); };
})();

console.log(baz); // 在函数外面不能访问 baz

bar(); // 声明 bar 的时候并没有用 var
  // 所以 bar 是一个全局变量; 但是，
  // bar 和 baz 在相同的作用域内被定义,
  // 所以 bar 可以访问 baz
  // 其实 bar 是个闭包函数

bim(); // bim 的作用域只限于匿名函数内部，
  // 所以这里不能调用

Complet

La soi-disant portée fait référence à la plage valide de cette variable dans le bloc de code. Si vous ne comprenez pas la portée de JavaScript, il peut être difficile de déboguer votre code.

Dans une fonction, si vous utilisez var pour déclarer une variable, la portée de la variable est limitée à l'intérieur de la fonction et le code extérieur à la fonction ne peut pas accéder à la variable. Si vous déclarez une fonction au sein de cette fonction, la fonction interne peut également accéder à cette variable.

À l'inverse, si var n'est pas utilisé lors de la déclaration d'une variable, alors la portée de cette variable n'est pas limitée à cette fonction. Le moteur JavaScript vérifiera si la variable a été définie dans la portée globale. Si la variable n'a pas été définie, elle sera définie comme variable globale.

Les fonctions peuvent accéder aux variables dans la même portée :

var foo = 'hello';

var sayHello = function() {
 console.log(foo);
};

sayHello();   // logs 'hello'
console.log(foo); // also logs 'hello'

Le code en dehors de la portée de la variable ne peut pas accéder à la variable :

var sayHello = function() {
 var foo = 'hello';
 console.log(foo);
};

sayHello();   // logs 'hello'
console.log(foo); // doesn't log anything

N'utilisez pas de variables portant le même nom dans le scope, mais ayant des valeurs différentes :

var foo = 'world';

var sayHello = function() {
 var foo = 'hello';
 console.log(foo);
};

sayHello();   // logs 'hello'
console.log(foo); // logs 'world'

Une fois la fonction définie, vous pouvez voir les changements dans les valeurs des variables​​dans la fonction :

var myFunction = function() {
 var foo = 'hello';

 var myFn = function() {
  console.log(foo);
 };

 foo = 'world';

 return myFn;
};

var f = myFunction();
f(); // logs 'world' -- haha

Les portées traversent également — fermetures

// 一个自执行的匿名函数
(function() {
 var baz = 1;
 var bim = function() { alert(baz); };
 bar = function() { alert(baz); };
})();

console.log(baz); // 在函数外面不能访问 baz

bar(); // 声明 bar 的时候并没有用 var
  // 所以 bar 是一个全局变量; 但是，
  // bar 和 baz 在相同的作用域内被定义,
  // 所以 bar 可以访问 baz
  // 其实 bar 是个闭包函数

bim(); // bim 的作用域只限于匿名函数内部，
  // 所以这里不能调用