Mengapa Gunakan `var that = this;` dalam JavaScript Nested Functions?

Apakah 'var that = this;' Syntax Accomplish dalam JavaScript?

Dalam JavaScript, adalah perkara biasa untuk menemui blok kod yang serupa dengan yang berikut:

function Somefunction(){
   var that = this; 
   ... 
}

Sintaks ini memberikan nilai ini kepada pembolehubah bernama itu . Tujuan simpulan bahasa ini adalah untuk mengekalkan rujukan kepada konteks ini yang betul dalam fungsi bersarang.

Untuk menggambarkan keperluan untuk itu, pertimbangkan contoh berikut:

var colours = ['red', 'green', 'blue'];
document.getElementById('element').addEventListener('click', function() {
    // this is a reference to the element clicked on

    var that = this;

    colours.forEach(function() {
        // this is undefined
        // that is a reference to the element clicked on
    });
});

Dalam fungsi tanpa nama diserahkan kepada forEach, kata kunci ini tidak lagi merujuk kepada elemen yang diklik kerana skopnya telah berubah. Menetapkan ini untuk itu membolehkan kami mengekalkan rujukan yang diingini dalam fungsi bersarang.

$('#element').click(function(){
    // this is a reference to the element clicked on

    var that = this;

    $('.elements').each(function(){
        // this is a reference to the current element in the loop
        // that is still a reference to the element clicked on
    });
});

Dalam amalan, adalah berfaedah untuk menggunakan alias yang lebih deskriptif untuk ini untuk meningkatkan kebolehbacaan kod. Sebagai contoh, dalam contoh di atas, clickedEl akan menjadi pilihan yang lebih sesuai.

Atas ialah kandungan terperinci Mengapa Gunakan `var that = this;` dalam JavaScript Nested Functions?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!