Mengapa Penutupan dalam Gelung Menjadikan Semua Pautan Memaparkan Nilai yang Sama?

Penutupan JavaScript dalam Gelung: Demystified

Memahami Penutupan

Penutupan dalam JavaScript membenarkan fungsi mengakses pembolehubah dari luar segeranya skop, mewujudkan konteks data peribadi. Walau bagaimanapun, pembolehubah yang dirujuk oleh penutupan kekal boleh diakses walaupun selepas fungsi penutup telah selesai dilaksanakan.

Isu dengan Penutupan dalam Gelung

Pertimbangkan coretan kod berikut:

<code class="javascript">for (var i = 0; i < 5; i++) {
  link = document.createElement("a");
  link.innerHTML = "Link " + i;
  link.onclick = function (num) {
    return function () {
      alert(num);
    };
  }(i);
  document.body.appendChild(link);
}</code>

Dalam contoh ini, nilai i yang dihantar ke fungsi dalaman sebagai num ditangkap oleh penutupan mewujudkan "pembolehubah dikongsi" merentas semua elemen pautan. Ini bermakna mengklik mana-mana pautan akan sentiasa memaparkan nilai terakhir i (4 dalam kes ini).

Menggunakan IIFE (Ungkapan Fungsi Yang Dikenakan Segera) sebagai Kilang Fungsi

Untuk menyelesaikan isu ini, buat IIFE untuk setiap pautan, menghantar nilai i sebagai hujah:

<code class="javascript">function addLinks() {
  for (var i = 0; i < 5; i++) {
    link = document.createElement("a");
    link.innerHTML = "Link " + i;

    // IIFE used as a function factory
    link.onclick = (function (num) {
      return function () {
        alert(num);
      };
    })(i);
    document.body.appendChild(link);
  }
}</code>

Dalam versi ini, setiap IIFE mencipta skop terpencil di mana nilai i dibekukan pada masa penciptaan fungsi. Ini memastikan setiap elemen pautan mempunyai salinan peribadi i sendiri, tanpa mengira susunan ia diklik.

Pendekatan Alternatif: Penjana Fungsi

Pilihan lain ialah untuk menggunakan penjana fungsi untuk mencipta fungsi yang merujuk nilai semasa i:

<code class="javascript">function generateMyHandler(x) {
  return function () {
    alert(x);
  };
}

for (var i = 0; i < 5; i++) {
  link = document.createElement("a");
  link.innerHTML = "Link " + i;
  link.onclick = generateMyHandler(i);
  document.body.appendChild(link);
}</code>

Dalam kes ini, fungsi generateMyHandler mengembalikan fungsi baharu yang telah terikat kepada nilai khusus i pada masa panggilan fungsi.

Dengan memahami cara penutupan JavaScript menangkap pembolehubah dan menggunakan teknik yang sesuai untuk mencipta skop terpencil, pembangun boleh mengendalikan senario gelung kompleks yang melibatkan pembolehubah kongsi dengan berkesan.

Atas ialah kandungan terperinci Mengapa Penutupan dalam Gelung Menjadikan Semua Pautan Memaparkan Nilai yang Sama?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!