Cet article vous apporte une analyse complète de la portée de JavaScript (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.
La portée détermine le cycle de vie et la visibilité des variables. Les variables ne sont pas visibles en dehors de la portée.
La portée de JavaScript comprend : la portée du module, la portée de la fonction, la portée du bloc, la portée lexicale et la portée globale.
Les variables définies en dehors de la portée de toute fonction, bloc ou module ont une portée globale. Les variables globales sont accessibles n'importe où dans le programme.
La création de variables globales devient plus difficile lorsque le système de modules est activé, mais cela peut toujours être fait. Vous pouvez définir une variable en HTML qui doit être déclarée en dehors de la fonction, créant ainsi une variable globale :
<script> let GLOBAL_DATA = { value : 1}; </script> console.log(GLOBAL_DATA);
Créer des variables globales est beaucoup plus simple lorsqu'il n'y a pas de système de modules. Les variables déclarées en dehors des fonctions dans n'importe quel fichier sont des variables globales.
Les variables globales s'exécutent tout au long du cycle de vie du programme.
Une autre façon de créer des variables globales est d'utiliser l'objet global window
n'importe où dans votre programme :
window.GLOBAL_DATA = { value: 1 };
De cette façon, la variable GLOBAL_DATA
sera partout.
console.log(GLOBAL_DATA)
Mais vous savez aussi que cette approche est mauvaise.
Si les modules ne sont pas activés, les variables déclarées en dehors de toutes les fonctions sont des variables globales. Dans un module, les variables déclarées en dehors d'une fonction sont masquées et ne sont pas disponibles dans d'autres modules à moins d'être explicitement exportées.
Les exportations rendent des fonctions ou des objets disponibles pour d'autres modules. Dans cet exemple, j'ai exporté une fonction depuis le fichier du module sequence.js
:
// in sequence.js export { sequence, toList, take };
Le module actuel peut utiliser des fonctions ou des objets d'autres modules en les important.
import { sequence, toList, toList } from "./sequence";
Dans une certaine mesure, nous pouvons considérer un module comme une fonction exécutée automatiquement qui prend les données importées en entrée puis renvoie les données exportées.
La portée de la fonction signifie que les paramètres et les variables définis dans une fonction sont visibles n'importe où dans la fonction, mais pas à l'extérieur de la fonction.
Ce qui suit est une fonction exécutée automatiquement, appelée IIFE.
(function autoexecute() { let x = 1; })(); console.log(x); //Uncaught ReferenceError: x is not defined
IIFE signifie expression de fonction immédiatement invoquée, qui est une fonction qui s'exécute immédiatement après avoir été définie.
Les variables déclarées avec var
n'ont qu'une portée de fonction. De plus, les variables déclarées avec var
sont promues en haut de leur portée. De cette façon, ils sont accessibles avant d’être déclarés. Jetez un œil au code suivant :
function doSomething(){ console.log(x); var x = 1; } doSomething(); //undefined
Cela n'arrive pas dans let
. Les variables déclarées avec let
ne sont accessibles qu'après définition.
function doSomething(){ console.log(x); let x = 1; } doSomething(); //Uncaught ReferenceError: x is not defined
Les variables déclarées avec var
peuvent être redéclarées plusieurs fois dans le même scope :
function doSomething(){ var x = 1 var x = 2; console.log(x); } doSomething();
Les variables déclarées avec let
ou const
ne peuvent pas être redéclarées dans le même scope Redéclaration dans le champ d'application :
function doSomething(){ let x = 1 let x = 2; } //Uncaught SyntaxError: Identifier 'x' has already been declared
Peut-être pouvons-nous cesser de nous en soucier puisque var
commence à devenir obsolète.
La portée du bloc est définie avec des accolades. Il est séparé par {
et }
.
Les variables déclarées avec let
et const
peuvent être soumises à la portée du bloc et ne sont accessibles que dans le bloc dans lequel elles sont définies.
Considérez le code suivant pour la portée du bloc let
:
let x = 1; { let x = 2; } console.log(x); //1
En revanche, une déclaration var
n'est pas liée par la portée du bloc :
var x = 1; { var x = 2; } console.log(x); //2
Un autre problème courant consiste à utiliser des opérations asynchrones comme setTimeout()
dans une boucle. Le code de boucle suivant affichera le numéro 5 cinq fois.
(function run(){ for(var i=0; i<5; i++){ setTimeout(function logValue(){ console.log(i); //5 }, 100); } })();
Une instruction de boucle let
avec une déclaration for
crée une nouvelle variable à chaque fois qu'elle boucle et la définit sur la portée du bloc. La prochaine boucle de code affichera 0 1 2 3 4 5
.
(function run(){ for(let i=0; i<5; i++){ setTimeout(function log(){ console.log(i); //0 1 2 3 4 }, 100); } })();
La portée lexicale est la capacité d'une fonction interne à accéder à la portée externe dans laquelle elle est définie.
Regardez ce code :
(function autorun(){ let x = 1; function log(){ console.log(x); }; function run(fn){ let x = 100; fn(); } run(log);//1 })();
log
Une fonction est une fermeture. Il fait référence à la variable autorun()
de la fonction parent x
plutôt qu'à la variable run()
dans la fonction. x
est la portée lexicale de la fonction autorun()
. log()
Regardez l'exemple suivant :
let x0 = 0; (function autorun1(){ let x1 = 1; (function autorun2(){ let x2 = 2; (function autorun3(){ let x3 = 3; console.log(x0 + " " + x1 + " " + x2 + " " + x3);//0 1 2 3 })(); })(); })();
peuvent accéder aux autorun3()
variables locales. Les variables x3
et x1
et les variables globales x2
sont également accessibles depuis des fonctions externes. x0
"use strict"; x = 1; console.log(x) //Uncaught ReferenceError: x is not defined
x = 1; console.log(x); //1
Dans un module, les variables déclarées en dehors des fonctions sont masquées et ne peuvent être utilisées dans d'autres modules que si elles sont explicitement exportées.
La portée de la fonction signifie que les paramètres et les variables définis dans une fonction sont visibles n'importe où dans la fonction.
Les variables déclarées avec let
et const
ont une portée de bloc. var
Aucune portée de blocage.
[Recommandations associées : Tutoriel vidéo 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!