Eine kurze Diskussion über Abschlüsse in Javascript_Javascript-Kenntnissen

Ich habe Abschlüsse lange Zeit nicht verstanden. Später habe ich etwas über den Umfang und das damit verbundene Problem gelernt, bevor ich das Wissen über Abschlüsse verstanden habe.
Der Abschluss ist auch eine häufige Frage im Vorstellungsgespräch. Vereinfacht ausgedrückt handelt es sich um eine verschachtelte Funktion.

Funktion als Rückgabewert:

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

Tatsächlich ist dieser Code nicht schwer zu verstehen, aaa zeigt auf eine neue Funktion, die von foo() zurückgegeben wird, aber die Variable a wird in dieser Funktion referenziert, sodass die Variable a immer noch vorhanden ist, wenn die foo-Funktion ausgeführt wird den Speicher und wird nicht freigegeben. Das heißt, a ist 2 bzw. 3.

Funktion als Parameter:

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

Wenn die fn-Funktion in der aaa-Funktion ausgeführt wird, gehen Sie nach meinem bisherigen Verständnis zum übergeordneten Bereich, um die a-Variable zu finden. Ist das Ergebnis 100?

Leider lautet die Antwort „Nein“. Der Blog von Lehrer Wang Fupeng erklärt es besser. Er sagte, dass der Bereichswert dieser Funktion anstelle des „übergeordneten Bereichs“ erstellt werden sollte.

Nutzungsszenarien von Schließungen

Da ich noch relativ neu bin, werde ich hier ein einfaches Beispiel nehmen. Wenn Sie auf li klicken, wird die Position von li in ul angezeigt, bei der es sich um den Indexwert handelt.

HTML-Code:

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

JS-Code:

Beispiel 1:
Bitte schauen Sie sich den Code unten an. Nachdem Sie ihn ausgeführt haben, stellen Sie fest, dass das Ergebnis 3 ist, egal auf welches Li geklickt wird.

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

Da es in der anonymen Funktion keine i-Variable gibt, klicken wir zum Zeitpunkt des Endes auf das li-Tag der Seite. Zu diesem Zeitpunkt ist i bereits 3.

Beispiel 2:

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

Diesmal besteht die Methode darin, die Funktion als Rückgabewert zu verwenden und die Variable i über die Parameter der selbstausführenden Funktion zu übergeben. Da sich die Rückgabefunktion dann auf die i-Variable bezieht, wird die i-Variable dies nicht tun freigegeben werden, wenn die for-Schleife endet. Das heißt, der Wert der Variablen i wird im Speicher gespeichert. Basierend auf diesem Prinzip kann es in niedrigeren IE-Versionen leicht zu Speicherverlusten kommen.

Beispiel 3:

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

Dieses Prinzip ähnelt dem oben genannten.

Fragen zum Front-End-Abschlussinterview mit Xiaomi:

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

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

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

Meine Antwort:

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");

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für alle hilfreich sein, die das Schließen von Javascript lernen.