Comprendre les fermetures JavaScript : variables, fonctions et portée.

« Les fermetures Javascript sont un concept fondamental en programmation, permettant aux fonctions d'accéder et de manipuler des variables à partir des portées environnantes. Cette technique puissante permet l'encapsulation des données, la préservation du contexte et une gestion efficace de la mémoire. Comprendre les fermetures Javascript est crucial pour développer des applications robustes, évolutives et maintenables. Dans cet article, nous examinerons la complexité de ce concept, en explorant les variables, les fonctions et la portée pour maîtriser ce concept Javascript essentiel.
Voyons maintenant ce qu'est une fermeture en Javascript. J'aimerais définir cela de trois manières : de manière simple et concise, dans une définition technique et détaillée, et dans une définition conceptuelle et analogue.

Qu’est-ce que la fermeture en JavaScript ?

«Une fermeture est un ou plusieurs canaux par lesquels une fonction à l'intérieur d'une autre fonction a accès à sa propre portée et à la portée de sa ou ses fonctions externes, même lorsque la ou les fonctions externes sont revenues.»

« Une fermeture peut également être appelée une fonction autonome qui maintient une référence à sa portée lexicale environnante, lui permettant d'accéder et de manipuler des variables de cette portée, même lorsque la fonction est invoquée en dehors de son contexte d'origine. » .

«Une fermeture est comme une pièce avec de la mémoire. Lorsqu'une fonction est créée à l'intérieur d'une autre fonction, elle hérite de la portée de la fonction externe, tout comme une pièce hérite des caractéristiques du bâtiment dans lequel elle se trouve. Même lorsque la fonction externe « se ferme » (revient), la fonction interne se souvient de la portée externe, permettant pour accéder à ses variables et fonctions". Ces définitions mettent en évidence différents aspects de la fermeture JavaScript.

Pour étayer les définitions ou pour une meilleure compréhension du sujet, pensez à une fermeture comme celle-ci. Imaginez que vous ayez un coffre à jouets dans lequel vous conservez tous vos jouets préférés (le coffre à jouets est notre fonction extérieure). Imaginez maintenant qu'à l'intérieur du conteneur à jouets (fonction extérieure), vous ayez différents jouets comme des voitures, des poupées et un robot, entre autres. (ce sont des variables ou toute autre fonction) parmi ces jouets, vous avez un jouet spécial (fonction interne) qui est le robot. Imaginez que le robot dispose de pouvoirs spéciaux via un canal ; il peut jouer ou connecter tous les autres jouets à l'intérieur du coffre à jouets même lorsque le coffre à jouets est fermé. Imaginez que ce canal ou ce pouvoir spécial soit une fermeture. J'espère que vous comprenez cela. Voyons un exemple de code pour illustrer la fermeture.

<script>
        function details() {
            let surName = 'john';
            let lastName = 'mercy';
            function displayDetails() {
                return `hey ${surName} ${lastName} you have been registered`;
            }
            return displayDetails();
        }
        console.log(details());
    </script>

Dans le code ci-dessus, displayDetails est la fonction ou la fermeture, ou mieux encore, se référant à l'illustration précédant le code. funtion displayDetails utilise le pouvoir de fermeture pour accéder aux variables en dehors de sa portée. Voici la chose. displayDetails est défini dans les détails, il accède à surName et lastName à partir de la portée externe et il conserve cet accès même en dehors de sa portée. Ou, d'une autre manière, les détails créent une portée avec surName et lastName, displayDetails accède à cette portée, displayDetail renvoie une chaîne utilisant surName et lastName, et les détails renvoient le résultat de displayDetails. console.log(détails()); appelle displayDetails, accédant aux variables de portée externe.
Le résultat de ce code est hé John Mercy, vous avez été enregistré
Le résultat est affiché ci-dessous

Maintenant que vous comprenez la fermeture, voyons les avantages de la fermeture dans l'écriture de code Javascript.

Variables dans les fermetures

• Variables locales : Les variables déclarées dans la fonction, sont accessibles uniquement dans la portée de la fonction et ne sont pas accessibles en dehors de la portée.
• Variables externes : Les variables déclarées dans une fonction externe sont accessibles à la fonction interne
• Variables globales : Variables déclarées en dehors de toutes fonctions, accessibles de n'importe où

Fonctions en clôture

• Fonctions internes : ce sont des fonctions définies au sein d'une autre fonction qui ont accès à la portée externe
• Fonction externe : cette fonction définit la portée des fonctions internes
• Expressions de fonction : les fonctions définies comme expressions peuvent être utilisées comme fermetures

Portée des fermetures

• Portée lexicale : les fonctions internes ont accès à la portée externe.
• Portée dynamique : la portée est déterminée au moment de l'exécution (non utilisée en javascript).

Quels sont les avantages de la fermeture ?

• Masquage des données : protection des données contre les accès externes Voyons dans le code ci-dessous un exemple de code qui présente ces données masquées

<script>
        function details() {
            let surName = 'john';
            let lastName = 'mercy';
            function displayDetails() {
                return `hey ${surName} ${lastName} you have been registered`;
            }
            return displayDetails();
        }
        console.log(details());
    </script>

Dans le code ci-dessus, la fonction Personne prend deux arguments : nom et âge, Cette fonction crée un nouvel objet personne. A l'intérieur de la fonction, deux variables privées sont déclarées : privateName et privateAge. Ces variables reçoivent les valeurs transmises à la fonction personne (nom et âge). Ces variables sont privées car elles sont déclarées avec let et ne sont pas directement accessibles en dehors de la fonction Person. Les objets de retour sont également créés avec trois méthodes. Ces trois méthodes fournissent un accès contrôlé aux variables privées. Ainsi, la fonction Person crée une fermeture, permettant à l'objet renvoyé d'accéder à des variables privées. De plus, les variables privées sont masquées de tout accès externe, assurant ainsi la protection des données.

• Encapsulations : regroupement de données et de méthodes
• Préservation du contexte : conservation du contexte dans les appels asynchrones.

Cas d'utilisation courants de fermeture

• Écouteurs d'événements ou gestion d'événements : préservation du contexte de l'événement. Voici un code simple de gestion des événements

<script>
        function details() {
            let surName = 'john';
            let lastName = 'mercy';
            function displayDetails() {
                return `hey ${surName} ${lastName} you have been registered`;
            }
            return displayDetails();
        }
        console.log(details());
    </script>

Voici ce qui s'est passé dans le code. Nous définissons une fonction createClickCounter qui renvoie une autre fonction. Dans createClickCounter, nous déclarons une variable clickCounter initialisée à 0.
La fonction renvoyée incrémente clickCounter et met à jour le contenu textuel de clickCounterElement. Nous appelons createClickCounter() pour créer une fermeture et l'attribuer à la variable counter. Nous attachons la fonction de compteur à l'événement de clic du bouton à l'aide de addEventListener.

La fonction compteur est une fermeture car elle a accès à sa propre portée, a accès à la portée de la fonction externe (createClickCounter()), conserve l'état de clickCounter entre les appels de fonction.

• Fonctions de rappel : préservation du contexte dans les appels asynchrones.
• Modules privés : création de variables et fonctions privées

Conclusion

Les fermetures JavaScript permettent aux développeurs d'écrire du code efficace, modulaire et sécurisé. En maîtrisant les variables, les fonctions et la portée, les développeurs peuvent exploiter tout le potentiel des fermetures. Les fermetures permettent l'encapsulation des données, la préservation de l'état et des variables privées, améliorant ainsi la qualité et la maintenabilité du code. Grâce à cette compréhension fondamentale, les développeurs peuvent relever des défis Javascript complexes en toute confiance. L'utilisation efficace des fermetures est essentielle pour les applications JavaScript évolutives, robustes et efficaces.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!