Fermetures JavaScript : guide du débutant

Les fermetures sont une fonctionnalité importante et puissante de JavaScript avec laquelle de nombreux débutants ont du mal. Ils sont responsables de plusieurs des fonctionnalités les plus utiles de JavaScript, telles que le stockage de l'état lors des appels de fonction et la création de variables privées. Ce blog tente d'expliquer les fermetures en les décomposant dans un langage simple et en discutant de leur importance avec des exemples pratiques.

? Qu’est-ce qu’une fermeture ?

Lorsqu'une fonction est renvoyée par une autre fonction en JavaScript, elle hérite de la portée de la fonction parent. Cela signifie que la fonction renvoyée peut accéder aux variables définies dans la portée de la fonction externe même après que la fonction externe a terminé son exécution. Une fermeture est la combinaison d'une fonction et de sa portée englobante.
Voici une définition plus simple :

• Une fermeture est une fonction qui "se souvient" des variables de la portée de la fonction externe (englobante).
• Il permet à la fonction interne d'accéder à ces variables même lorsque la fonction externe n'est plus en cours d'exécution.

? Comment fonctionnent les fermetures : un exemple

? Exemple sans fermeture

function outer(){
    let counter = 0
    function inner(){
        counter++
        console.log("counter = " + counter)
    }
    inner()
}
outer()
outer() 
/* Output:
counter = 1
counter = 1 */

? Exemple avec fermeture

function outer(){
    let counter = 0
    function inner(){
        counter++
        console.log("counter = " + counter)
    }
    return inner
}
const fn = outer()
fn()
fn()
/* Output:
counter = 1
counter = 2 */

? Principales caractéristiques de la fermeture

1. Mémoire persistante : les variables dans la portée de la fonction externe sont "mémorisées" longtemps après la sortie de la fonction externe.
2. Portée lexicale : les fermetures sont basées sur l'endroit où la fonction est définie, et non sur l'endroit où elle est exécutée.
3. Instances multiples : chaque instance de fermeture stocke sa propre copie des variables externes.

? Exemple avec plusieurs instances :

function counterFunction() {
    let count = 0;

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

const counter1 = counterFunction();
const counter2 = counterFunction();

console.log("counter1 = " + counter1()); // Output: 1
console.log("counter1 = " + counter1()); // Output: 2
console.log("counter2 = " + counter2()); // Output: 1
console.log("counter1 = " + counter1()); // Output: 3
console.log("counter2 = " + counter2()); // Output: 2

Ici, counter1 et counter2 ont chacun leur propre variable de comptage distincte.

? Utilisations pratiques des fermetures

1️⃣ Confidentialité des données : Les fermetures peuvent masquer les variables de la portée globale, de sorte qu'elles ne sont disponibles que dans une fonction spécifique.
? Exemple :

function secretInfo() {
    let secret = "I love JavaScript";
    return {
        getSecret: function() {
            return secret;
        },
        setSecret: function(newSecret) {
            secret = newSecret;
        }
    };
}

const secretObject = secretInfo();
console.log(secretObject.getSecret()); // Output: I love JavaScript
secretObject.setSecret("I love Python too!");
console.log(secretObject.getSecret()); // Output: I love Python too!
secretObject.setSecret("I love PHP too!");
console.log(secretObject.getSecret()); // Output: I love PHP too!
// Attempting to Access secret Directly will not work
console.log(secretObject.secret); // Output: undefined

✍️ Comment ce code présente la confidentialité des données :

1. Protection de la portée globale : la variable secrète n'est pas accessible directement depuis la portée globale ou toute autre partie du code. Par exemple, si vous essayez console.log(secretObject.secret), il renverra undefined.
2. Maintenance d'état privé : le secret de la variable de fermeture est privé et ne peut être lu ou modifié qu'à l'aide des méthodes getSecret et setSecret.
3. Accès contrôlé : Le programme assure un accès limité à la variable secrète en définissant les fonctions getSecret et setSecret.

2️⃣ Usines de fonctions : Une usine de fonctions est une fonction qui génère et renvoie de nouvelles fonctions. Il nous permet de construire dynamiquement des fonctionnalités personnalisées basées sur les paramètres d'entrée.
? Exemple :

function outer(){
    let counter = 0
    function inner(){
        counter++
        console.log("counter = " + counter)
    }
    inner()
}
outer()
outer() 
/* Output:
counter = 1
counter = 1 */

✍️ Comment ce code présente les usines de fonctions :

1. La fonction de calcul fonctionne comme une usine, produisant des fonctions multiplicatrices spécialisées (double, triple) basées sur l'entrée (facteur).
2. Chaque fonction est unique et indépendante tout en partageant la même logique de base.

3️⃣ Écouteurs d'événements : Les fermetures sont couramment utilisées dans les rappels et les écouteurs d'événements pour maintenir l'état.
? Exemple :

function outer(){
    let counter = 0
    function inner(){
        counter++
        console.log("counter = " + counter)
    }
    return inner
}
const fn = outer()
fn()
fn()
/* Output:
counter = 1
counter = 2 */

✍️ Comment ce code montre le fonctionnement des fermetures dans les auditeurs d'événements :

1. La fonction setupListener crée une fermeture et définit la variable clickCount à l'intérieur.
2. La fonction d'écoute d'événements, qui est un rappel, a accès à clickCount même après la fin de l'exécution de la méthode setupListener.
3. Chaque fois que l'on clique sur le bouton portant l'ID "myButton", le rappel de l'écouteur d'événement incrémente clickCount et enregistre la valeur mise à jour.

? Conclusion

Les fermetures sont une idée de base en JavaScript, permettant aux développeurs de construire un code plus modulaire, plus efficace et plus privé. Comprendre les fermetures vous donne la possibilité d'écrire des fonctions dynamiques, de maintenir un état persistant et de réaliser l'encapsulation des données.

En tant que débutant, passez du temps à pratiquer et à expérimenter les fermetures. Ils peuvent sembler difficiles au début, mais avec des exemples pratiques et leur utilisation, vous réaliserez bientôt leur incroyable force et leur polyvalence dans la programmation JavaScript.

Y a-t-il des analogies ou des exemples réels qui vous ont aidé à apprendre les fermetures ? Partagez-les dans la section commentaires ci-dessous !
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!