Comment comprendre les fermetures en js

La fermeture est une difficulté et une fonctionnalité majeure de JavaScript. De nombreuses applications avancées reposent sur des fermetures. Cet article partage principalement avec vous comment comprendre les fermetures en js. Les amis qui en ont besoin peuvent y jeter un œil

1. Pour comprendre les fermetures, vous devez d'abord comprendre la portée variable spéciale de JavaScript.

Il n'y a que deux étendues de variables : les variables globales et les variables locales.

La particularité du langage JavaScript est que les variables globales peuvent être lues directement à l'intérieur de la fonction, mais les variables locales à l'intérieur de la fonction ne peuvent pas être lues en dehors de la fonction.

Remarque : lorsque vous déclarez des variables dans une fonction, assurez-vous d'utiliser la commande var. Si vous ne l'utilisez pas, vous déclarez en fait une variable globale !

2. Comment lire les variables locales à l'intérieur d'une fonction depuis l'extérieur ?

Pour diverses raisons, nous avons parfois besoin d'obtenir des variables locales à l'intérieur d'une fonction. Cependant, comme mentionné ci-dessus, dans des circonstances normales, cela est impossible ! Cela ne peut être réalisé que grâce à des solutions de contournement.

C'est-à-dire définir une autre fonction à l'intérieur de la fonction.

Dans le code ci-dessus, la fonction f2 est incluse dans la fonction f1. À ce stade, toutes les variables locales à l'intérieur de f1 sont visibles par f2. Mais l’inverse ne fonctionne pas. Les variables locales à l’intérieur de f2 sont invisibles pour f1.

function f1(){
　　　　var n=999;
　　　　function f2(){　　　　　　alert(n); // 999　　　　}
　　}

Il s'agit de la structure unique de "portée de chaîne" du langage Javascript

L'objet enfant recherchera les variables de tous les objets parents niveau par niveau. Par conséquent, toutes les variables de l’objet parent sont visibles par l’objet enfant, mais l’inverse n’est pas vrai.

Puisque f2 peut lire les variables locales dans f1, alors tant que f2 est utilisé comme valeur de retour, ne pouvons-nous pas lire ses variables internes en dehors de f1 ?

3. Le concept de fermeture

La fonction f2 dans le code ci-dessus est une fermeture.

Les définitions des fermetures dans diverses littératures professionnelles sont très abstraites. Ma compréhension est la suivante : une fermeture est une fonction qui peut lire les variables internes d'autres fonctions.

Puisqu'en JavaScript, seules les sous-fonctions à l'intérieur de la fonction peuvent lire les variables locales, la fermeture peut être simplement comprise comme "une fonction définie à l'intérieur d'une fonction".

Ainsi, par essence, la fermeture est un pont reliant l'intérieur d'une fonction à l'extérieur de la fonction.

4. Utilisations des fermetures

Les fermetures peuvent être utilisées dans de nombreux endroits. Il a deux utilisations principales. L'une consiste à lire les variables à l'intérieur de la fonction comme mentionné précédemment, et l'autre est de conserver les valeurs de ces variables en mémoire et de ne pas être automatiquement effacées après l'appel de f1.

Pourquoi cela se produit-il ? La raison en est que f1 est la fonction parent de f2 et que f2 est affecté à une variable globale, ce qui fait que f2 est toujours en mémoire, et l'existence de f2 dépend de f1, donc f1 est toujours en mémoire et ne sera pas supprimé. une fois l'appel terminé, recyclé par le mécanisme de récupération de place (garbage collection).

Une autre chose à noter dans ce code est la ligne "nAdd=function(){n+=1}". Tout d'abord, le mot-clé var n'est pas utilisé avant nAdd, donc nAdd est plutôt une variable globale. que les variables locales. Deuxièmement, la valeur de nAdd est une fonction anonyme, et cette fonction anonyme elle-même est également une fermeture, donc nAdd est équivalent à un setter, qui peut opérer sur des variables locales à l'intérieur de la fonction en dehors de la fonction.

5. Points à noter lors de l'utilisation de fermetures

(1) Étant donné que les fermetures entraîneront le stockage des variables de la fonction en mémoire, la consommation de mémoire est très importante. Par conséquent, les fermetures ne peuvent pas être abusées, sinon cela entraînerait des problèmes de performances sur la page Web et pourrait provoquer des fuites de mémoire dans IE. La solution consiste à supprimer toutes les variables locales inutilisées avant de quitter la fonction.

(2) La fermeture modifiera la valeur de la variable à l'intérieur de la fonction parent en dehors de la fonction parent. Par conséquent, si vous utilisez la fonction parent comme objet, la fermeture comme méthode publique et les variables internes comme valeur privée, vous devez faire attention à ne pas modifier librement la valeur de la variable à l'intérieur de la fonction parent.

Recommandations associées :

javascript compréhension approfondie des fermetures js

Explication détaillée de la fermeture JS

exemples multiples de code de fermeture JS

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!