Apabila Menggunakan Penutupan dalam Gelung JavaScript, Bagaimanakah Anda Boleh Memastikan Setiap Penutupan Menangkap Nilai yang Betul?

Penutupan dalam Gelung JavaScript: Contoh Praktikal

Dalam JavaScript, isu biasa timbul apabila menggunakan penutupan dalam gelung, di mana nilai pembolehubah yang ditangkap oleh penutupan bukanlah nilai yang dijangkakan.

Masalah:

Apabila mentakrifkan fungsi dalam gelung menggunakan kata kunci var, semua fungsi merujuk pembolehubah yang sama di luar gelung. Ini boleh membawa kepada hasil yang tidak dijangka, seperti yang dilihat dalam kod di bawah:

<code class="js">var funcs = [];
for (var i = 0; i < 3; i++) {
  funcs[i] = function() {
    console.log("My value:", i);
  };
}</code>

Menjalankan kod ini mencetak "Nilai saya: 3" tiga kali, walaupun kami menjangkakan ia meningkat daripada 0 hingga 2.

Penyelesaian:

Penyelesaian ES6: Biarkan

Dalam ECMAScript 6 (ES6), kata kunci let memperkenalkan skop blok untuk pembolehubah, yang menyelesaikan masalah ini. Menggunakan let, setiap lelaran gelung mencipta pembolehubah i baharu dengan skop terhad kepada gelung:

<code class="js">for (let i = 0; i < 3; i++) {
  funcs[i] = function() {
    console.log("My value:", i);
  };
}</code>

ES5.1 Penyelesaian: forEach

Dalam persekitaran yang menyokong fungsi Array.prototype.forEach, kita boleh memanfaatkan sifat uniknya untuk mencipta penutupan yang berbeza bagi setiap lelaran. Fungsi panggil balik menerima elemen semasa tatasusunan sebagai parameter, memastikan setiap fungsi menangkap nilai unik:

<code class="js">var funcs = [];
[0, 1, 2].forEach(function(i) {
  funcs[i] = function() {
    console.log("My value:", i);
  };
});</code>

Penyelesaian Klasik: Penutupan

Klasik penyelesaian adalah untuk membuat penutupan yang mengikat pembolehubah kepada nilai tertentu di luar gelung. Ini dicapai dengan mengembalikan fungsi baharu yang menangkap nilai yang diingini:

<code class="js">for (var i = 0; i < 3; i++) {
  funcs[i] = (function(i) {
    return function() {
      console.log("My value:", i);
    };
  })(i);
}</code>

Dengan menghantar i sebagai hujah kepada fungsi dalaman, kami memastikan setiap penutupan menangkap nilai yang betul.

Atas ialah kandungan terperinci Apabila Menggunakan Penutupan dalam Gelung JavaScript, Bagaimanakah Anda Boleh Memastikan Setiap Penutupan Menangkap Nilai yang Betul?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!