Explication détaillée de la portée js

Cet article présente principalement l'explication détaillée de js scope, qui a une certaine valeur de référence. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

1.Scope dans ES5

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

Code js, que pensez-vous qu'il produira ? La réponse est 10. Les étudiants qui connaissent Java doivent être un peu surpris. Pourquoi ? Parce que js est encore différent de java, 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)

Cette façon d'écrire est appelée expression de fonction immédiatement invoquée (IIFE). Si vous ne connaissez pas Baidu, cela crée en fait une portée locale pour les variables déclarées dans ce document. scope sont uniquement dans cette portée. Il est valide dans le bloc et n'est pas accessible de l'extérieur. L’avantage de cette façon d’écrire est qu’elle ne pollue pas les variables globales.

Une autre chose que je tiens à mentionner ici est 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. Comme suit :

a=10; 
   console.log(a)

Sortie 10. Ici, vous pouvez l'utiliser sans déclarer de variable. En fait, js fait une chose pour vous. Il exécutera le code suivant :

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

Vous pouvez l'essayer et l'utiliser directement dans la fonction sans déclarer la variable. Personnellement, je pense que cette approche flexible n'est pas très bonne. Cependant, dans ES6, il n’est plus recommandé d’utiliser des variables sans les déclarer.

Alors faisons quelque chose de plus avancé, qui est la
promotion variable. (Concept dans ES5, une nouvelle utilisation dans ES6 n'entraînera pas de promotion variable), regardez le code :

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

À votre avis, quel est le résultat ? undefined, avez-vous répondu correctement ? Peu importe si vous êtes confus, regardons ce qu'est la promotion de variable. En fait, il s'agit de promouvoir la déclaration de variable en haut de la fonction. En fait, le code ci-dessus deviendra comme ceci lorsque le js sera expliqué :

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

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

2. Scope dans ES6

En raison de nombreux problèmes dans ES5, dans ES6, la déclaration de var est remplacée par let, mais afin d'être compatible avec ES5 vous Vous pouvez toujours utiliser la variable précédente. Cependant, il est toujours recommandé d'utiliser let.

let ajoute une nouvelle portée à js qui est la portée du bloc. Regardez le code :

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

La sortie a n'est pas définie Ici, nous pouvons complètement utiliser Java et d'autres syntaxes pour comprendre la déclaration des variables, et les variables déclarées avec let ne peuvent pas être utilisées dans la déclaration de.

a=3
let a =10;
alert(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 le bloc
, les variables déclarées par ces commandes dans ce bloc formeront dès le début une portée fermée. Toute utilisation de ces variables avant déclaration entraînera une erreur. Bien sûr, lorsqu’il a expliqué pourquoi, il a mentionné la zone morte temporaire.
.Résumé (hors sujet)
Comme ES6 n'existe pas depuis longtemps, nous rencontrerons encore beaucoup d'écriture et d'utilisation d'ES5, il est donc important de comprendre JS es5 et es6, que ce soit en train de le faire. front-end ou back-end Tout le monde a plus ou moins de contact avec js. Maintenant que nous sommes entrés en contact avec lui, nous
devons en avoir une compréhension approfondie. Nous ne pouvons pas nous contenter d'écrire des fonctions. . De plus, le front-end n'est plus comme avant. Je le connais toujours très bien et je suis optimiste quant au développement de js.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Explication détaillée du prototype en JS

Comment convertir un pseudo-tableau en tableau via js

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!