Perbincangan ringkas tentang penutupan dalam kemahiran javascript_javascript

Saya tidak memahami penutupan untuk masa yang lama Kemudian, saya belajar tentang skop dan isu berkaitan ini sebelum saya memahami pengetahuan berkaitan penutupan.
Penutup juga merupakan soalan wawancara biasa. Ringkasnya, ia adalah fungsi bersarang fungsi.

Berfungsi sebagai nilai pulangan:

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

Sebenarnya, kod ini tidak sukar difahami aaa menunjuk ke fungsi baharu yang dikembalikan oleh foo(), tetapi pembolehubah dirujuk dalam fungsi ini, jadi apabila fungsi foo dilaksanakan, pembolehubah a masih wujud dalam. ingatan dan tidak dilepaskan. Iaitu, a ialah 2 dan 3 masing-masing.

Fungsi sebagai parameter:

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

Mengikut pemahaman saya sebelum ini, apabila fungsi fn dilaksanakan dalam fungsi aaa, maka jika ia tidak mempunyai pembolehubah, pergi ke skop induk untuk mencari pembolehubah Ini adalah 100. Adakah hasilnya 100?

Malangnya, jawapannya adalah tidak. Hasilnya di sini ialah 10. Blog Cikgu Wang Fupeng menerangkannya dengan lebih baik.

Senario penggunaan penutupan

Oleh kerana saya masih baru, saya akan mengambil contoh mudah di sini. Apabila li diklik, kedudukan li dalam ul, iaitu nilai indeks, muncul.

kod html:

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

kod js:

Contoh 1:
Sila lihat kod di bawah Selepas menjalankannya, anda mendapati bahawa tidak kira li yang diklik, hasilnya adalah 3.

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

Oleh kerana tiada pembolehubah i dalam fungsi tanpa nama, apabila untuk tamat, kami klik pada tag li halaman Pada masa ini, i sudah 3.

Contoh 2:

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

Kali ini, kaedahnya adalah menggunakan fungsi sebagai nilai pulangan, dan lulus pembolehubah i melalui parameter fungsi laksana sendiri Kemudian, kerana fungsi pulangan merujuk kepada pembolehubah i, pembolehubah i tidak dilepaskan apabila gelung for tamat. Iaitu, nilai pembolehubah i disimpan dalam ingatan. Berdasarkan prinsip ini, mudah untuk menyebabkan kebocoran memori dalam versi IE yang lebih rendah.

Contoh 3:

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

Prinsip ini serupa dengan yang di atas.

Soalan temu duga penutup hadapan Xiaomi:

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

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

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

Jawapan saya:

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

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu semua orang yang mempelajari penutupan javascript.