Menganalisis isu pendaftaran acara yang disebabkan oleh kemahiran js closure

Menganalisis isu pendaftaran acara yang disebabkan oleh kemahiran js closure_javascript

WBOY

Lepaskan： 2016-05-16 15:07:52

asal

1313 orang telah melayarinya

Latar Belakang: Saya membaca beberapa artikel tentang rantaian skop js dan penutupan pada masa lapang saya, dan secara tidak sengaja melihat masalah yang saya hadapi sebelum ini, iaitu mendaftar pemacu acara untuk nod dom dalam untuk gelung , lihat kod di bawah untuk butiran:

<!DOCTYPE html>
<html>
 <head>
 <title>js闭包</title>
 <meta charset="utf-8" />
 </head>
 <body>
 <button id="anchor1">1</button>
 <button id="anchor2">2</button>
 <button id="anchor3">3</button>
 <script type="text/javascript" src="jquery-1.12.1.js"></script>
 <script type="text/javascript">
  function pageLoad(){
  for (var i = 1; i <=3; i++) { 
   var anchor = document.getElementById("anchor" + i);
   anchor.onclick = function () {
   console.log("anchor"+i);
   } 
  } 
  } 
  window.onload = pageLoad; 
 </script>
 </body>
</html>

Salin selepas log masuk

Menurut pemikiran biasa, hasilnya sepatutnya bahawa mengklik 3 butang akan masing-masing menggesa "anchor1", "anchor2", dan "anchor3". butang diklik, "anchor4" akan digesa.

Kenapa ni? Jangan risau, mari analisanya perlahan-lahan Ia termasuk pengetahuan tentang rantaian skop js dan penutupan, jadi saya tidak akan memperkenalkannya secara terperinci di sini.

Mula-mula mari lihat anchor.onclick Apakah ini? Ini adalah pengendali acara DOM tahap 0 Saya juga tahu. Adakah blogger itu seorang psikopat *************** Apa yang saya ingin katakan ialah anchor.onclick

ialah pengisytiharan pengendali acara, sama seperti var name="Xiao Ming". Ini diisytiharkan, tetapi ia belum dilaksanakan 🎜>

function pageLoad(){
  for (var i = 1; i <=3; i++) { 
  var anchor = document.getElementById("anchor" + i);
   anchor.onclick = function () {
   console.log("anchor"+i);
   } 
   if(i==2){
   debugger;//我们在这里debugger一下，然后在控制台手动触发#anchor1和#anchor2的点击事件
   }
  } 
 } 
 window.onload = pageLoad;

Salin selepas log masuk

Lihat, kami menggunakan penyahpepijat untuk menghentikan gelung apabila i==2, dan kemudian pergi ke konsol untuk mencetuskan peristiwa klik #anchor1 dan #anchor2 secara manual, dan konsol mencetak "anchor2".

Seluruh logiknya lebih kurang seperti ini: anchor.onclick sentiasa menyimpan rujukan i, dan i terus berubah semasa gelung, daripada i=1 kepada i=4 walaupun semasa gelung, anchor.onclick sekali Disimpan (nota perkataan "sekali"),

Terdapat tiga kes: 1, 2 dan 3, tetapi akhirnya saya menjadi 4, jadi tidak kira butang mana yang diklik, "anchor4" akan dikeluarkan

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.