Analyse complète de la portée de JavaScript (avec code)

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.

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.

Portée du module

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.

Portée de la fonction

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.

Portée du bloc

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);
  }
})();

Portée lexicale

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

Une fonction de fermeture a accès au scope dans lequel elle a été créée, et non à son propre scope. La portée de la fonction locale de

est la portée lexicale de la fonction autorun(). log()

Chaîne de portées

Chaque portée a un lien vers la portée parent. Lors de l'utilisation de variables, JavaScript parcourt la chaîne de portées jusqu'à ce qu'il trouve la variable demandée ou atteigne la portée globale (c'est-à-dire la fin de la chaîne de portées).

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
    })();
  })();
})();

Les fonctions internes

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

Il renverra une erreur en mode strict si la variable n'est pas trouvée.

"use strict";
x = 1;
console.log(x)
//Uncaught ReferenceError: x is not defined

Le mode non strict est également appelé "mode bâclé", qui crée une variable globale à la hâte.

x = 1;
console.log(x); //1

Résumé

Les variables définies dans la portée globale peuvent être utilisées n'importe où dans le programme.

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!