Heim > Web-Frontend > js-Tutorial > Hauptteil

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

WBOY
Freigeben: 2016-05-16 15:59:25
Original
1105 Leute haben es durchsucht

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
Nach dem Login kopieren

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);
Nach dem Login kopieren

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>
Nach dem Login kopieren

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);
  }
}
Nach dem Login kopieren

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);
Nach dem Login kopieren

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);
}
Nach dem Login kopieren

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秒

Nach dem Login kopieren

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");
Nach dem Login kopieren

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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!