Démystifier les fermetures en JavaScript

Une fermeture est la combinaison d'une fonction regroupée avec des références à son état environnant. C'est une technique simple et utile une fois que vous la comprenez.

Les fermetures sont l'un des concepts les plus discutés et toujours déroutants en JavaScript, et aussi l'une des questions les plus courantes que vous êtes susceptible de rencontrer lors d'un entretien lorsque vous postulez pour un JavaScript. position. Comme le titre l'indique, je vais rendre le sujet plus clair et plus facile à comprendre.

Qu'est-ce qu'une fermeture ?

Une fermeture est une fonctionnalité de JavaScript où une fonction interne a accès à la portée (variables et paramètres) de ses fonctions externes, même après le retour de la fonction externe.

Remarque : La portée en JavaScript fait référence au contexte actuel du code, qui détermine l'accessibilité des variables à JavaScript. Les deux types de portée sont locales et globales :

• Les variables globales sont celles déclarées en dehors d'un bloc
• Les variables locales sont les variables déclarées à l'intérieur d'un bloc

En d'autres termes, une fermeture vous donne accès à la portée suivante :

• Accès à son périmètre ; variables définies dans son bloc de code
• Accès aux variables de la fonction externe
• Accès aux variables globales

Voici un exemple simple de fermeture en JavaScript :

    
    function enclosing( ) {
      var x = "extérieur";
      
      fonction intérieur() { 
        var y = "intérieur";
        console.log(x, y)
      }
      retour inner;
    }[19659034]var a = enfermant()
    x()

Nous avons défini deux fonctions :

• La fonction externe fermant avec une variable x qui renvoie une fonction imbriquée
• La fonction imbriquée inner avec une variable y qui enregistre à la fois la valeur de sa variable et celle de sa fonction parent

Remarque : Une fonction peut renvoyer une autre fonction en JavaScript. Une fonction affectée à une variable est appelée expression de fonction. Et, l'instruction return n'exécute pas la fonction interne—une fonction n'est exécutée que lorsqu'elle est suivie de ()—mais plutôt l'instruction return renvoie le corps entier de la fonction.

Ceci est une procédure pas à pas du flux d'exécution :

1. Après avoir appelé enclosing() à la ligne 13, la variable x est déclarée et une valeur lui est affectée.[19659007] Vient ensuite la déclaration de la fonction inner.
2. Le return inner renvoie le corps entier de la fonction inner.
3. Le contenu renvoyé par l'instruction return sont stockés dans a. Ainsi, a stockera les éléments suivants :

    function inner() {
        var y = " intérieur";
        console.log(x, y)
    }

5. Function outer() termine l'exécution, et toutes les variables comprises dans la portée de outer() n'existent plus.

Remarque : La durée de vie d'une variable définie dans une fonction correspond à la durée de vie de l'exécution de la fonction.

Ce que c'est. signifie que dans console.log(x, y)la variable x n'existe que pendant l'exécution de la fonction enclosing(). Une fois l'exécution de la fonction enclosing terminée, la variable x n'existe plus.

Maintenant, nous savons que la fonction enclosing renvoie une fonction, et que est stocké dans la variable a.

6. Puisque a est une fonction, nous l'exécutons à la ligne 14. Lorsque nous exécutons a()nous sommes essentiellement l'exécution de la fonction inner. Examinons pas à pas ce qui se passe lorsque a() est exécuté :

        a. La variable y est créée et une valeur lui est affectée.

   b. Ensuite, il enregistre dans la console la valeur de la variable de fonction parent x et sa variable locale y.

Maintenant, vous vous demandez peut-être : « Comment fonctionne la fonction inner ont accès à sa variable de fonction parent xpuisque sa fonction parent a terminé son exécution bien avant que nous ayons appelé a() et nous avons noté plus tôt que la durée de vie d'une variable définie à l'intérieur d'une fonction se trouve la durée de vie de l'exécution de la fonction ?"

La réponse à cette question est …

Fermetures !

La fonction inner a accès aux variables de la fonction englobante en raison de fermetures en JavaScript. En d'autres termes, la fonction inner préserve la chaîne de portée de la fonction closing au moment où elle a été exécutée, et peut ainsi accéder aux variables de fonction du parent.

La fonction inner avait préservé la valeur de sa variable de fonction parente x lorsque la fonction parente a été exécutée et a continué à la préserver (fermer). avoir la valeur de la variable x dans sa chaîne de portée puisqu'elle avait enfermé la valeur de x dans une fermeture au moment où la fonction enclosing() s'était exécutée .

Ainsi, c'est ainsi que JavaScript peut mémoriser non seulement la valeur mais aussi la variable de la fonction parent après une longue exécution.

Quand utiliser une fermeture ?

Les fermetures sont utiles pour masquer les détails de l'implémentation. en JavaScript. En d'autres termes, il peut être utile de créer des variables ou des fonctions privées.

L'exemple suivant montre comment créer des fonctions et des variables privées.

    var name = (function() {
         var nom d'utilisateur = "";
        function setName(val) {
          nom d'utilisateur = val;
          retour nom d'utilisateur
        }
        return {
          set: function(val) {
            return setName[19659015](val);
          }
        };   
    })();
      
    console.log(name.set("John Doe"))

Ci-dessus exemple, set devient une fonction publique car elle est incluse dans l'objet de retour, tandis que la fonction setName devient une fonction privée car elle n'est pas renvoyée et ne peut être utilisée qu'en interne dans la fonction parent .

Résumé

J'espère que ces explications étape par étape vous ont aidé à comprendre le concept de fermetures en JavaScript.