Analisis ringkas tentang penutupan javascript (Penutupan) contoh_kemahiran javascript

Contoh dalam artikel ini menerangkan penggunaan penutupan javascript (Penutupan). Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

penutupan diterjemahkan sebagai "penutupan", dan saya merasakan perkara ini dibungkus dengan cara yang terlalu akademik. Mari kita bincangkan secara ringkas dengan merujuk kepada buku dan sumber dalam talian (sila beri perhatian kepada sebarang pemahaman yang tidak sesuai).

1. Apakah itu penutupan

Jawapan rasmi: Apa yang dipanggil "penutupan" merujuk kepada ungkapan (biasanya fungsi) yang mempunyai banyak pembolehubah dan persekitaran yang terikat pada pembolehubah ini, jadi pembolehubah ini juga merupakan sebahagian daripada ungkapan.

Setelah membaca definisi di atas, jika anda bukan pakar, saya sangat percaya bahawa anda akan bertanya dengan marah seperti saya: Adakah ini bahasa manusia tmd?
Untuk memahami penutupan, kod adalah yang paling meyakinkan. Berikut ialah kod:

function funcTest()
{
 var tmpNum=100; //私有变量
 //在函数funcTest内定义另外的函数作为funcTest的方法函数
 function innerFuncTest(
 {
    alert(tmpNum); //引用外层函数funcTest的临时变量tmpNum
 }
 return innerFuncTest; //返回内部函数
}
//调用函数
var myFuncTest=funcTest(); 
myFuncTest();//弹出100

Dalam kod di atas, komen telah ditulis dengan jelas. Sekarang kita boleh memahami "penutupan" seperti ini: tentukan fungsi lain dalam badan fungsi sebagai fungsi kaedah objek sasaran (dalam contoh, tentukan fungsi lain innerFuncTest sebagai fungsi kaedah funcTest dalam fungsi funcTest), dan fungsi kaedah objek ini adalah sebaliknya. Datang untuk merujuk pembolehubah sementara dalam badan fungsi luar (penutupan ialah mekanisme untuk mengekalkan nilai pembolehubah secara tidak langsung. Dalam contoh, fungsi dalaman innerFuncTest merujuk kepada pembolehubah sementara tmpNum fungsi luar funcTest. Ia mesti diperhatikan di sini bahawa pembolehubah sementara boleh dimasukkan ke dalam fungsi luar semua pembolehubah tempatan yang diisytiharkan, parameter dan fungsi dalaman yang diisytiharkan). Apabila salah satu daripada fungsi dalaman ini dipanggil di luar fungsi luar yang mengandunginya, penutupan terbentuk (dalam contoh, apabila memanggil fungsi, myFuncTest sebenarnya memanggil fungsi innerFuncTest, yang bermaksud bahawa fungsi dalaman funcTest, innerFuncTest dipanggil di luar funcTest, penutupan dibuat).

2. Dua contoh penggunaan penutupan

Berikut ialah dua contoh Satu adalah kerana penutupan menyebabkan masalah, dan satu lagi menggunakan penutupan untuk mengikat parameter secara bijak melalui skop fungsi.

Serpihan markup HTML yang berkaitan dengan dua contoh ini adalah seperti berikut:

<a href="#" id="closureTest0">利用闭包的例子（1秒后会看到提示）</a><br />
<a href="#" id="closureTest1">由于闭包导致问题的例子1</a><br />
<a href="#" id="closureTest2">由于闭包导致问题的例子2</a><br />
<a href="#" id="closureTest3">由于闭包导致问题的例子3</a><br />

(1) Masalah yang disebabkan oleh penutupan

Terdapat 4 elemen 3499910bf9dac5ae3c52d5ede7383485 dalam serpihan teg HTML di atas Sekarang kita perlu menetapkan pengendali acara kepada tiga yang terakhir supaya mereka melaporkan pesanan mereka dalam halaman apabila pengguna mengklik Apabila memaut ke pautan ke-2, ia melaporkan "Anda mengklik pada pautan pertama". Untuk melakukan ini, jika anda menulis fungsi berikut yang menambah pengendali acara untuk tiga pautan terakhir:

function badClosureExample(){
  for (var i = 1; i <4; i++) {
    var element = document.getElementById('closureTest' + i);
    element .onclick = function(){
      alert('您单击的是第' + i + '个链接');
    }
  }
}

Kemudian, panggil fungsi ini selepas halaman dimuatkan (jika tidak ralat mungkin dilaporkan):

window.onload = function(){
  badClosureExample();
}

Lihat keputusan berjalan Jika anda mengklik pada tiga pautan terakhir, apakah maklumat yang akan anda lihat dalam kotak amaran? ——Semuanya ialah "Anda telah mengklik pada pautan ke-4". Adakah ia mengejutkan anda? kenapa?

Analisis: Oleh kerana pengendali peristiwa diperuntukkan kepada element.onclick dalam fungsi badClosureExample(), iaitu, fungsi tanpa nama onclick hanya dipanggil selepas fungsi badClosureExample() selesai (apabila pengguna mengklik pautan). Apabila memanggil, pembolehubah i perlu dinilai Penghurai akan terlebih dahulu mencari di dalam pengendali acara, tetapi i tidak ditakrifkan. Kemudian, cari dalam fungsi badClosureExample() Ia ditakrifkan pada masa ini, tetapi nilai i ialah 4 (gelung for akan berhenti melaksanakan hanya jika i lebih besar daripada 4). Oleh itu, nilai itu diperolehi - apa yang akan dilakukan oleh penutupan (fungsi tanpa nama) jika ia menggunakan pembolehubah dalam skop fungsi luarnya (badClosureExample). Selain itu, ini juga disebabkan oleh fakta bahawa fungsi tanpa nama itu sendiri tidak boleh melepasi parameter (dan oleh itu tidak dapat mengekalkan skopnya sendiri).

Jadi bagaimana untuk menyelesaikan masalah dalam contoh ini? Sebenarnya, terdapat banyak kaedah (anda juga boleh menulisnya sendiri dan lihat).

function popNum(oNum){
  return function(){
          alert('您单击的是第'+oNum+'个链接');
  }
}
function badClosureExample(){
  for (var i = 1; i <4; i++) {
    var element = document.getElementById('closureTest' + i);
    element .onclick =new popNum(i);
    }
}

(2), penggunaan penutup yang bijak untuk mengikat parameter

Masih dengan serpihan HTML di atas, kami mahu menangguhkan kotak amaran muncul apabila pengguna mengklik pautan pertama Bagaimana untuk mencapai ini? Jawapannya ialah menggunakan fungsi setTimeout(), yang memanggil fungsi selepas bilangan milisaat tertentu, seperti:

Salin kod Kod adalah seperti berikut:

setTimeout(someFunc,1000);

Tetapi masalahnya ialah parameter tidak boleh dihantar ke fungsi someFunc. Masalah ini boleh diselesaikan dengan mudah menggunakan penutupan:

function goodClosureExample(oMsg){
  return function(){
    alert(oMsg);
  };
}

Fungsi goodClosureExample digunakan untuk mengembalikan fungsi tanpa nama (penutupan). Dan kita boleh menjadikan fungsi tanpa nama yang dikembalikan mengikat parameter dengan memberikannya parameter, seperti:

Salin kod Kod adalah seperti berikut:

var good = goodClosureExample('Parameter ini terikat melalui penutupan') ;

而此时，就可以将绑定了参数的good函数传递给setTimeout()实现延时警告了：

复制代码 代码如下:

setTimeout(good,1000) //此时good中已经绑定了参数

最后，测试通过的完整代码：

window.onload = function(){
  var element = document.getElementById('closureTest0');
  if (element) {
    var good = goodClosureExample('这个参数是由闭包绑定的');
    element.onclick = function(){
      setTimeout(good, 1000); //延迟1秒弹出提示
    }
  }
}

3、javascript的垃圾回收原理

（1）、在javascript中，如果一个对象不再被引用，那么这个对象就会被GC回收；

（2）、如果两个对象互相引用，而不再被第3者所引用，那么这两个互相引用的对象也会被回收。

在js中使用闭包，往往会给javascript的垃圾回收器制造难题。尤其是遇到对象间复杂的循环引用时，垃圾回收的判断逻辑非常复杂，搞不好就有内存泄漏的危险，所以，慎用闭包。ms貌似已经不建议使用闭包了。

希望本文所述对大家JavaScript程序设计有所帮助。