Mengapakah Gelung JavaScript Saya Sentiasa Mengeluarkan Nilai Akhir Pembolehubah Kaunter Apabila Melampirkan Pengendali Acara?

Anomali Gelung Terkenal JavaScript: Diterangkan

Isu gelung JavaScript yang terkenal timbul apabila cuba melampirkan pengendali acara pada elemen yang dijana secara dinamik menggunakan gelung. Dalam coretan berikut:

function addLinks() {
  for (var i = 0, link; i < 5; i++) {
    link = document.createElement("a");
    link.innerHTML = "Link " + i;
    link.onclick = function () {
      alert(i); // WRONG: i will always be 5
    };
    document.body.appendChild(link);
  }
}

Apabila mana-mana pautan yang dijana diklik, makluman sentiasa memaparkan "pautan 5." Ini kerana pembolehubah JavaScript yang ditakrifkan dengan var adalah skop fungsi, bukan skop blok. Apabila gelung berakhir, saya memegang nilai 5, dan semua fungsi dalaman merujuknya, membawa kepada output seragam.

Penyelesaian yang diperbetulkan terletak pada menangkap nilai i dalam penutupan. Pertimbangkan coretan ini:

function addLinks() {
  for (var i = 0, link; i < 5; i++) {
    link = document.createElement("a");
    link.innerHTML = "Link " + i;
    link.onclick = function (num) { // Closure around i
      return function () {
        alert(num); // num retains its original value
      };
    }(i); // Execute the outer function immediately to capture i
    document.body.appendChild(link);
  }
}

Dalam kes ini, num terikat pada nilai semasa i untuk setiap lelaran. Apabila fungsi dalaman dilaksanakan, num ditetapkan secara konsisten kepada nilai i pada saat pelaksanaan gelung.

Selain itu, wujud alternatif yang cekap yang memanfaatkan nod DOM untuk menyimpan data:

function linkListener() {
  alert(this.i);
}

function addLinks() {
  for (var i = 0; i < 5; ++i) {
    var link = document.createElement('a');
    link.appendChild(document.createTextNode('Link ' + i));
    link.i = i;
    link.onclick = linkListener;
    document.body.appendChild(link);
  }
}

Dengan melampirkan maklumat pada elemen DOM itu sendiri, keperluan untuk objek fungsi tambahan dielakkan, menambah baik kecekapan.

Atas ialah kandungan terperinci Mengapakah Gelung JavaScript Saya Sentiasa Mengeluarkan Nilai Akhir Pembolehubah Kaunter Apabila Melampirkan Pengendali Acara?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!