Bagaimana untuk Mengelakkan Isu Penutupan Apabila Mencipta Fungsi Dalam Gelung dalam JavaScript?

JavaScript Penutupan Dalam Gelung - Contoh Praktikal

Apabila mencipta fungsi dalam gelung dalam JavaScript, adalah penting untuk mengetahui potensi penutupan isu di mana pembolehubah yang digunakan dalam fungsi tersebut boleh tersilap terikat pada nilai yang sama. Ini boleh membawa kepada tingkah laku yang tidak dijangka, terutamanya apabila kelewatan terlibat.

Pernyataan Masalah

Pertimbangkan kod berikut:

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

Output yang dimaksudkan ialah:

<code>My value: 0
My value: 1
My value: 2</code>

Walau bagaimanapun, kod ini sebenarnya mengeluarkan:

<code>My value: 3
My value: 3
My value: 3</code>

Masalah ini berlaku kerana pembolehubah i dalam fungsi tanpa nama terikat kepada pembolehubah yang sama di luar gelung . Akibatnya, apabila setiap fungsi dilaksanakan, ia menggunakan nilai akhir i.

Penyelesaian ES6: let

Dalam ECMAScript 6 (ES6) , kata kunci let membenarkan pembolehubah berskop blok. Menggunakan let dalam gelung mencipta pembolehubah baharu dengan setiap lelaran, menyelesaikan isu penutupan.

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

Penyelesaian ES5.1: forEach

Untuk situasi di mana anda terutamanya mengulang tatasusunan, fungsi Array.prototype.forEach boleh memberikan penyelesaian yang bersih.

<code class="js">someArray.forEach(function(arrayElement) {
  // ... code for this one element
});</code>

Setiap seruan fungsi panggil balik akan menjadi penutupnya sendiri, memastikan parameter yang dihantar adalah khusus kepada lelaran itu.

Penyelesaian Klasik: Penutupan

Kaedah lain untuk mengelakkan isu penutupan ialah menggunakan penutupan klasik, yang melibatkan pengikatan pembolehubah dalam setiap fungsi kepada yang berasingan, nilai tidak berubah.

<code class="js">function createfunc(i) {
  return function() {
    console.log("My value: " + i);
  };
}</code>

Atas ialah kandungan terperinci Bagaimana untuk Mengelakkan Isu Penutupan Apabila Mencipta Fungsi Dalam Gelung dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!