Fermetures de fonctions JavaScript | Expliqué
Le concept de fermetures existe depuis un certain temps maintenant, mais les gens ont du mal à le comprendre. Nous allons passer par étape par étape et rendre les choses très faciles à comprendre avec l'aide d'exemples.
Quelles sont les fermetures en javascript
Très brièvement, la fermeture a accès à la portée extérieure de la portée intérieure lorsque vous travaillez avec des fonctions imbriquées. Une fermeture est créée chaque fois qu'une fonction imbriquée est exécutée en javascript. Les variables définies à l'intérieur de la fonction sont créées sur l'exécution de la fonction et sont supprimées de la mémoire lors de l'exécution complète de la fonction respective.
Pour comprendre le concept de fermetures en JavaScript, nous devons connaître la différence entre la portée mondiale et la portée locale. Eh bien, nous allons passer en revue ces derniers.
Scopes de variable
Comme mentionné ci-dessus, il existe deux étendues variables majeures en JavaScript:
- Portée mondiale
- Portée locale
Les variables définies en dehors de toute fonction sont connues sous le nom variables globales et avoir un portée mondiale. Ces variables sont accessibles de n'importe où à l'intérieur du programme, c'est pourquoi nous utilisons le terme «global».
Comparativement, les variables définies à l'intérieur d'une fonction sont connues sous le nom Variables locales et sont connus pour avoir un portée locale. La portée locale est en outre divisée en portée de la fonction et en blocage, mais ce n'est pas une préoccupation majeure pour nous. Variables locales ne peut être accessible qu'à partir de la fonction dans laquelle ils sont déclarés
Prenez ce bloc de code pour comprendre la portée:
var sitename = "Linuxhint!"fonction imprimSiTename ()
Soit topicName = "javascript";
console.Log (nom de site);
imprimeTename ();
console.log (thèmeName);
Ce que nous faisons dans le code ci-dessus, c'est que nous créons une variable globale nom du site Et nous l'imprimons à l'intérieur d'une fonction appelée imprimeTename (), Cette fonction comprend une variable locale Nom du sujet Et nous essayons d'imprimer la valeur de cette variable en dehors de cette fonction. Ici, nom du site est une variable globale et Nom du sujet est une variable locale. La sortie du code suivant est comme:
Comme vous pouvez le voir clairement, nous avons pu accéder au nom du site variables à l'intérieur d'une fonction, mais nous n'avons pas pu accéder à la variable locale Nom du sujet en dehors de sa fonction. Vous pouvez en savoir plus sur ces différentes variables et portée.
Comment fonctionne une fermeture en javascript
Maintenant que nous savons comment fonctionne la portée en JavaScript, nous pouvons facilement comprendre le fonctionnement des fermetures.
Fermetures sont des fonctions qui sont imbriquées dans les unes les autres de telle manière que la fonction interne devient localement portée pour la fonction extérieure, et la fonction extérieure devient globalement étendue pour la fonction intérieure. Ce qui signifie que la fonction intérieure a accès aux attributs de la fonction extérieure.
Pour une meilleure compréhension, prenez le code suivant:
fonction outerFunction ()Soit outvar = "Je suis extérieur";
fonction innerFunction ()
Soit invar = "je suis intérieur";
console.journal (ouvar);
console.log (invar);
return innerFunction ();
Extérieur ();
Nous créons un fonctionnement extérieur Et un interconction à l'intérieur de fonctionnement extérieur. De la fonction intérieure, nous accédons à la variable dépasser qui est la variable locale du fonctionnement extérieur, et imprimer sa valeur avec la valeur de la variable à l'intérieur de la fonction intérieure.
C'est ainsi que fonctionne ce code:
La sortie du code ci-dessus est:
Nous avons pu obtenir les valeurs des deux variables et les imprimer à la console en utilisant le console.enregistrer() fonction.
Comment avoir plusieurs fonctions dans une autre fonction dans une fermeture
Si nous appelons la fonction extérieure comme le fonction parent de la fermeture et de la fonction intérieure comme le fonction de l'enfant de la fermeture. Ensuite, nous pouvons le dire de cette façon qu'un parent seul peut avoir plusieurs enfants. Une fonction parent n'aura pas accès aux attributs de ses enfants. Cependant, chaque enfant aura accès aux attributs de son parent. Depuis, une fonction enfant est également un attribut du parent, de sorte qu'une fonction enfant peut également accéder aux autres fonctions enfants du même parent; Cela signifie avoir accès à ses frères et sœurs.
Note: Les paramètres et les arguments sont également accessibles aux enfants.
Supposons que nous voulons faire une fonction qui accueille une fonction qui l'appelle. Cette fonction a 3 paramètres, FirstName, Middlename et LastName.
Tout d'abord, créez la fonction en utilisant les lignes suivantes.
Fonction Greeter (FirstName, Middlename, LastName)// Commandes ultérieures à l'intérieur ici
Cette fonction greeter est une fonction parentale avec quatre enfants. 3 des enfants travaillent sur les paramètres et renvoient la valeur des paramètres comme:
fonction getFirst ()return FirstName;
fonction getmiddle ()
retour middlename;
fonction getLast ()
return lastName;
Le dernier enfant appelle tous ses frères et sœurs et imprime les valeurs de la console, qui est implémentée avec les lignes suivantes:
fonction namePrinter ()console.Log ("Bienvenue! "+ getFirst () +" "+ getmiddle () +" "+ getLast ());
À la fin de la fonction parentale greeter () il renvoie le NamePrinter () Enfant à l'endroit où il s'appelle.
À, exécuter tout ce Fermeture Nous devons appeler la fonction parent avec la ligne suivante:
Greeter ("John", "Bukhari", "Doe");L'extrait de code complet de cette fermeture est:
Fonction Greeter (FirstName, Middlename, LastName)fonction getFirst ()
return FirstName;
fonction getmiddle ()
retour middlename;
fonction getLast ()
return lastName;
fonction namePrinter ()
console.Log ("Bienvenue! "+ getFirst () +" "+ getmiddle () +" "+ getLast ());
return namePrinter ();
Greeter ("John", "Bukhari", "Doe");
Nous obtiendrons la sortie suivante:
Conclusion
La fermeture est une fonctionnalité fournie avec la version ES6 de JavaScript. Les fermetures sont la mise en œuvre du concept basé sur la portée des variables en JavaScript. Nous avons appris quelles sont les fermetures et comme elles sont basées sur la portée des variables, nous avons également appris sur la portée. Nous avons fait la différence entre la portée globale et la portée variable en JS, et en fin de compte, nous avons testé le fonctionnement des fermetures à l'aide d'exemples.