Fermetures JavaScript en profondeur : libérer la puissance de la portée lexicale

Fermetures JavaScript en profondeur : un guide complet

Les fermetures sont l'un des concepts les plus fondamentaux et les plus puissants de JavaScript. Ils permettent aux fonctions de conserver l'accès à leur portée, même après l'exécution de la fonction externe. Cela fait des fermetures un outil essentiel pour créer des variables privées, gérer l'état et concevoir des modèles sophistiqués comme le curry et l'application partielle.

---

1. Que sont les fermetures ?

Une fermeture est créée lorsqu'une fonction "se souvient" de sa portée lexicale, même lorsque la fonction est exécutée en dehors de cette portée.

Définition :

Une fermeture est une fonction qui a accès aux variables de sa fonction englobante, même après le retour de la fonction externe.

---

2. Syntaxe des fermetures

Les fermetures sont créées chaque fois qu'une fonction imbriquée est renvoyée ou utilisée d'une manière qui persiste au-delà de l'exécution de sa fonction parent.

function outerFunction() {
  const outerVariable = "I'm an outer variable";

  function innerFunction() {
    console.log(outerVariable); // Access outerVariable
  }

  return innerFunction;
}

const closureFunction = outerFunction();
closureFunction(); // Output: "I'm an outer variable"

---

3. Comment fonctionnent les fermetures

Les fermetures exploitent la portée lexicale de JavaScript :

• Portée lexicale : La portée dans laquelle une fonction est déclarée détermine à quelles variables elle a accès.

Lorsque externalFunction revient, son contexte d'exécution est détruit, mais la innerFunction renvoyée conserve l'accès à externalVariable en raison de la fermeture.

---

4. Exemples de fermetures

a) Création de variables privées

function counter() {
  let count = 0; // Private variable

  return {
    increment: function () {
      count++;
      console.log(count);
    },
    decrement: function () {
      count--;
      console.log(count);
    },
  };
}

const myCounter = counter();
myCounter.increment(); // 1
myCounter.increment(); // 2
myCounter.decrement(); // 1

Le nombre de variables est accessible uniquement via les méthodes renvoyées, garantissant ainsi la confidentialité.

---

b) Usines de fonctions

Les fermetures nous permettent de créer des fonctions avec des comportements préconfigurés.

function multiplier(factor) {
  return function (number) {
    return number * factor;
  };
}

const double = multiplier(2);
const triple = multiplier(3);

console.log(double(5)); // 10
console.log(triple(5)); // 15

---

c) Maintien de l'état dans le code asynchrone

Les fermetures sont couramment utilisées pour maintenir l'état dans les opérations asynchrones.

function greetAfterDelay(name) {
  setTimeout(() => {
    console.log(`Hello, ${name}!`);
  }, 2000);
}

greetAfterDelay("Alice");
// Output after 2 seconds: "Hello, Alice!"

Ici, la fermeture garantit que la variable name est préservée pour le rappel setTimeout.

---

5. Cas d'utilisation courants des fermetures

1. Masquage et encapsulation des données
   
   Les fermetures créent des variables et des méthodes privées, un concept clé dans la programmation orientée objet.

2. Rappels
   
   Largement utilisé en JavaScript asynchrone pour gérer les écouteurs d'événements, les promesses et les minuteries.

3. Programmation Fonctionnelle
   
   Fonctions essentielles aux fonctions d'ordre supérieur telles que la cartographie, le filtrage et la réduction.

4. Curryage et application partielle
   
   Permet de décomposer les fonctions en unités plus petites et réutilisables.

---

6. Fermetures et Mémoire

Les fermetures conservent les références aux variables dans leur portée, ce qui peut entraîner des fuites de mémoire si elles ne sont pas gérées correctement.

Éviter les problèmes de mémoire :

• Supprimez les écouteurs d'événements lorsqu'ils ne sont plus nécessaires.
• Soyez prudent avec les fermetures de longue durée dans les grandes applications.

---

7. Idées fausses sur les fermetures

Mythe 1 : Les fermetures sont compliquées

Les clôtures sont simples une fois que vous comprenez la portée lexicale.

Mythe 2 : Les fermetures ralentissent les performances

Bien que les fermetures conservent la mémoire, leur impact sur les performances est négligeable dans la plupart des cas d'utilisation.

---

8. Avantages des fermetures

• Encapsulation : Protège les variables des accès indésirables.
• Modularité : Favorise des fonctions réutilisables et indépendantes.
• Gestion de l'état : simplifie la gestion de l'état dans la programmation fonctionnelle.

---

9. Exemple concret

a) Anti-rebond avec fermetures

Une fonction qui limite la fréquence à laquelle une autre fonction est appelée.

function outerFunction() {
  const outerVariable = "I'm an outer variable";

  function innerFunction() {
    console.log(outerVariable); // Access outerVariable
  }

  return innerFunction;
}

const closureFunction = outerFunction();
closureFunction(); // Output: "I'm an outer variable"

---

10. Conclusion

Les fermetures sont une fonctionnalité polyvalente de JavaScript, permettant des modèles puissants tels que des variables privées, des rappels et des fonctions avec état. En comprenant le fonctionnement des fermetures, vous pouvez écrire un code plus robuste, modulaire et maintenable.

La maîtrise des fermetures libère tout le potentiel de JavaScript en tant que langage de programmation fonctionnel et événementiel.

Bonjour, je m'appelle Abhay Singh Kathayat !
Je suis un développeur full-stack avec une expertise dans les technologies front-end et back-end. Je travaille avec une variété de langages et de frameworks de programmation pour créer des applications efficaces, évolutives et conviviales.
N'hésitez pas à me contacter à mon e-mail professionnel : kaashshorts28@gmail.com.

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!