Fermetures JavaScript
Les variables JavaScript peuvent appartenir à la portée locale ou globale .
Les variables globales peuvent être rendues locales (privées) avec des fermetures .
Variables globales
A functionpeut accéder à toutes les variables définies à l' intérieur de la fonction, comme ceci :
Exemple
function myFunction() {
let a = 4;
return a * a;
}
Mais a functionpeut aussi accéder à des variables définies en dehors de la fonction, comme ceci :
Exemple
let a = 4;
function myFunction() {
return a * a;
}
Dans le dernier exemple, a est une variable globale .
Dans une page Web, les variables globales appartiennent à l'objet window.
Les variables globales peuvent être utilisées (et modifiées) par tous les scripts de la page (et de la fenêtre).
Dans le premier exemple, a est une variable locale .
Une variable locale ne peut être utilisée qu'à l'intérieur de la fonction où elle est définie. Il est caché des autres fonctions et des autres codes de script.
Les variables globales et locales portant le même nom sont des variables différentes. Modifier l'un ne modifie pas l'autre.
Les variables créées sans mot-clé de déclaration ( var,
let, ou const) sont toujours globales, même si elles sont créées à l'intérieur d'une fonction.
Exemple
function myFunction() {
a = 4;
}
Durée de vie variable
Les variables globales vivent jusqu'à ce que la page soit supprimée, comme lorsque vous naviguez vers une autre page ou fermez la fenêtre.
Les variables locales ont une durée de vie courte. Ils sont créés lorsque la fonction est invoquée et supprimés lorsque la fonction est terminée.
Un contre-dilemme
Supposons que vous souhaitiez utiliser une variable pour compter quelque chose et que vous souhaitiez que ce compteur soit disponible pour toutes les fonctions.
Vous pouvez utiliser une variable globale et un functionpour augmenter le compteur :
Exemple
// Initiate counter
let counter = 0;
// Function to increment
counter
function add() {
counter += 1;
}
// Call add() 3 times
add();
add();
add();
// The counter should now be 3
Il y a un problème avec la solution ci-dessus : n'importe quel code sur la page peut changer le compteur, sans appeler add().
Le compteur doit être local à la add()fonction, pour empêcher un autre code de le modifier :
Exemple
// Initiate counter
let counter = 0;
// Function to increment
counter
function add() {
let counter = 0;
counter += 1;
}
//
Call add() 3 times
add();
add();
add();
//The counter should
now be 3. But it is 0
Cela n'a pas fonctionné car nous affichons le compteur global au lieu du compteur local.
Nous pouvons supprimer le compteur global et accéder au compteur local en laissant la fonction le renvoyer :
Exemple
// Function to increment
counter
function add() {
let counter = 0;
counter += 1;
return counter;
}
//
Call add() 3 times
add();
add();
add();
//The counter should
now be 3. But it is 1.
Cela n'a pas fonctionné car nous avons réinitialisé le compteur local à chaque fois que nous avons appelé la fonction.
Une fonction interne JavaScript peut résoudre ce problème.
Fonctions imbriquées JavaScript
Toutes les fonctions ont accès à la portée globale.
En fait, en JavaScript, toutes les fonctions ont accès à la portée "au-dessus" d'elles.
JavaScript prend en charge les fonctions imbriquées. Les fonctions imbriquées ont accès à la portée "au-dessus" d'elles.
Dans cet exemple, la fonction interne plus()a accès à la countervariable de la fonction parent :
Exemple
function add() {
let counter = 0;
function plus() {counter += 1;}
plus();
return counter;
}
Cela aurait pu résoudre le dilemme du compteur, si nous pouvions atteindre la plus()
fonction de l'extérieur.
Nous devons également trouver un moyen de n'exécuter counter = 0qu'une seule fois.
Nous avons besoin d'une fermeture.
Fermetures JavaScript
Vous souvenez-vous des fonctions d'appel automatique ? A quoi sert cette fonction ?
Exemple
const add = (function () {
let counter = 0;
return function () {counter += 1; return counter}
})();
add();
add();
add();
// the counter is now 3
Exemple expliqué
La variable addest affectée à la valeur de retour d'une fonction auto-invoquante.
La fonction d'appel automatique ne s'exécute qu'une seule fois. Il met le compteur à zéro (0) et renvoie une expression de fonction.
De cette façon, add devient une fonction. La partie "merveilleuse" est qu'il peut accéder au compteur dans la portée parent.
C'est ce qu'on appelle une fermeture JavaScript. Il permet à une fonction d'avoir des variables " privées ".
Le compteur est protégé par la portée de la fonction anonyme et ne peut être modifié qu'à l'aide de la fonction d'ajout.
Une fermeture est une fonction ayant accès à la portée parent, même après la fermeture de la fonction parent.