Parlez des compétences javascript close_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.
Il n'y a rien de plus 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.

　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 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, 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 du terme « clôture » dans diverses publications 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 d'une fonction peuvent lire les variables locales, les fermetures peuvent être simplement comprises comme des « fonctions définies dans une fonction ».
Ainsi, 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 remarquable dans ce code est la ligne "nAdd=function(){n =1}". Premièrement, 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 est de 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()()); 

Encore une chose : comment cela fonctionne-t-il en javascript ?

var fullname = ‘John Doe'; 
var obj = { 
fullname: ‘Colin Ihrig', 
prop: { 
fullname: ‘Aurelio De Rosa', 
getFullname: function() { 
return this.fullname; 
} 
} 
};

console.log(obj.prop.getFullname());

var test = obj.prop.getFullname;

console.log(test());

Réponse
La réponse est Aurelio De Rosa et John Doe. La raison en est que dans une fonction, le comportement de celle-ci dépend de la manière dont la fonction JavaScript est appelée et définie, et pas seulement de la manière dont elle est définie.
Dans le premier appel console.log(), getFullname() est appelé en fonction de l'objet obj.prop. Le contexte fait donc référence à ce dernier et la fonction renvoie le nom complet de l'objet. En revanche, lorsque getFullname() est affecté à la variable de test, le contexte fait référence à l'objet global (fenêtre). En effet, test est implicitement défini comme propriété de l'objet global. Pour cette raison, la fonction renvoie le nom complet de la fenêtre, qui est la valeur définie sur la première ligne.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à tout le monde de comprendre à nouveau les fermetures JavaScript.