Explication détaillée des compétences de fermeture Javascript (Closure)_javascript

Voici mes notes d'étude, qui devraient être très utiles pour les débutants en Javascript.

1. Portée des variables

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

La portée des variables n'est rien de plus que deux types : 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.

var n=999;

function f1(){
　　alert(n);
}

f1(); // 999

En revanche, les variables locales au sein d'une fonction ne peuvent pas être lues en dehors de la fonction.

function f1(){
　　var n=999;
}

alert(n); // error

Il y a quelque chose à noter ici. Lorsque vous déclarez des variables dans une fonction, vous devez utiliser la commande var. Si vous ne l'utilisez pas, vous déclarez en fait une variable globale !

function f1(){
　　n=999;
}

f1();

alert(n); // 999

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

Pour diverses raisons, nous avons parfois besoin d'obtenir des variables locales au sein d'une fonction. Cependant, comme mentionné précédemment, cela n’est pas possible dans des circonstances normales et 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.

function f1(){

　　var n=999;

　　function f2(){
　　　　alert(n); // 999
　　}

}

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. Il s'agit de la structure "chain scope" propre au 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 ?

function f1(){

　　var n=999;

　　function f2(){
　　　　alert(n); 
　　}

　　return f2;

}

var result=f1();

result(); // 999

3. La notion de fermeture

La fonction f2 dans le code de la section précédente est une fermeture.

La définition de « clôture » dans diverses littératures professionnelles est très abstraite et difficile à comprendre. Je crois comprendre qu'une fermeture est une fonction qui peut lire les variables internes d'autres fonctions.

Étant donné que dans le langage Javascript, seules les sous-fonctions à l'intérieur de la fonction peuvent lire les variables locales, les fermetures peuvent être simplement comprises comme des « fonctions définies à l'intérieur d'une fonction ».

Donc, par essence, la fermeture est un pont reliant l’intérieur de la fonction à l’extérieur de la fonction.

4. Le but de la clôture

Les fermetures peuvent être utilisées dans de nombreux endroits. Ses plus grandes utilisations sont au nombre de deux. L'une consiste à lire les variables à l'intérieur de la fonction comme mentionné précédemment, et l'autre consiste à conserver les valeurs de ces variables en mémoire.

Comment comprendre cette phrase ? Veuillez regarder le code ci-dessous.

  function f1(){

　　　　var n=999;

　　　　nAdd=function(){n+=1}

　　　　function f2(){
　　　　　　alert(n);
　　　　}

　　　　return f2;

　　}

　　var result=f1();

　　result(); // 999

　　nAdd();

　　result(); // 1000

Dans ce code, le résultat est en fait la fonction de fermeture f2. Il a été exécuté deux fois, la première fois, la valeur était de 999, la deuxième fois, la valeur était de 1 000. Cela prouve que la variable locale n dans la fonction f1 est toujours stockée en mémoire et n'est pas automatiquement effacée 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 une variable globale, pas une variable locale. . Deuxièmement, la valeur de nAdd est une fonction anonyme, et la 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 des fermetures

1) Étant donné que les fermetures entraîneront le stockage des variables de la fonction en mémoire, ce qui consomme beaucoup de mémoire, les fermetures ne peuvent pas être abusées, sinon cela entraînerait des problèmes de performances sur la page Web et pourrait entraîner des fuites de mémoire dans C'est à dire. 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.

6. Questions

Si vous pouvez comprendre les résultats des deux morceaux de code suivants, vous devez comprendre le mécanisme de fonctionnement des fermetures.

Extrait de code 1

  var name = "The Window";

　　var object = {
　　　　name : "My Object",

　　　　getNameFunc : function(){
　　　　　　return function(){
　　　　　　　　return this.name;
　　　　　　};

　　　　}

　　};

　　alert(object.getNameFunc()());

Extrait de code 2

  var name = "The Window";

　　var object = {
　　　　name : "My Object",

　　　　getNameFunc : function(){
　　　　　　var that = this;
　　　　　　return function(){
　　　　　　　　return that.name;
　　　　　　};

　　　　}

　　};

　　alert(object.getNameFunc()());　  

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.