Guide du débutant des fermetures JavaScript

"Fermetures"Sont parmi les éléments constitutifs les plus fondamentaux de JavaScript. En tant que débutant JavaScript, vous avez peut-être utilisé des fermetures sciemment ou inconsciemment; Cependant, la collecte de connaissances sur le fonctionnement des fermetures est cruciale car elle vous permet de comprendre l'interaction entre les variables et les fonctions et le processus d'exécution de votre programme JavaScript.

Cet article est un complet Guide du débutant pour Fermetures JavaScript dans lequel nous discuterons de l'accès variable dans différentes lunettes.

Avant de plonger dans le concept de fermetures JavaScript, nous expliquerons d'abord quoi Camping lexical est comme les deux termes sont associés les uns aux autres.

Collecteur lexical en javascript

La portée variable est déterminée par sa déclaration dans le code source, connu sous le nom de «Camping lexical". Par exemple, dans l'exemple ci-dessous, le créé «nom"La variable est un"mondial”Variable qui signifie qu'elle peut être accessible de n'importe où dans le programme, comme dans le«DisplayMessage ()" fonction.

Cependant, "Info" est un "local»Variable qui ne peut être accessible que dans le«DisplayMessage ()" fonction:

Soit name = 'Alex';
fonction displayMessage ()
Laissez info = 'Bonjour! Mon nom est';
console.log (info + "+ name);

DisplayMessage ();

L'exécution du code donné ci-dessus affichera la sortie suivante:

Classement lexical imbriqué en JavaScript

Les portées des variables peuvent être imbriquées en utilisant le «Camping lexical"De telle manière que la fonction intérieure peut avoir accès aux variables déclarées dans la portée extérieure.

Considérez l'exemple suivant:

fonction displayMessage ()
Laissez info = 'Bonjour! Mon nom est Alex.';;
fonction show ()
console.journal (info);

montrer();

DisplayMessage ();

Dans cet exemple, le «DisplayMessage ()"La fonction a une variable locale nommée"Info"Et un imbriqué"montrer()«Fonction, où«montrer()" est un intérieur fonction qui a la capacité d'accéder à la valeur du «Info”Variable de la portée extérieure.

Donc, quand le «DisplayMessage ()«La fonction est exécutée, il appellera le«montrer()”Fonction, qui accédera ensuite au«Info”Variable et affiche sa valeur sur la console:

Maintenant, nous allons modifier le «DisplayMessage ()"Méthode et au lieu d'invoquer l'intérieur"montrer()«Fonction, nous allons ajouter une instruction pour retourner le«montrer()»Objet de fonction:

fonction displayMessage ()
Laissez info = 'Bonjour! Mon nom est Alex.';;
fonction show ()
console.journal (info);

Retour spectacle;

De plus, nous avons attribué la valeur renvoyée par le «DisplayMessage ()«Fonction à«X»Variable:

Soit x = displayMessage ();

Enfin, nous invoquerons «X()«Fonction qui fait référence au«montrer()" fonction:

console.log (x ());

Vous pouvez voir à partir de la sortie donnée, la valeur de la variable locale "Info«Existe toujours qui reste généralement dans la mémoire jusqu'à l'exécution de la fonction où elle est déclarée:

Semble confus? C'est la magie de Fermeture que vous avez vu dans le dernier exemple comme «montrer()"Est une fonction de fermeture qui maintient la portée extérieure dans sa propre portée.

Que sont les fermetures javascript

Les fonctions JavaScript servent également «Fermetures"Parce que le corps d'une fonction a accès aux variables qui sont définies à l'extérieur. Ou nous pouvons définir "Fermeture«En tant que fonction qui est une fonction enfant et peut accéder aux variables créées dans le«parent»Portée de la fonction.

Maintenant, vérifions quelques exemples pour comprendre l'association entre les lunettes variables et la fermeture en JavaScript.

Exemple 1
Cet exemple montre comment un «local"Variable"Info"Peut être accessible à l'intérieur du"montrer()»Fonction où il est créé. N'oubliez pas que le script restant ne peut pas accéder à ceci "Info»Variable:

fonction show ()
Laissez info = 'Bonjour! Mon nom est Alex.';;
retour des informations;

montrer();

Quand le "montrer()«La fonction est exécutée, il affichera la valeur stockée dans le«Info»Variable:

Exemple 2
Maintenant, nous déclarerons «Info" comme un "mondial»Variable qui est référée dans le«montrer()»Fonction (ayant une portée différente):

Laissez info = 'Bonjour! Mon nom est Alex.';;
fonction show ()
retour des informations;

montrer();

Comme la fonction JavaScript "montrer()«La fonction est un«Fermeture», Il maintiendra la portée et l'état du«Info»Variable:

Exemple 3
Dans une autre situation, lorsque les variables sont définies dans la portée du «parent”Fonction, le«enfant»La fonction peut toujours accéder à leur valeur:

var displayMessage = function ()
Laissez info = 'Bonjour! Mon nom est Alex.';;
var show = function ()
console.journal (info);

montrer();

La sortie du programme donné signifie que «montrer()«Ce qui est une fonction enfant peut accéder au«Info»Variable déclarée dans le«DisplayMessage ()”Fonction parent:

C'était toutes des informations essentielles liées aux fermetures JavaScript. Vous pouvez approfondir les recherches en fonction de vos exigences.

Conclusion

Fonctions JavaScript servir également de Fermetures Parce que le corps d'une fonction a accès aux variables qui sont définies à l'extérieur. Nous pouvons définir Fermeture En tant que fonction enfant qui peut accéder aux variables créées dans la portée de la fonction parentale. Cet article est un complet Guide du débutant pour Fermetures JavaScript dans lequel nous avons discuté d'accès variable dans différentes lunettes.