Rumah > Artikel > hujung hadapan web > Bagaimanakah Penutupan Membantu Kami Mengurus Skop Pembolehubah dalam Gelung JavaScript?
Penutupan dan Skop Gelung
Memahami penggunaan penutupan JavaScript dalam gelung adalah penting untuk menulis kod modular dan boleh digunakan semula. Penutupan membenarkan fungsi mengakses dan memanipulasi pembolehubah daripada skop lampirannya, walaupun selepas fungsi penutup telah dikembalikan.
Masalahnya
Pertimbangkan coretan kod berikut:
<code class="javascript">function addLinks() { for (var i = 0, link; 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>
Barisan utama yang diminati ialah definisi pengendali acara onclick. Ia menggunakan fungsi tanpa nama dalam penutupan untuk merujuk pembolehubah i, yang mewakili indeks pautan yang dibuat dalam gelung.
Penyelesaian: Kilang Fungsi
Kepada menjelaskan penggunaan penutupan dalam senario ini, kita boleh menggunakan pendekatan kilang fungsi. Berikut ialah versi ringkas kod:
<code class="javascript">function generateHandler(i) { return function() { alert(i); }; } for (var i = 0; i < 5; i++) { document.getElementById(i).onclick = generateHandler(i); }</code>
Dalam contoh ini, kami mencipta kilang fungsi, generateHandler(), yang mengembalikan fungsi yang merujuk nilai i yang ditentukan. Dengan menggunakan kilang untuk menjana setiap pengendali onclick, kami memastikan bahawa setiap fungsi mempunyai salinan peribadi pembolehubah i sendiri.
Memahami Penutupan
Penutupan menangkap konteks dalam yang ditakrifkan, termasuk sebarang pembolehubah atau parameter daripada skop sekeliling. Apabila fungsi dalaman digunakan dalam penutupan, ia mempunyai akses kepada pembolehubah yang ditangkap itu walaupun selepas fungsi lampiran kembali.
Inti Utama
Atas ialah kandungan terperinci Bagaimanakah Penutupan Membantu Kami Mengurus Skop Pembolehubah dalam Gelung JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!