Mengapa Menggunakan Penutupan Menyelesaikan Masalah Gelung dan Penutupan JavaScript?

Isu Gelung Terkenal JavaScript Selesai dengan Penutupan

Pertimbangkan kod berikut bertujuan untuk menjana lima pautan dengan peristiwa makluman unik untuk memaparkan ID masing-masing:

function addLinks() {
    for (var i=0, link; i<5; i++) {
        link = document.createElement("a");
        link.innerHTML = "Link " + i;
        link.onclick = function () {
            alert(i);
        };
        document.body.appendChild(link);
    }
}

Walau bagaimanapun, kod ini gagal mencapai tujuannya, kerana mengklik mana-mana pautan memaparkan "pautan 5." Untuk membetulkannya, kod yang diubah suai berikut berjaya memberikan setiap pautan ID uniknya:

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

Memahami Sihir Penutupan

Kunci kejayaan kod ini terletak pada konsep penutupan. Dalam JavaScript, penutupan ialah fungsi yang mengekalkan akses kepada persekitaran leksikal fungsi di mana ia dicipta. Dalam erti kata lain, ia boleh mengakses pembolehubah dan argumen yang ditakrifkan dalam fungsi luar, tanpa mengira skopnya sendiri.

Dalam coretan kod pertama, fungsi dalam merujuk pembolehubah i, yang dinaikkan ke bahagian atas skop fungsi. Apabila gelung berulang, pembolehubah i akan dikemas kini, dan fungsi dalaman sentiasa merujuk kepada nilai terkininya. Ini menyebabkan semua pautan memaparkan "pautan 5" apabila diklik.

Dalam coretan kod kedua, literal fungsi luar mencipta objek fungsi baharu dengan skopnya sendiri dan nombor pembolehubah setempat, yang nilainya ditetapkan kepada semasa nilai i. Objek fungsi dikembalikan sebagai pengendali acara untuk acara onclick pautan.

Yang penting, fungsi dalam dicipta dalam konteks persekitaran leksikal fungsi luar, yang termasuk nombor pembolehubah. Oleh itu, fungsi dalaman mempunyai akses berterusan kepada num dan mengembalikan fungsi yang memaklumkan ID yang betul apabila pautan diklik.

Pendekatan ini memastikan setiap pautan mempunyai penutupan uniknya sendiri, yang mengekalkan nilai yang betul bagi i walaupun selepas gelung telah ditamatkan.

Atas ialah kandungan terperinci Mengapa Menggunakan Penutupan Menyelesaikan Masalah Gelung dan Penutupan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!