Comprendre les fermetures js en une minute_javascript skills

Qu'est-ce qu'une fermeture ?
Regardez d'abord un morceau de code :

function a(){
  var n = 0;
  function inc() {
    n++;
    console.log(n);
  }
  inc(); 
  inc(); 
}
a(); //控制台输出1，再输出2

Faites simple. Regardons à nouveau un morceau de code :

function a(){
  var n = 0;
  this.inc = function () {
    n++; 
    console.log(n);
  };
}
var c = new a();
c.inc();  //控制台输出1
c.inc();  //控制台输出2

Faites simple.

Qu'est-ce qu'une fermeture ? C'est la clôture !

Les fonctions qui ont accès à des variables dans le cadre d'une autre fonction sont des fermetures. Ici, la fonction inc accède à la variable n dans le constructeur a, donc une fermeture est formée.

Regardez à nouveau un morceau de code :

function a(){
  var n = 0;
  function inc(){
    n++; 
    console.log(n);
  }
  return inc;
}
var c = a();
c();  //控制台输出1
c();  //控制台输出2

Voyez comment ça marche :

var c = couter(), cette phrase couter() renvoie la fonction inc, alors cette phrase est équivalente à var c = inc;

c(), cette phrase est équivalente à inc(); Notez que , le nom de la fonction est juste un identifiant (pointeur vers la fonction), et () est le fonction d'exécution.

La traduction des trois phrases suivantes est : var c = inc; inc(); inc();, est-ce différent du premier morceau de code ? Non.

Qu'est-ce qu'une fermeture ? C'est la clôture !

Tous les tutoriels de manuels aiment utiliser le dernier paragraphe pour expliquer les fermetures, mais je pense que cela complique le problème. Ce qui est renvoyé ici est le nom de la fonction. Les étudiants qui n'ont pas vu la programmation C/C++ de Tan Haoqiang ne réalisent peut-être pas immédiatement la différence entre utiliser () et non. En d'autres termes, cette méthode d'écriture a son propre piège. Bien que cette façon d'écrire soit plus élégante, j'aime quand même simplifier le problème. Regardez le code 1 et le code 2. Êtes-vous toujours confus au sujet de l'appel de fonction ? Êtes-vous toujours confus au sujet de la valeur de n ?

Pourquoi tu l’écris comme ça ?
Nous savons que chaque fonction de js est une petite pièce sombre qui peut obtenir des informations du monde extérieur, mais le monde extérieur ne peut pas voir directement le contenu à l'intérieur. Mettez la variable n dans une petite pièce noire. À l'exception de la fonction inc, il n'y a pas d'autre moyen d'accéder à la variable n. De plus, définir une variable n avec le même nom en dehors de la fonction a ne s'affecte pas. "encapsulation" .

La raison pour laquelle return est utilisé pour renvoyer l'identifiant de fonction inc est parce que la fonction inc ne peut pas être appelée directement en dehors de la fonction a, donc return inc est lié à l'extérieur. Ceci dans le code 2 lie également inc à l'extérieur.

Pièges courants
Regardez ça :

function createFunctions(){
  var result = new Array();
  for (var i=0; i < 10; i++){
    result[i] = function(){
      return i;
    };
  }
  return result;
}
var funcs = createFunctions();
for (var i=0; i < funcs.length; i++){
  console.log(funcs[i]());
}

À première vue, je pensais qu'il produirait 0 ~ 9, mais je n'ai jamais pensé qu'il produirait 10 10 s ?

Le piège ici est : La fonction avec () est la fonction d'exécution ! Une phrase simple comme var f = function() { alert('Hi'); ne fera pas apparaître la fenêtre. Ce n'est que lorsqu'elle est suivie de la phrase f(); exécuté. La traduction du code ci-dessus est :

var result = new Array(), i;
result[0] = function(){ return i; }; //没执行函数，函数内部不变，不能将函数内的i替换！
result[1] = function(){ return i; }; //没执行函数，函数内部不变，不能将函数内的i替换！
...
result[9] = function(){ return i; }; //没执行函数，函数内部不变，不能将函数内的i替换！
i = 10;
funcs = result;
result = null;

console.log(i); // funcs[0]()就是执行 return i 语句，就是返回10
console.log(i); // funcs[1]()就是执行 return i 语句，就是返回10
...
console.log(i); // funcs[9]()就是执行 return i 语句，就是返回10

Pourquoi seul le résultat est-il collecté et pas moi ? Parce que je suis toujours référencé par fonction. Tout comme au restaurant, les assiettes sont toujours limitées, le serveur va donc patrouiller autour de la table pour récupérer les assiettes vides, mais comment ose-t-il récupérer les assiettes qui contiennent encore des légumes ? Bien sûr, si vous videz manuellement la vaisselle sur l'assiette (= nul), l'assiette sera emportée. C'est ce qu'on appelle le mécanisme de recyclage de la mémoire.

Quant à savoir comment la valeur de i peut encore être conservée, en fait, après avoir lu jusqu'au début de l'article, il ne devrait y avoir aucune raison de s'inquiéter. Ne devrait-il pas manquer un morceau de nourriture dans l’assiette après en avoir mangé un seul morceau ?

Pour résumer
La fermeture est une fonction qui fait référence à une variable d'une autre fonction. La variable étant référencée, elle ne sera pas recyclée, elle peut donc être utilisée pour encapsuler une variable privée. C'est à la fois un avantage et un inconvénient Les fermetures inutiles ne feront qu'augmenter la consommation de mémoire ! De plus, lorsque vous utilisez des fermetures, vous devez également faire attention à savoir si la valeur de la variable répond à vos exigences, car elle est comme une variable privée statique. Les fermetures sont généralement mélangées à beaucoup de choses. Ce n'est qu'en entrant en contact avec elles que vous pourrez approfondir votre compréhension. Ce n'est que le début pour parler des choses de base.

Lien vers cet article : http://www.cnblogs.com/qieguo/p/5457040.html

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.