Mengapa Gelung Javascript Menyebabkan Gelagat Tidak Dijangka dalam Pengendali Acara?

Isu Gelung Terkenal Javascript Disemak Semula

Isu gelung terkenal dalam Javascript terus membingungkan pembangun. Pertimbangkan coretan kod berikut:

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 membuat 5 pautan, setiap satu dengan acara onClick yang memaparkan ID pautan semasa. Walau bagaimanapun, apabila pautan ini diklik, kesemuanya memaparkan "pautan 5".

Punca isu ini terletak pada skop peringkat fungsi Javascript. Apabila gelung selesai, pembolehubah i mengekalkan nilai 5. Ini kerana fungsi Javascript ditutup atas persekitaran leksikalnya, bermakna mereka mempunyai akses kepada pembolehubah yang ditakrifkan dalam skop sekeliling.

Penyelesaian untuk isu ini adalah untuk memperkenalkan penutupan yang menangkap nilai semasa i untuk setiap lelaran:

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

Dalam kod ini, objek fungsi baharu dicipta untuk setiap pautan. Ia mempunyai skop sendiri dan nombor pembolehubah tempatan, yang diberikan nilai semasa i. Apabila fungsi dalaman dilaksanakan, ia merujuk kepada pembolehubah nombor penutupan, yang mengekalkan nilai yang betul yang ditetapkan dalam gelung.

Walaupun pendekatan ini berkesan, ia dikenakan penalti prestasi apabila fungsi baharu dicipta untuk setiap pendengar acara. Alternatif yang lebih cekap ialah menggunakan nod DOM itu sendiri untuk penyimpanan data:

function linkListener() {
    alert(this.i);
}

function addLinks () {
    for(var i = 0; i < 5; ++i) {
        var link = document.createElement('a');
        link.appendChild(document.createTextNode('Link ' + i));
        link.i = i;
        link.onclick = linkListener;
        document.body.appendChild(link);
    }
}

Dengan menyimpan nilai i terus pada nod DOM, kami menghapuskan keperluan untuk penutupan, sekali gus meningkatkan kecekapan kod.

Atas ialah kandungan terperinci Mengapa Gelung Javascript Menyebabkan Gelagat Tidak Dijangka dalam Pengendali Acara?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!