Mystère des fermetures en JavaScript !

À première vue, les fermetures peuvent sembler un concept compliqué, mais ne vous inquiétez pas, elles sont beaucoup plus simples qu'il n'y paraît ! Éliminons toute confusion et abordons certains mythes courants sur les fermetures.

Mythes courants sur les fermetures

❌ Les fermetures sont des fonctions spéciales avec accès à leur portée environnante.
Ce n'est pas vrai

• Une fermeture n'est pas la même chose qu'une fonction.
• En JavaScript, chaque fonction a intrinsèquement accès à la portée dans laquelle elle a été définie. C'est ainsi que fonctionnent les fonctions !

❌ Les fermetures nécessitent des fonctions imbriquées.
Encore faux

• Les fonctions d'imbrication n'ont rien à voir avec la création de fermetures.
• Chaque fois qu'une fonction est créée, elle forme automatiquement une fermeture avec sa portée environnante, aucune imbrication n'est requise.

Quelle est la réalité❓

Les fermetures ne sont pas une fonctionnalité magique ou unique. Au lieu de cela, il s’agit simplement de la combinaison d’une fonction et des variables de la portée dans laquelle la fonction a été créée. Chaque fonction est livrée avec ce contexte : considérez-le comme un souvenir de son origine.

Voici la définition approuvée par MDN :

Une fermeture est la combinaison d'une fonction regroupée avec des références à son état environnant.

En clair, une fermeture permet à votre fonction de "se souvenir" des variables de l'endroit où elle a été créée, même si elle est exécutée ailleurs.

Voyons les fermetures en action ??‍?

Voici un petit exemple amusant :

function createCounter() {
    let count = 0; // This is the surrounding state

    return function() { // The inner function
        count++; 
        return count;
    };
}

const counter = createCounter(); // Create a counter instance
console.log(counter()); // Output: 1
console.log(counter()); // Output: 2
console.log(counter()); // Output: 3

Que se passe-t-il ici ? ?
Lorsque createCounter est appelé, un nombre de variables est créé dans sa portée.
La fonction renvoyée se souvient du décompte, même si createCounter a déjà fini de s'exécuter.
Chaque fois que le compteur est appelé, il peut accéder et mettre à jour le décompte en raison de la fermeture.

Pourquoi les fermetures sont-elles importantes ? ?

Les clôtures ne sont pas seulement un concept théorique pour réussir des entretiens : elles sont incroyablement utiles ! Voici quelques scénarios du monde réel :

1. Confidentialité des données

Les fermetures peuvent garder les variables privées et inaccessibles du monde extérieur.

function secretMessage() {
    let message = "This is a secret!";
    return function() {
        return message; // Only this function can access the variable
    };
}

const getMessage = secretMessage();
console.log(getMessage()); // Output: "This is a secret!"
console.log(message); // Error: message is not defined

2. Gestionnaires d'événements

Les fermetures sont pratiques pour les auditeurs d'événements lorsque vous souhaitez « vous souvenir » d'un état.

function greetUser(username) {
    return function() {
        console.log(`Hello, ${username}!`);
    };
}

const greetJohn = greetUser("John");
document.getElementById("myButton").addEventListener("click", greetJohn);
// Even after greetUser is done, greetJohn remembers "John"

3. Demande partielle

Les fermetures vous permettent de prédéfinir des arguments pour une fonction.

function multiply(a) {
    return function(b) {
        return a * b; // "a" is remembered
    };
}

const double = multiply(2);
console.log(double(5)); // Output: 10
console.log(double(10)); // Output: 20

Attendez, les fermetures sont-elles parfaites❓

Pas toujours ! Si vous n'y faites pas attention, les fermetures peuvent entraîner des fuites de mémoire en conservant les références aux variables plus longtemps que nécessaire. Par exemple, lorsque des fermetures sont utilisées à l’intérieur de boucles, il est facile de créer des comportements inattendus :

function createCounter() {
    let count = 0; // This is the surrounding state

    return function() { // The inner function
        count++; 
        return count;
    };
}

const counter = createCounter(); // Create a counter instance
console.log(counter()); // Output: 1
console.log(counter()); // Output: 2
console.log(counter()); // Output: 3

Pour résoudre ce problème, vous pouvez utiliser let (scope de bloc) ou un IIFE :

function secretMessage() {
    let message = "This is a secret!";
    return function() {
        return message; // Only this function can access the variable
    };
}

const getMessage = secretMessage();
console.log(getMessage()); // Output: "This is a secret!"
console.log(message); // Error: message is not defined

Conclusion ???

Les fermetures sont partout en JavaScript. Que vous le réalisiez ou non, vous les utilisez déjà ! C'est la sauce secrète qui rend JavaScript puissant et flexible.

Voici ce qu’il faut retenir : ?

• Les fermetures ne sont pas des fonctions ; ce sont une fonction des variables dont il se souvient.
• Chaque fonction en JavaScript a une fermeture.
• Utilisez des fermetures pour l'encapsulation, la gestion des événements, l'application partielle, etc.

Merci d'avoir lu. ?
Bon codage ! ???‍?✨

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!