Bagaimanakah Penutupan dalam Gelung Mengendalikan Perkongsian Pembolehubah dan Mengekalkan Keunikan?

Menyanggah Salah Tanggapan Sekitar Penutupan dalam Gelung

Dalam bidang pengaturcaraan, penutupan telah mendapat perhatian yang ketara kerana keupayaannya untuk mengekalkan rujukan kepada pembolehubah walaupun dalam skop daripada gelung. Walau bagaimanapun, memahami konsep itu boleh menjadi menakutkan. Mari kita mendalami penjelasan terperinci menggunakan contoh kod yang dipermudahkan dan melengkapkan anda dengan pemahaman yang menyeluruh.

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);

    }
}
window.onload = addLinks;</code>

Persoalan yang timbul ialah bagaimana untuk memekatkan kod ini sambil mengekalkan intipati penutupan. Untuk menangani perkara ini, kami akan menggunakan pendekatan "kilang fungsi".

<code class="javascript">for (var i = 0; i < 10; i++) {
    document.getElementById(i).onclick = (function (x) {
        return function () {
            alert(x);
        }
    })(i);
}</code>

Atau, untuk meningkatkan kebolehbacaan:

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

for (var i = 0; i < 10; i++) {
    document.getElementById(i).onclick = generateMyHandler(i);
}</code>

Menyingkap Peranan Penutupan:

Aspek penting untuk difahami ialah sifat unik penutupan. Mereka bukan sahaja menangkap nilai pembolehubah tetapi juga merangkumi pembolehubah itu sendiri. Untuk menggambarkan ini, pertimbangkan kod berikut:

<code class="javascript">var message = 'Hello!';
document.getElementById('foo').onclick = function () { alert(message) };
message = 'Goodbye!';</code>

Mengklik elemen 'foo' akan mencetuskan kotak amaran yang memaparkan mesej: "Selamat tinggal!". Ini kerana penutupan mengekalkan pembolehubah, bukan sekadar nilainya.

Dalam konteks gelung, menggunakan penutupan mudah membawa kepada perkongsian pembolehubah. Kod berikut menunjukkan perkara ini:

<code class="javascript">for (var i = 0; i < 10; i++) {
    document.getElementById('something' + i).onclick = function () { alert(i) };
}</code>

Apabila mana-mana elemen diklik, ia akan menggesa makluman dengan nombor 10 kerana semua fungsi berkongsi pembolehubah yang sama. Malah mengubah suai i, seperti yang ditunjukkan dengan i = "hello"; akan menyebabkan semua elemen memaparkan amaran yang sama: "hello". Ini disebabkan oleh rujukan bersama kepada pembolehubah.

Kuasa Argumen Fungsi:

Untuk mengurangkan perkongsian pembolehubah ini, kami memanfaatkan keupayaan argumen fungsi dalam JavaScript . Apabila fungsi dipanggil, argumen diluluskan dengan rujukan (untuk objek) atau dengan nilai (untuk rentetan dan nombor). Ini membolehkan kami memecahkan perkongsian pembolehubah dalam penutupan.

Dalam coretan kod yang disemak:

<code class="javascript">for (var i = 0; i < 10; i++) {
    document.getElementById(i).onclick =
        (function (x) {
            return function () {
                alert(x);
            }
        })(i)
}</code>

Kami memperkenalkan fungsi kilang untuk menjana rujukan fungsi yang diingini. Rujukan ini menangkap hujah yang dihantar kepada fungsi (dalam kes ini, nilai i) dan mengekalkannya dalam penutupan, memastikan setiap elemen mengekalkan nilai uniknya.

Atas ialah kandungan terperinci Bagaimanakah Penutupan dalam Gelung Mengendalikan Perkongsian Pembolehubah dan Mengekalkan Keunikan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!