La plupart des développeurs JavaScript utilisent la fermeture consciemment ou inconsciemment. Même s’ils le font inconsciemment, cela fonctionne bien dans la plupart des cas. Mais connaître la fermeture fournira un meilleur contrôle sur le code lors de leur utilisation. Et une autre raison d’apprendre la fermeture est que c’est la question la plus fréquemment posée lors de l’entretien pour les développeurs JavaScript.
Préalable : : La portée des variables en JavaScript
Voyons et comprenons la fermeture à travers un exemple.
Exemple 1 :
functionfoo()
{ var b = 1;
functioninner(){ returnb; } returninner; } varget_func_inner = foo(); console.log(get_func_inner()); console.log(get_func_inner()); console.log(get_func_inner()); Explication :Une chose intéressante à noter ici est de la ligne numéro 9 à la ligne numéro 12 . A la ligne numéro 9, nous avons terminé l’exécution de la fonction foo() et le corps entier de la fonction inner() est retourné et stocké dans var get_func_inner, en raison de la ligne 7 return inner.
Nous pouvons accéder à la variable b qui est définie dans la fonction foo() à travers la fonction inner() car cette dernière préserve la chaîne de portée de la fonction englobante au moment de l’exécution de la fonction englobante c’est-à-dire.c’est-à-dire que la fonction intérieure connaît la valeur de b à travers sa chaîne de portée.
C’est la fermeture en action c’est-à-dire que la fonction intérieure peut avoir accès aux variables de la fonction extérieure ainsi qu’à toutes les variables globales.
Sortie du code ci-dessus:
Pour voir la variable et la fonction liée dans la fermeture, nous pouvons écrire comme :
console.dir(get_func_inner); . Sortie :
Comme nous pouvons voir les variables au sein de la fermeture dans la section scope.
Définition de la fermeture:
Dans les langages de programmation, les fermetures (également fermetures lexicales ou fermetures de fonctions) sont des techniques pour mettre en œuvre la liaison de nom à portée lexicale dans les langages avec des fonctions de première classe. Sur le plan opérationnel, une fermeture est un enregistrement stockant une fonction ainsi qu’un environnement : un mappage associant chaque variable libre de la fonction (variables utilisées localement, mais définies dans une portée englobante) à la valeur ou à la référence à laquelle le nom était lié lors de la création de la fermeture.
-Wikipedia
ou
En d’autres termes, la fermeture est créée lorsqu’une fonction enfant garde l’environnement du scope parent même après que la fonction parent ait déjà été exécutée
Voyons maintenant un autre exemple.
Exemple 2 :
functionfoo(outer_arg) {
functioninner(inner_arg) {
returnouter_arg + inner_arg;
} . returninner; } varget_func_inner = foo(5); console.log(get_func_inner(4)); console.log(get_func_inner(3)); Explication : Dans l’exemple ci-dessus, nous avons utilisé une fonction paramètre plutôt qu’une fonction par défaut. Notez que même lorsque nous avons terminé l’exécution de foo(5), nous pouvons accéder à la variable outer_arg de la fonction interne. Et à l’exécution de la fonction interne produire la somme de outer_arg et inner_arg comme souhaité.
Output:
Voyons maintenant un exemple de fermeture dans une boucle.
Dans cet exemple, nous voudrions stocker une fonction anonyme à chaque index d’un tableau.
Exemple 3 :
functionouter() { vararr = ; vari; for(i = 0; i < 4; i++) { arr = function() { returni; } } returnarr;
} var
get_arr = outer(); console.log(get_arr()); console.log(get_arr());
console.log(get_arr());
console.log(get_arr()); console.log(get_arr()); Sortie :
Explication : Avez-vous deviné la bonne réponse ? Dans le code ci-dessus, nous avons créé quatre fermetures qui pointent sur la variable i qui est une variable locale de la fonction outer. La fermeture ne se souvient pas de la valeur de la variable, elle ne fait que pointer vers la variable ou stocker la référence de la variable et donc, renvoie la valeur actuelle. Dans le code ci-dessus lorsque nous essayons de mettre à jour la valeur de il se reflète à tous parce que la fermeture stocke la référence.
Voyons une façon correcte d’écrire le code ci-dessus de manière à obtenir différentes valeurs de i à différents indices.
Exemple 4 :
functionouter() { functioncreate_Closure(val) { returnfunction()
{ returnval; } }
vararr = ; vari; for(i = 0; i < 4; i++) { arr = create_Closure(i); }
returnarr; } varget_arr = outer(); console.log(get_arr()); console.log(get_arr()); .
console.log(get_arr()); console.log(get_arr()); Sortie :
Explication : Dans le code ci-dessus, nous mettons à jour l’argument de la fonction create_Closure à chaque appel. Par conséquent, nous obtenons différentes valeurs de i à différents indices.
Note : Il peut être légèrement difficile d’obtenir le concept de fermeture en une seule fois mais essayez d’expérimenter avec la fermeture dans différents scénarios comme pour créer des getter/setter, des callbacks et ainsi de suite.
Référence:
« Object Oriented JavaScript » par Stoyan Stefanov
Cet article est contribué par Sumit Ghosh. Si vous aimez GeeksforGeeks et souhaitez contribuer, vous pouvez également écrire un article en utilisant contribute.geeksforgeeks.org ou envoyer votre article par courrier à [email protected]. Voyez votre article apparaître sur la page principale de GeeksforGeeks et aidez d’autres Geeks.