Rumah >hujung hadapan web >tutorial js >Cara Mengatasi Pencemaran Penutupan dalam Gelung: Panduan Praktikal

Cara Mengatasi Pencemaran Penutupan dalam Gelung: Panduan Praktikal

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-10-16 17:50:02674semak imbas

How to Overcome Closure Pollution in Loops: A Practical Guide

Penutupan Dalam Gelung: Panduan Praktikal untuk Menyelesaikan Pencemaran Penutupan

Dalam pengaturcaraan, penutupan memainkan peranan penting dalam menangkap pembolehubah dari skop luar. Walau bagaimanapun, apabila digunakan dalam gelung, ia boleh membawa kepada hasil yang tidak dijangka yang dikenali sebagai pencemaran penutupan. Artikel ini meneroka masalah ini dan menyediakan penyelesaian praktikal untuk menyelesaikannya.

Masalahnya

Pertimbangkan kod berikut:

<code class="javascript">var funcs = [];

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

for (var j = 0; j < 3; j++) {
  funcs[j]();
}</code>

Malangnya, kod ini mengeluarkan:

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

bukannya:

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

Isunya

Masalah timbul kerana setiap fungsi yang diisytiharkan dalam gelung menangkap pembolehubah i yang sama dari skop luar. Apabila fungsi digunakan dalam gelung kedua, kesemuanya merujuk pada i yang sama, yang telah ditambah kepada 3 pada masa ia dilaksanakan.

Penyelesaian ES6: let

ES6 memperkenalkan kata kunci let, yang mencipta pembolehubah berskop blok. Menggunakan let dalam gelung memastikan setiap lelaran mempunyai pembolehubah i tersendiri, menyelesaikan isu pencemaran penutupan:

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

Penyelesaian ES5.1: forEach

Satu lagi penyelesaian untuk tatasusunan ialah menggunakan kaedah forEach:

<code class="javascript">var someArray = [/* values */];

someArray.forEach(function(element) {
  // ...code specific to this element...
});</code>

Setiap lelaran gelung forEach mencipta penutupannya sendiri, menangkap elemen tatasusunan khusus untuk lelaran itu.

Klasik Penyelesaian: Penutupan

Penyelesaian klasik melibatkan pengikatan pembolehubah secara manual kepada nilai yang berasingan dan tidak berubah di luar fungsi:

<code class="javascript">var funcs = [];

function createFunc(i) {
  return function() {
    console.log("My value:", i);
  };
}

for (var i = 0; i < 3; i++) {
  funcs[i] = createFunc(i);
}

for (var j = 0; j < 3; j++) {
  funcs[j]();
}</code>

Dengan menghantar pembolehubah i sebagai hujah kepada bahagian dalam fungsi, kami membuat penutupan baharu untuk setiap lelaran, memastikan setiap fungsi merujuk nilai bebasnya sendiri.

Atas ialah kandungan terperinci Cara Mengatasi Pencemaran Penutupan dalam Gelung: Panduan Praktikal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn