Analyse approfondie de la portée des variables dans JS

Il existe deux étendues de variables : les variables globales et les variables locales. Cet article partage principalement avec vous une analyse approfondie de la portée variable dans JS, dans l'espoir d'aider tout le monde.

Variables globales

最外层函数定义的变量拥有全局作用域，即对任何内部函数来说，都是可以访问的：
    var n=10;
　　function f1(){
　　　　console.log(n);
　　}
　　f1(); // 输出10,说明全局变量n在函数内部被读取

Variables locales

局部变量：在函数内部声明的变量。函数内部的变量，外部无法读取。
　function f1(){
　　　　var n=10;
　　}
　　console.log(n); // 没有定义，说明函数内部的变量，外部无法读取。

Portée dans ES5

for(var i =0;i<10;i++){

}
console.log(i)

code js, pensez-vous qu'il sera affiché Quoi? La réponse est 10. Dans ES5, il n'y a que la portée globale et la portée des fonctions, et il n'y a pas de portée de bloc. Bien sûr, nous pouvons implémenter la fonction de portée de bloc. Regardez le code suivant :

(function(){
for(var i =0;i<10;i++){

}
})()
console.log(i)

La réponse est 1. Cette façon d'écrire est appelée une expression de fonction immédiatement invoquée (IIFE). Cela crée en fait une portée locale. Les variables déclarées dans cette portée sont uniquement. dans le bloc, il est valide en interne et n’est pas accessible en externe. L’avantage de cette façon d’écrire est qu’elle ne pollue pas les variables globales.
Je voudrais mentionner encore une chose ici, c'est-à-dire que dans ES5, la déclaration des variables n'est pas stricte dans ES5. Vous pouvez directement utiliser a=10 pour déclarer une variable globale.                                                                                                                                                                                                                                                     peut l'utiliser sans déclarer de variable. En fait, js a fait une chose pour vous. Il exécutera le code suivant :

a=10;console.log(a)

Ensuite, faisons quelque chose de plus avancé, à savoir la promotion variable. (Concepts dans ES5, la nouvelle utilisation dans ES6 n'entraînera pas de promotion variable), regardez le code :

var a=undefined;a=10;console.log(a)

Que produit le code ci-dessus ? Analysons-le :

a=10;
(function(){console.log(a)var a=1;
})();

Vous comprenez maintenant ce que signifie la promotion de variable. En fait, cela signifie mettre la déclaration au premier plan, donc le résultat n'est pas défini

var a=undefined;
a=10;
(function(){var a=undefined;
console.log(a)
a=1;
})();

Portée dans ES6

La sortie a n'est pas définie ici et les variables déclarées à l'aide de let ne peuvent pas être utilisées dans la déclaration.

for(let i=0;i<10;i++){
}console.log(a)

affichera a n'est pas défini, pourquoi ? L'ES6 de Ruan Yifeng indique que tant que la commande let existe dans la portée au niveau du bloc, les variables qu'elle déclare seront « liées » à cette zone et ne seront plus affectées par les influences externes. ES6 stipule clairement que s'il y a des commandes let et const dans un bloc, les variables déclarées par ces commandes dans ce bloc forment dès le début une portée fermée. Toute utilisation de ces variables avant déclaration entraînera une erreur.

a=3let a =10;alert(a)

Recommandations associées :

var a, b;

(function () {
    console.log(a);// undefined
    console.log(b);// undefined

    var a = b = 0;// (1)

    console.log(a);// 0
    console.log(b);// 0
})();

console.log('window', a);// window undefined
console.log('window', b);// window 0

Explication détaillée de la portée de la variable de fichier d'inclusion dans php

portée de la variable javascript, mémoire, fuite DOM Explication détaillée des exemples de problèmes

Introduction aux exemples de portée de variable 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!