Compréhension facile des fermetures JavaScript

Le mécanisme de fermeture est au centre et la difficulté de JavaScript Cet article espère aider tout le monde à apprendre facilement les fermetures. Jetons-y un coup d'œil avec l'éditeur ci-dessous

Résumé

Le mécanisme de fermeture est au centre et la difficulté de Javascript. Cet article espère aider tout le monde à apprendre facilement les fermetures<.>

1. Qu'est-ce que la clôture ?

Une fermeture est une fonction qui peut accéder à des variables dans le cadre d'une autre fonction.

Ce qui suit répertorie les méthodes courantes d'implémentation de fermeture et explique le concept de fermeture avec des exemples

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

f1 est la fonction parent de f2, et f2 est affecté à une variable globale (valeur de retour) , 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 recyclé par le mécanisme de récupération de place (garbage collection) une fois l'appel terminé, ce qui forme une fermeture.

Donc, cela peut être compris de cette façon.

Le mécanisme de fermeture est que si la fonction A fait référence à une variable d'une autre fonction B, mais que A ne revient toujours pas après le retour de B, elle existe toujours En raison de la référence de A, tous les B. Les variables locales ne seront pas déconnectées lorsque B quitte et existeront jusqu'à ce que A se déconnecte. A ce moment, A est la fermeture.

2. Le pointeur this de la fermeture

Les fermetures sont généralement appelées dans l'environnement global, donc cela pointe généralement vers la fenêtre, qui est toujours nécessaire dans des situations spécifiques. En fonction de l'environnement d'exécution, en bref, cela indique l'environnement d'exécution.

Si vous avez besoin que le this de la fermeture pointe vers l'

objet contenant la fermeture, vous devez transmettre le this de l'objet contenant dans la fermeture en tant que variable.

3. Points à noter lors de l'utilisation des fermetures

1. Parce que les fermetures entraîneront le stockage des variables de la fonction en mémoire, la consommation de mémoire est importante. est très volumineux, les fermetures ne peuvent donc 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 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. Donc, si vous utilisez la fonction parent comme objet (

   objet), la fermeture comme méthode publique (méthode publique) et les variables internes comme ses propriétés privées (valeur privée) , vous devez faire attention à ne pas modifier la valeur de la variable interne de la fonction parent par hasard.

4. Résoudre une question courante d'entretien de clôture

Question :

function onMyLoad(){
  /*
  抛出问题:
  此题的目的是想每次点击对应目标时弹出对应的数字下标 0~4,但实际是无论点击哪个目标都会弹出数字5
  问题所在:
  arr 中的每一项的 onclick 均为一个函数实例(Function 对象),这个函数实例也产生了一个闭包域,
  这个闭包域引用了外部闭包域的变量,其 function scope 的 closure 对象有个名为 i 的引用,
  外部闭包域的私有变量内容发生变化,内部闭包域得到的值自然会发生改变
  */
  var arr = document.getElementsByTagName("p");
  for(var i = 0; i < arr.length;i++){
  arr[i].onclick = function(){
   alert(i);
  }
  }
 }

Solution

1 Ajoutez une couche de fonction à l'extérieur et passez i comme

paramètre de fonction. les variables à l'intérieur de la fonction sont enregistrées à chaque fois, ce qui n'est pas dans le même espace mémoire que le i externe. Chaque fois que la fonction est appelée, une variable locale est générée, on peut donc garantir que les valeurs enregistrées à chaque fois le sont. ne s’affectent pas.

for(var i = 0; i<arr.length;i++){
 arr[i].onclick = (function(arg){
  return function () {
   alert(arg);
  }
 })(i);
}

2. Utilisez le nouveau let ES6, changez la var i de la

boucle for pour let i, afin que le i actuel ne soit valable que dans ce cycle, donc à chaque cycle. i est en fait une nouvelle variable. Vous vous demandez peut-être, si la variable i est redéclarée à chaque cycle de la boucle, comment connaît-elle la valeur du cycle précédent et calcule-t-elle la valeur de ce cycle ? En effet, le moteur Javascript mémorisera en interne la valeur du cycle précédent, et lors de l'initialisation de la variable i de ce cycle, les calculs seront effectués sur la base du cycle précédent.

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!