Fermeture JavaScript

Les variables JavaScript peuvent appartenirLocalePortée ouGlobalePortée

Peuvent être utiliséesLes closuresDéclarer une variable globale comme locale (privée).

Pourquoi avons-nous besoin de closures ?

Supposons que nous utilisions une variable pour compter quelque chose et que nous souhaitions que ce compteur soit accessible à toutes les fonctions.

Nous pouvons utiliser une variable globale et une fonction pour augmenter le compteur :

//　Initialiser le compteur
var counter = 0;
//　Fonction d'augmentation du compteur
function increment() {
　　counter++;
}
//　appeler increment()　3fois
increment();
increment();
increment();
//　Maintenant, ce compteur devrait être3
document.getElementById("output").innerHTML = `Compteur: ${counter};`;

Le solution proposée pose un problème : tout le code présent sur la page peut modifier le compteur sans appeler increment().

Les fonctions internes JavaScript peuvent résoudre ce problème.

Fonction imbriquée JavaScript

JavaScript prend en charge les fonctions imbriquées. Les fonctions imbriquées peuvent accéder aux portées au-dessus.

Dans cet exemple, la fonction interne peut accéder à la variable de compteur de la fonction externe :

function outer() {
　　var counter = 0;
　　function inner() {
　　　　　　counter++;
　　}
　　return counter;　
}

Les fonctions imbriquées peuvent résoudre le problème précédent, si nous pouvons accéder à la fonction inner() depuis l'extérieur.

Nous devons également trouver une méthode pour exécuter une seule fois counter = 0, c'est ce que nous allons parler de la fermeture.

Fermeture JavaScript

Une fermeture est une combinaison de la fonction et de l'environnement lexical dans lequel elle est déclarée.

Une fermeture peut accéder aux variables de l'environnement de portée d'une autre fonction. Cela est réalisé en créant une fonction à l'intérieur de la fonction. Bien sûr, la fonction externe ne peut pas accéder à l'environnement interne.

var increment = (function() {
　　var counter = 0;
　　function inner() {
　　　　　　return　++counter;
　　}
　　return inner;
})();

La valeur de retour de la fonction auto-évaluée est affectée à l'augmentation de la variable.

La fonction auto-évaluée ne s'exécute qu'une seule fois. Elle règle le compteur à zéro et retourne l'expression de la fonction.

Une fermeture permet d'accéder à l'environnement de portée parent, même si la fonction parent est fermée.