Explication détaillée de l'écriture et de la fonction des fermetures en javascript

1. Qu'est-ce qu'une fermeture

Une fermeture est une fonction qui a la permission d'accéder aux variables dans une autre portée de fonction.

En termes simples, JavaScript permet l'utilisation de fonctions internes - c'est-à-dire que les définitions de fonction et les expressions de fonction sont situées dans le corps de fonction d'une autre fonction. De plus, ces fonctions internes peuvent accéder à toutes les variables locales, paramètres et autres fonctions internes déclarées dans la fonction externe où ils résident. Lorsque l'une de ces fonctions internes est appelée en dehors de la fonction externe les contenant, une fermeture est formée.

2. La portée des variables

Pour comprendre les fermetures, vous devez d'abord comprendre la portée des variables.

Il n'y a que deux types de lunettes de variables: les variables globales et les variables locales.

La caractéristique spéciale du langage JavaScript est que les variables globales peuvent être lues directement dans les fonctions.

Les variables des fonctions externes sont accessibles dans la fonction interne car la chaîne de portée de la fonction interne contient la portée de la fonction externe;

Il peut également être compris comme: la plage d'action de la fonction interne rayonne à la plage d'action de la fonction externe;

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

D'un autre côté, les variables locales à l'intérieur de la fonction ne sont naturellement pas lues en dehors de la fonction.

 fonction f1 () {var n = 999;} alert (n); // erreur

Il y a un endroit pour noter ici. Lors de la déclaration des variables en interne, vous devez utiliser la commande var. Sinon, vous déclarez réellement une variable globale!

 fonction f1 () {n = 999;} f1 (); alert (n); // 999

3. Plusieurs façons d'écrire et d'utiliser des fermetures

3.1. Ajoutez des propriétés à la fonction

 fonction Cercle (r) {this.r = r; } Cercle.pi = 3.14159; Cercle.prototype.area = function () {return cercle.pi * this.r * this.r; } var c = nouveau cercle (1.0); alerte (c.area ()); //3.14159

3.2. Déclarez une variable et attribuez une fonction à la variable en tant que valeur.

 var cercle = function () {var obj = nouvel objet (); obj.pi = 3,14159; obj.area = fonction (r) {return this.pi * r * r; } return obj; } var c = new Circle (); alerte (c.area (1.0)); //3.14159

3.3. Cette méthode est utilisée plus fréquemment et est la plus pratique. var obj = {} doit déclarer un objet vide

 var cercle = {"pi": 3.14159, "zone": fonction (r) {return this.pi * r * r; }}; alerte (Circle.Area (1.0)); // 3.14159

4. La fonction principale de la fermeture

Les fermetures peuvent être utilisées dans de nombreux endroits. Il a deux plus grandes utilisations: l'une est que les variables à l'intérieur de la fonction peuvent être lues comme mentionné ci-dessus, et l'autre est que les valeurs de ces variables sont toujours conservées en mémoire.

4.1. Comment lire les variables locales de l'extérieur?

Pour diverses raisons, nous devons parfois obtenir des variables locales dans la fonction. Cependant, comme mentionné précédemment, dans des circonstances normales, cela ne peut pas être fait et ne peut être réalisé que par des solutions de contournement.

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

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

Dans le code ci-dessus, la fonction F2 est incluse à l'intérieur de la fonction F1, et toutes les variables locales à l'intérieur de F1 sont visibles par F2. Mais l'inverse n'est pas possible. Les variables locales à l'intérieur de F2 sont invisibles à F1. Il s'agit de la structure de la "chaîne de chaîne" unique à la langue javascript. Les objets enfants regarderont le niveau vers le haut par niveau pour toutes les variables d'objets parents. Par conséquent, toutes les variables de l'objet parent sont visibles par l'objet enfant, sinon ce n'est pas vrai.

Puisque F2 peut lire les variables locales en F1, tant que F2 est utilisée comme valeur de retour, ne pouvons-nous pas lire ses variables internes en dehors de F1?

 fonction f1 () {var n = 999; fonction f2 () {alert (n); } return f2;} var result = f1 (); result (); // 999

4.2. Comment toujours enregistrer la valeur d'une variable en mémoire?

 fonction f1 () {var n = 999; nadd = function () {n + = 1} fonction f2 () {alert (n); } return f2;} var result = f1 (); result (); // 999NADD (); result (); // 1000

Dans ce code, le résultat est en fait la fonction F2 de fermeture. Il fonctionne deux fois au total, la première valeur est de 999 et la deuxième valeur est de 1000. Cela prouve que la variable locale n dans la fonction F1 a été maintenue en mémoire et n'est pas effacée automatiquement après l'appel F1.

Pourquoi cela se produit-il? La raison en est que F1 est la fonction parent de F2, et 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. Par conséquent, F1 est toujours en mémoire et ne sera pas recyclé par le mécanisme de collecte des ordures une fois l'appel terminé.

Un autre point notable de ce code est que la ligne "nadd = function () {n + = 1}" est d'abord utilisée avant NADD, donc NADD est une variable globale, pas une variable locale. 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 secteur, qui peut fonctionner sur des variables locales à l'intérieur de la fonction en dehors de la fonction.

5. fermetures et cet objet

L'utilisation de cet objet dans les fermetures peut causer certains problèmes. Étant donné que l'exécution des fonctions anonymes est globale, son objet pointe généralement vers la fenêtre. Le code est le suivant:

 var name = "la fenêtre"; var objet = {name: "mon objet", getNameFun: function () {return function () {return this.name;};}}; alert (object.getNameFun () {}); // "la fenêtre" (en mode non stricte)

Enregistrez cet objet dans la portée externe dans une variable accessible par une fermeture, et la fermeture peut accéder à l'objet. Le code est le suivant:

 var name = "la fenêtre"; var objet = {name: "mon objet", getNameFun: function () {var that = this; return function () {return that.name;};}}; alert (object.getNameFun () {}); // "mon objet"

6. Fermetures et fuites de mémoire

Plus précisément, si un élément HTML est stocké dans la portée de la fermeture, cela signifie que l'élément ne peut pas être détruit. comme suit:

 function AssignHandler () {var élément = document.getElementById ("SomeElement"); élément.OnClick = function () {alert (element.id);}}

Le code ci-dessus crée une fermeture en tant que gestionnaire d'événements d'élément d'élément, et cette fermeture crée une référence circulaire. Étant donné que les fonctions anonymes enregistrent une référence à l'objet actif de AssignHandler (), il ne sera pas possible de réduire le nombre de références à l'élément. Tant qu'une fonction anonyme existe, le nombre de références à l'élément est d'au moins 1, de sorte que la mémoire qu'il occupe ne sera pas recyclée.

Résolvez les problèmes de recyclage interne en réécrivant le code:

 function AssignHandler () {var element = document.getElementById ("SomeElement"); var id = element.id; élément.onclick = function () {alert (id);} élément = null;}

Dans le code ci-dessus, la fermeture d'implémentation ne fait pas référence directement à l'élément et une référence sera toujours enregistrée dans l'objet actif contenant la fonction. Par conséquent, il est nécessaire de définir la variable d'élément sur NULL, afin que la mémoire qu'il occupe puisse être recyclée normalement.

7. Notes sur l'utilisation des fermetures

1) Étant donné que les fermetures entraîneront le stockage de toutes les variables de la fonction en mémoire et que la consommation de mémoire est très importante, les fermetures ne peuvent pas être abusées, sinon elle entraînera des problèmes de performances de la page Web et peut entraîner des fuites de mémoire dans IE. La solution consiste à supprimer toutes les variables locales qui ne sont pas utilisées avant de quitter la fonction.

2) La fermeture modifiera la valeur de la variable à l'intérieur de la fonction parent à l'extérieur de la fonction parent. Par conséquent, si vous utilisez la fonction parent comme un objet, utilisez la fermeture comme méthode publique et utilisez la variable interne comme propriété privée, veillez à ne pas modifier la valeur de la variable interne de la fonction parent à volonté.

Ce qui précède est une explication détaillée de l'écriture et de la fonction des fermetures dans JavaScript qui vous est présentée par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!