Mengapakah Gelung JavaScript Mencipta Gelagat Tidak Dijangka Apabila Mengikat Pengendali Acara?

Memahami Isu Gelung JavaScript Yang Terkenal

Dalam JavaScript, isu biasa timbul apabila menggunakan gelung untuk menjana elemen dan mengikatnya kepada pengendali acara . Kod berikut menunjukkan masalah ini:

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

Kod ini bertujuan untuk menjana 5 pautan, setiap satu memaparkan indeksnya sendiri apabila diklik. Walau bagaimanapun, apabila diklik, semua pautan akan memaparkan "pautan 5." Anomali ini berpunca daripada mekanisme penutupan dalam JavaScript.

Dalam coretan pertama, fungsi dalaman yang ditakrifkan dalam pengendali peristiwa gelung mengekalkan rujukan kepada pembolehubah i. Walau bagaimanapun, selepas gelung selesai, saya menganggap nilai 5. Akibatnya, apabila pengendali acara memanggil amaran(i), nilai i sentiasa 5, mengakibatkan tingkah laku yang salah.

Dalam kod kedua coretan, isu ini diselesaikan dengan melampirkan fungsi dalaman dalam ungkapan fungsi yang dipanggil serta-merta (IIFE):

link.onclick = function (num) {
    return function () {
        alert(num);
    };
}(i);

The IIFE memastikan bahawa contoh baharu fungsi dalaman dicipta untuk setiap lelaran, dengan itu mengekalkan nilai i yang dikehendaki dalam skopnya. Apabila pengendali acara melaksanakan, ia memaklumkan indeks yang betul menggunakan nilai tangkapan i daripada IIFE.

Sebagai alternatif, pendekatan yang lebih cekap adalah untuk menetapkan nilai semasa i terus kepada sifat nod DOM, membolehkan akses mudah semasa pelaksanaan pengendali acara:

link.i = i;
link.onclick = function () {
    alert(this.i);
};

Penyelesaian ini menghapuskan keperluan untuk mencipta objek fungsi baharu bagi setiap pautan.

Atas ialah kandungan terperinci Mengapakah Gelung JavaScript Mencipta Gelagat Tidak Dijangka Apabila Mengikat Pengendali Acara?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!