Une brève discussion sur les fermetures dans les compétences javascript_javascript

Je n'ai pas compris les fermetures pendant longtemps. Plus tard, j'ai découvert la portée et ce problème connexe avant de comprendre les connaissances liées à la fermeture.
La clôture est également une question d’entretien courante. Pour faire simple, il s’agit d’une fonction imbriquée.

Fonction comme valeur de retour :

function foo () {
  var a = 1;
  return function () {
   a++;
   console.log(a);
  }
}
var aaa = foo();
aaa(); //2
aaa(); //3

En fait, ce code n'est pas difficile à comprendre. aaa pointe vers une nouvelle fonction renvoyée par foo(), mais la variable a est référencée dans cette fonction, donc lorsque la fonction foo est exécutée, la variable a existe toujours dans la mémoire et n'est pas libéré. Autrement dit, a vaut respectivement 2 et 3.

Fonction en paramètre :

var a = 10;
function foo () {
console.log(a);
}
function aaa(fn) {
 var a = 100;
 fn();
}
aaa(foo);

D'après ma compréhension précédente, lorsque la fonction fn est exécutée dans la fonction aaa, alors si elle n'a pas de variable, allez dans la portée parent pour trouver la variable a. Ici, c'est 100. Le résultat est-il 100 ?

Malheureusement, la réponse est non. Le résultat ici est 10. Le blog du professeur Wang Fupeng l'explique mieux. Il a dit que la valeur de portée de cette fonction devrait être créée au lieu de la « portée parent ».

Scénarios d'utilisation des fermetures

Parce que je suis encore relativement nouveau, je vais prendre ici un exemple simple. Lorsque l'utilisateur clique sur li, la position de li dans ul, qui est la valeur d'index, apparaît.

Code HTML :

<ul>
  <li>001</li>
  <li>002</li>
  <li>003</li>
</ul>

code js :

Exemple 1 :
Veuillez regarder le code ci-dessous. Après l'avoir exécuté, vous constatez que quel que soit le lien sur lequel vous cliquez, le résultat est 3.

var aLi = document.getElementsByTagName('li');
for (var i = 0; i<aLi.length; i++) {
  aLi[i].onclick = function() {
   alert(i);
  }
}

Comme il n'y a pas de variable i dans la fonction anonyme, à la fin, on clique sur la balise li de la page. A ce moment, i vaut déjà 3.

Exemple 2 :

aLi[i].onclick = (function(i){
    return function(){
      alert(i);
    }
  })(i);

Cette fois, la méthode consiste à utiliser la fonction comme valeur de retour et à transmettre la variable i via les paramètres de la fonction auto-exécutable. Ensuite, comme la fonction de retour fait référence à la variable i, la variable i ne le fera pas. être libéré à la fin de la boucle for. Autrement dit, la valeur de la variable i est enregistrée en mémoire. Sur la base de ce principe, il est facile de provoquer des fuites de mémoire dans les versions inférieures d'IE.

Exemple 3 :

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

Ce principe est similaire à celui ci-dessus.

Questions d'entretien de clôture frontale Xiaomi :

function repeat (func, times, wait) {
} //这个函数能返回一个新函数，比如这样用

var repeatedFun = repeat(alert, 10, 5000)
//调用这个 repeatedFun ("hellworld")

//会alert十次 helloworld, 每次间隔5秒

Ma réponse :

function repeat (func, times, wait) {
  return function(str) {
    while (times >0) {
      setTimeout(function(){
        func(str);
      },wait);
      times--;
    }
  }
}

var repeatedFun = repeat(alert, 10, 100);
repeatedFun ("hellworld");

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à tous ceux qui apprennent les fermetures javascript.