Maison > interface Web > js tutoriel > Analyse approfondie de la portée des variables dans JS

Analyse approfondie de la portée des variables dans JS

小云云
Libérer: 2018-03-08 15:43:30
original
1301 Les gens l'ont consulté


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在函数内部被读取
Copier après la connexion

Variables locales

局部变量:在函数内部声明的变量。函数内部的变量,外部无法读取。
 function f1(){
    var n=10;
  }
  console.log(n); // 没有定义,说明函数内部的变量,外部无法读取。
Copier après la connexion

Portée dans ES5

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

}
console.log(i)
Copier après la connexion

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)
Copier après la connexion

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)
Copier après la connexion

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)
Copier après la connexion

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

a=10;
(function(){console.log(a)var a=1;
})();
Copier après la connexion

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;
})();
Copier après la connexion
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)
Copier après la connexion
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)
Copier après la connexion
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(&#39;window&#39;, a);// window undefined
console.log(&#39;window&#39;, b);// window 0
Copier après la connexion
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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal