Comprendre les fermetures JavaScript : un guide complet

Comprendre les fermetures JavaScript : un guide complet.

Qu’est-ce qu’une fermeture ?

Une fermeture est un concept JavaScript fondamental dans lequel une fonction interne a accès aux variables et aux paramètres de sa fonction externe (englobante), même après que la fonction externe a fini de s'exécuter. En termes plus simples, une fermeture permet à une fonction de « se souvenir » et d'accéder aux variables depuis sa portée externe même lorsque la fonction est exécutée dans une portée différente.

Les trois portées d’une fermeture

Chaque fermeture en JavaScript a accès à trois portées :

• Sa propre portée (variables définies à l'intérieur de la fonction)
• Variables de la fonction externe (variables de sa fonction parent)
• Variables globales (variables disponibles dans toute l'application)

Cadrage lexical : le fondement

Comprenons la portée lexicale avec un exemple de base :

function init() {
  var name = "Mozilla"; // local variable created by init
  function displayName() {
    // inner function
    console.log(name); // uses variable declared in parent function
  }
  displayName();
}
init();

Dans cet exemple :

• La fonction init() crée un nom de variable locale et une fonction interne displayName()
• displayName() est une fonction interne qui n'existe que dans init()
• displayName() n'a pas de variables locales propres
• En raison de la portée lexicale, il a accès aux variables dans sa portée parent, y compris le nom

Comprendre les fermetures en action

Regardons une version légèrement modifiée qui démontre la fermeture :

function makeFunc() {
  const name = "Mozilla";
  function displayName() {
    console.log(name);
  }
  return displayName;
}

const myFunc = makeFunc();
myFunc();

Points clés à comprendre :

• Cela ressemble à l'exemple précédent, mais il y a une différence cruciale
• Au lieu d'exécuter la fonction interne immédiatement, nous la renvoyons
• Même si makeFunc() a fini de s'exécuter, myFunc a toujours accès à la variable name
• Cela est possible car la fonction maintient une référence à son environnement lexical

Exemple pratique : usine de fonctions

Voici un exemple plus pratique qui démontre le pouvoir des fermetures :

function makeAdder(x) {
  return function(y) {
    return x + y;
  };
}

const add5 = makeAdder(5);
const add10 = makeAdder(10);

console.log(add5(2));  // outputs 7
console.log(add10(2)); // outputs 12

Décomposons ce qui se passe :

• makeAdder est une usine de fonctions - elle crée des fonctions personnalisées
• Chaque fonction créée se souvient de la valeur de x qui a été transmise à makeAdder
• add5 et add10 sont tous deux des fermetures :

Ils partagent la même définition de fonction
Mais ils ont des environnements lexicaux différents
Dans l'environnement d'add5, x vaut 5
Dans l'environnement d'add10, x vaut 10

Pourquoi les fermetures sont importantes

Les fermetures sont puissantes car elles permettent :

1. Confidentialité des données : les variables à l'intérieur de la fermeture restent privées et ne sont pas accessibles de l'extérieur
2. Préservation de l'état : ils peuvent maintenir l'état entre les appels de fonction
3. Usines de fonctions : vous pouvez créer des fonctions spécialisées avec des paramètres prédéfinis
4. Modèles de module : ils sont fondamentaux pour le modèle de module en JavaScript

Conclusion

Comprendre les fermetures est crucial pour les développeurs JavaScript, car elles sont largement utilisées dans les modèles, frameworks et bibliothèques JavaScript modernes. Ils fournissent un moyen de créer des variables privées et de maintenir l'état dans la programmation fonctionnelle tout en gardant votre code propre et maintenable.

Rappelez-vous : Une fermeture n'est pas seulement une fonction à l'intérieur d'une autre fonction - c'est une fonction qui a accès aux variables dans sa portée externe et maintient cet accès même après la fin de l'exécution de la fonction externe.

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!