Soalan Lazim JS: Mengapakah i yang muncul apabila diklik sentiasa petua one_javascript yang terakhir

Saya melihat ramai orang bertanya soalan ini dalam kumpulan bahagian hadapan, dan seseorang bertanya soalan ini sekali lagi malam ini, jadi saya menulis artikel untuk menyelesaikannya. Pertama, lihat pada kod Selepas mengklik li, nilai indeks yang sepadan dengan li semasa akan muncul. Begitu ramai orang menulis kod berikut.

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

Tetapi hasilnya tidak memuaskan untuk kesederhanaan, kami bersetuju bahawa terdapat 2 li dalam halaman. Selepas mengklik li, semua pop timbul adalah 2.
Mari kita analisis dahulu mengapa keputusannya ialah 1. Kita boleh membahagikan gelung kepada dua bahagian.

i = 0时,aLi[0].onclick = function(){alert(i)}
i = 1时,aLi[1].onclick = function(){alert(i)}
i = 2时，不满足条件跳出循环.

Apabila melaksanakan fungsi klik, akan terdapat rantai skop ini ialah senarai objek Kumpulan objek ini mentakrifkan pembolehubah dalam skop kod. (Jika anda ingin mengetahui lebih lanjut tentang kandungan objek berubah, anda boleh melihat objek berubah.) Apabila kita alert(i), kita akan mencari pembolehubah i dari dalam ke luar. Pada masa ini, terdapat dua objek pada rantai skop fungsi ini Pada masa ini, gelung telah tamat, dan nilai i pada masa ini ialah 2. Jadi apabila anda mengklik pada mana-mana li, pop timbul akan menjadi. 2, bukan nilai indeks yang kita mahu. Maksudnya ialah apa yang timbul ialah pembolehubah i, pembolehubah i, pembolehubah i. Sebut perkara penting tiga kali.

Jadi inilah persoalannya, bagaimana kita hendak menyelesaikan masalah ini. Apa yang perlu kita lakukan ialah menyimpan nilai i dalam skop dalaman setiap kali kita mengikat peristiwa kepada aLi[i]. Penyelesaiannya adalah seperti berikut.

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

Ini melibatkan konsep skop peringkat blok. Sebelum ES6 keluar, fungsi adalah cara utama untuk mencipta skop peringkat blok. Di sini kita meletakkan lapisan fungsi di luar aLi[i].onclick, menggunakan i sebagai parameter dan mari kita menganalisis semula keputusannya.

 i = 0时,
  (function(i){
   aLi[0].onclick = function(){
     alert(i);
   }
  })(0)
  i = 1时,
  (function(i){
   aLi[1].onclick = function(){
     alert(i);
   }
  })(1)
  i = 2时，不满足条件跳出循环.

Disebabkan lapisan tambahan pembungkusan fungsi laksana sendiri, apabila kita mengklik li, akan terdapat tiga peringkat skop Dari dalam ke luar, ia adalah: objek berubah di dalam fungsi klik, objek berubah fungsi laksana sendiri dan skop paling luar Objek tetingkap lapisan. Semasa mencari tahap kedua, i telah ditemui I bagi fungsi laksana sendiri adalah sama dengan nilai parameter yang diluluskan, dan nilai i pada masa itu telah disimpan bersamaan, jadi nilai indeks yang sepadan muncul.

Izinkan saya berkongsi dengan anda masalah js biasa dengan mengklik pada li boleh memaparkan indeks li semasa dan fungsi innerHTML

Mengklik pada salah satu daripadanya akan menghasilkan makluman berikut:

Mengikut pemikiran biasa kami, kod tersebut hendaklah ditulis seperti ini:

var myul = document.getElementsByTagName("ul")[0];
  var list = myul.getElementsByTagName("li");
 
  function foo(){
    for(var i = 0, len = list.length; i < len; i++){
      list[i].onclick = function(){
        alert(i + "----" + this.innerHTML);
      }
    }
  }
  foo();

Tapi malangnya, hasilnya begini:

Mengapa indeks sentiasa 4? Ini disebabkan oleh kekurangan skop peringkat blok dalam js. Berikut adalah tiga penyelesaian

1. Gunakan penutupan

<script type="text/javascript">
var myul = document.getElementsByTagName("ul")[0];
var list = myul.getElementsByTagName("li");
function foo(){
  for(var i = 0, len = list.length; i < len; i++){
    var that = list[i];
    list[i].onclick = (function(k){
      var info = that.innerHTML;
      return function(){
        alert(k + "----" + info);
      };
    })(i);
  }
}
foo();
</script>

2 Gunakan ciri baharu let in ES6 untuk mengisytiharkan pembolehubah

Pembolehubah yang diisytiharkan dengan let akan mempunyai skop peringkat blok, yang jelas memenuhi keperluan Walau bagaimanapun, perlu diambil perhatian bahawa anda perlu menambah 'guna ketat' (gunakan mod ketat) untuk berkuat kuasa

<script type="text/javascript">
var myul = document.getElementsByTagName("ul")[0];
var list = myul.getElementsByTagName("li");
function foo(){'use strict'
  for(let i = 0, len = list.length; i < len; i++){
    list[i].onclick = function(){
      alert(i + "----" + this.innerHTML);
    }
  }
}
foo();
</script>

3 Perkenalkan jquery dan gunakan pada atau wakilkan untuk mengikat acara (semuanya mempunyai ciri proksi acara)

<script type="text/javascript" src="jquery-1.8.2.min.js"></script>

<script type="text/javascript">
$("ul").delegate("li", "click", function(){
  var index = $(this).index();
  var info = $(this).html();
  alert(index + "----" + info);
});
</script>
<script type="text/javascript">
$("ul").on("click", "li", function(){
  var index = $(this).index();
  var info = $(this).html();
  alert(index + "----" + info);
});
</script>