Maison > interface Web > js tutoriel > qu'est-ce que la fermeture

qu'est-ce que la fermeture

一个新手
Libérer: 2017-09-08 13:12:50
original
1578 Les gens l'ont consulté

Qu'est-ce qu'une fermeture :

Une fermeture est une fonction qui a accès à une variable dans la portée d'une autre fonction.
–"Programmation avancée Javascript"

在这个函数fun2中可以访问另一个函数中的变量a,所以fun2()就是一个闭包。
function fun1 () { 
      var  a = 0; 
      function fun2 () {  
          console.log(a);  
      } 
      fun2(); }
Copier après la connexion

 1. Comment appeler la fermeture en dehors de la fonction définie, méthode d'échappement :

  (1). fonction interne vers une variable globale ;

var globalVar; function outer() { 
      console.log(‘outer’); 
      function inner(){ 
          console.log(‘inner’); 
      } 
      globalVar = inner;       
      } outer(); // outer 
      globalVar(); // inner;
Copier après la connexion

Dans cet exemple, inner() s'échappe avec succès via la référence de la variable globale et peut maintenant être appelée globalement et peut faire référence à des variables externes. de ()

(2). 'Sauvegarder' la référence de la fonction interne en renvoyant la valeur

function outer() { 
      console.log(‘outer’); 
      function inner(){ 
          console.log(‘inner’); 
      }    
      return inner;       
      } 
      var fn = outer(); // outer 
      fn(); // inner;
Copier après la connexion

Dans cet exemple inner() en renvoyant le value Échappé avec succès, il peut maintenant être appelé globalement et la variable de external() peut être référencée

2. L'impact de l'appel de close en dehors de la fonction : augmentation de l'utilisation de la mémoire

Dans des conditions normales ; circonstances Une fois l'appel de fonction terminé, l'environnement d'exécution de la fonction quitte la pile d'environnement, les variables définies sont supprimées (la suppression est liée au mécanisme de récupération de place), les variables actives (objets variables) seront détruites et la mémoire sera libéré. Mais maintenant, comme la chaîne de portée de la fermeture inclut l'objet variable de la fonction externe, les variables de la fonction externe peuvent être à nouveau référencées. Le mécanisme de garbage collection ne supprimera pas les variables de la fonction externe et les objets variables de la fonction externe. fonction sont conservées en mémoire. Cela augmente l'utilisation de la mémoire.

3. La relation entre les fermetures et les variables : malentendus courants et techniques de résolution dans les fermetures

Les fermetures enregistrent l'intégralité de l'objet variable contenant la fonction, et les variables d'objet externes obtenues sont la fermeture La variable objet à l'heure à laquelle le package est appelé est généralement la dernière valeur de la variable de fonction externe.

Exemple :

function createFun() { 
      var result = []; 
      for ( var i = 0; i < 10; i++) { 
          result[i] = function() { 
              return i; 
          }; 
      } 
      return result; } var result = createFun(); console.log(result5); // 10
Copier après la connexion

La valeur de retour de la fonction externe ici est un tableau, et la valeur du tableau est une référence à une fonction différente (fermeture). Nous penserons à tort que chaque valeur de retour de chaque appel de fermeture est différente, mais en fait chaque fonction renvoie la même valeur. Parce que lorsque la fermeture est appelée, la fonction externe qui a appelé la fermeture a été exécutée à ce moment, i = 10 dans l'objet variable de la fonction externe, et la valeur de retour de notre fermeture est i, la fermeture obtiendra l'externe. objet variable au moment de l'appel, i à ce moment est 10.

Solution :

function createFun() { 
      var result = []; 
      for ( var i = 0; i < 10; i++) { 
          result[i] = function(num) { 
              return function() { 
                     return num; 
              }; 
           }(i); 
      } 
      return result; } var result = createFun(); console.log(result5); // 5
Copier après la connexion

Dans la boucle, on définit un tableau anonyme et on assigne le résultat de l'exécution immédiate de la fonction anonyme au tableau, où anonyme La fonction a un paramètre num. Chaque fois que i est passé à num en tant que paramètre, num obtiendra une valeur différente à chaque fois qu'elle est bouclée, donc une fonction différente est renvoyée à chaque fois (la différence est que la valeur num est différente). Lorsque la valeur du tableau est appelée en externe, elle renverra des valeurs différentes, comme prévu.

4. Faites attention à la valeur this dans la fermeture

Tout d'abord, concernant le point this de la fonction, il faut savoir que this pointe vers l'objet qui appelle la fonction If. il n'y a pas d'objet d'appel explicite, il pointe vers l'objet window.

Il est facile de se tromper sur le point this dans la fermeture, par exemple :

var name = “window”; 
      var o = { 
          name: “object”, 
          getName: function() { 
              return function() { 
                  return this.name; 
              }; 
          } 
      }; console.log(o.getName()()); // window
Copier après la connexion

On peut voir que la fermeture this pointe vers l'objet global. Après analyse, vous pouvez mettre o .getName()() s'écrit comme (o.getName())(). Cette expression équivaut à exécuter o.getName() dans la première étape. Cette fonction renvoie une fonction anonyme (fermeture). ), puis globalement. Cette fermeture est exécutée et n'est pas appelée via l'objet o, elle pointe donc vers l'objet global.

5. Le problème des fuites de mémoire, comment réduire l'utilisation inutile de la mémoire

function assignHandler() { 
          var ele = documnet.getElementById(“somenode”); 
          ele.onclick = function() { 
              console.log(ele.id); 
          }; 
          }
Copier après la connexion

Dans l'exemple ci-dessus, la méthode de définition d'ele est liée à l'anonyme fonction, donc ele enregistre une référence à la fonction anonyme, et la fermeture fait référence à la fonction contenant et fait également référence à l'objet ele, ce qui provoque une référence circulaire à l'objet ele (l'élément DOM occupe une grande quantité de mémoire. ) est toujours stocké en mémoire et ne peut pas être libéré, la solution est la suivante :

function assignHandler() { 
          var ele = documnet.getElementById(“somenode”); 
          var id = ele.id; 
          ele.onclick = function() { 
              console.log(id);    // 通过id值中介表面上解除了与ele的循环引用 
          }; 
          ele = null; // 手动解除引用 }
Copier après la connexion
.

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal