Qu'est-ce que la chaîne de portée et comment fonctionne-t-elle ?

Présentation

Comprendre comment accéder aux variables en JavaScript est fondamental pour écrire du code propre, efficace et sans bug. La chaîne de portée est un concept critique qui régit l'accès aux variables et le contexte d'exécution du code.

Dans cet article, nous expliquerons ce qu'est la chaîne de portée, comment elle fonctionne en JavaScript et fournirons des exemples pratiques pour illustrer son comportement.

Qu'est-ce que la chaîne de portée ?

La chaîne de portée est un mécanisme en JavaScript qui détermine l'ordre dans lequel les variables et les fonctions sont recherchées lors de l'exécution.

Lorsqu'une variable est référencée dans votre code, JavaScript la recherche dans l'ordre suivant :

? Portée locale : La fonction ou le bloc où la variable est directement déclarée.

??‍? Portées externes : Enfermer des fonctions ou des blocs, se déplaçant vers l'extérieur couche par couche.

? Portée mondiale : La portée la plus externe du programme.

Si la variable n'est trouvée dans aucune de ces étendues, JavaScript renvoie une ReferenceError.

Comment fonctionne la chaîne de portée ?

1. Portée locale
Les variables déclarées à l’intérieur d’une fonction appartiennent à la portée de cette fonction et ne sont pas accessibles en dehors de celle-ci.

function localExample() {
  let message = "Hello, Local Scope!";
  console.log(message); // Works
}
console.log(message); // ReferenceError: message is not defined

2. Fonctions imbriquées et étendues externes

Une fonction imbriquée peut accéder aux variables de sa fonction parent grâce à la chaîne de portée.

function outer() {
  let outerVariable = "I'm in the outer function!";

  function inner() {
    console.log(outerVariable); // Accessible due to the scope chain
  }

  inner();
}
outer();

3. Portée mondiale

Les variables déclarées en dehors de toute fonction font partie de la portée globale et sont accessibles partout (sauf à l'intérieur des modules).

let globalVariable = "I'm in the global scope!";
function showGlobal() {
  console.log(globalVariable); // Accessible
}
showGlobal();

4. Observation

Lorsqu'une variable dans une portée locale a le même nom qu'une variable dans une portée externe, la variable locale « ombre » la variable externe.

let name = "Global Name";

function greet() {
  let name = "Local Name";
  console.log(name); // Outputs: "Local Name"
}

greet();
console.log(name); // Outputs: "Global Name"

Exemple pratique de la chaîne de portée

Montrons comment la chaîne de portée résout l'accès aux variables :

let globalVar = "Global";

function outerFunction() {
  let outerVar = "Outer";

  function innerFunction() {
    let innerVar = "Inner";

    console.log(innerVar);   // Found in local scope
    console.log(outerVar);   // Found in outer scope
    console.log(globalVar);  // Found in global scope
  }

  innerFunction();
}
outerFunction();

Sortie :

Inner
Outer
Global

Voici ce qui se passe :

1️⃣ innerVar se trouve dans la portée locale de innerFunction.
2️⃣ externalVar se trouve dans la portée parent (externe) de outerFunction.
3️⃣ globalVar se trouve dans la portée globale car elle n'est pas définie dans les portées interne ou externe.

La chaîne de portée et les fermetures

Les fermetures en JavaScript exploitent la chaîne de portée pour conserver l'accès aux variables de fonction externes même après l'exécution de la fonction externe.

function makeCounter() {
  let count = 0;

  return function () {
    count++;
    return count;
  };
}

const counter = makeCounter();
console.log(counter()); // Outputs: 1
console.log(counter()); // Outputs: 2

Ici, la fonction interne forme une fermeture sur le nombre, la préservant dans la chaîne de portée même après la fin de l'exécution de makeCounter.

Conclusion

La chaîne de portées est un élément essentiel du contexte d’exécution de JavaScript. En comprenant comment la chaîne de portée résout l'accès aux variables, vous pouvez écrire un code plus clair et plus prévisible. Des fonctions imbriquées aux fermetures, la maîtrise de ce concept élèvera vos compétences JavaScript et améliorera votre processus de débogage.

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!