Comment expliqueriez-vous les closures en JavaScript à quelqu’un qui connaît les concepts dont elles sont la base (par exemple les fonctions, les variables et ainsi de suite), mais qui ne comprend pas les closures elles-mêmes ?
Les closures ou fermetures en JavaScript sont un moyen de permettre à une fonction d’avoir des variables persistantes et privées - c’est-à-dire des variables qu’une seule fonction connaît, où elle peut garder la trace des informations provenant de son exécution précédente.
En ce sens, elles permettent à une fonction d’agir un peu comme un objet avec des attributs privés.
Source:
Voici une closure(fermeture) :
var n = 42;
function display() { return n; }
Oui. Vous l’utilisez probablement plusieurs fois dans votre code.
Les closures(fermetures) consistent simplement à utiliser une variable dont la portée est plus élevée du point de vue de l’endroit où la fonction a été déclarée (et non de l’endroit où la fonction a été exécutée).
Une closure (fermeture) permet à une fonction interne d’accéder aux variables de sa fonction externe. C’est probablement l’explication la plus simple que l’on puisse obtenir sur les closures(fermetures).
Que faire si on accède à une variable, mais qu’elle n’est pas locale? Comme ceci:
var x = 2;
function f() {
alert(x);
}
Dans ce cas, le programme d’interprétation trouve la variable dans l’objet LexicalEnvironment externe.
Le processus se compose de deux étapes :
Premièrement, lorsqu’une fonction dans ce cas ‹ f › est créée, elle n’est pas créée dans un espace vide. Il existe un objet LexicalEnvironment en cours. Dans le cas ci-dessus, il s’agit de window (‹ x › est indéfini au moment de la création de la fonction).
Lorsqu’une fonction est créée, elle obtient une propriété cachée, nommée [[Scope]], qui fait référence au LexicalEnvironment actuel.
Si une variable est lue, mais ne peut être trouvée nulle part, une erreur est générée.
Pour résumer :
- La fonction interne contient une référence au LexicalEnvironment externe.
- La fonction interne peut accéder aux variables de celui-ci à tout moment, même si la fonction externe est terminée.
- Le navigateur maintient le LexicalEnvironment et toutes ses propriétés (variables) en mémoire jusqu’à ce qu’une fonction interne y fasse référence.
C’est ce qu’on appelle une closure (fermeture).
Les fonctions JavaScript peuvent accéder à leurs :
- Arguments
- Variables locales et leurs fonctions locales
- Environnement, qui comprend :
- les variables globaux, y compris le DOM
- tout ce qui se trouve dans les fonctions externes
Si une fonction accède à son environnement, alors la fonction est une closure (fermeture).
Notez que les fonctions externes ne sont pas nécessaires, bien qu’elles offrent des avantages que je ne discute pas ici. En accédant aux données de son environnement, une closure (fermeture) maintient ces données en vie. Dans le sous-cas des fonctions externes/internes, une fonction externe peut créer des données locales et éventuellement se terminer, et pourtant, si une ou plusieurs fonctions internes survivent après la sortie de la fonction externe, alors la ou les fonctions internes maintiennent en vie les données locales de la fonction externe.
Par exemple:
function my_closure() {
var x = 2;
return function () {
return x; // Ici, nous cherchons à l'intérieur de my_closure la valeur de x
}
}
var my_function = my_closure();
my_function(); //=> 2