Bagaimana untuk Mengekalkan Konteks \'ini\' dalam JavaScript Apabila Menggunakan setTimeout Asynchronously?

setTimeout dan Sukar "ini" dalam JavaScript

Apabila menggunakan fungsi setTimeout dalam JavaScript, isu biasa yang dihadapi ialah tingkah laku yang tidak dijangka kata kunci "ini". Ini timbul apabila kaedah yang mengandungi panggilan setTimeout merujuk kaedah lain, tetapi selepas tempoh tamat masa, kaedah yang dirujuk menjadi tidak ditentukan.

Isu ini berpunca daripada cara setTimeout beroperasi. Apabila fungsi diluluskan sebagai hujah untuk setTimeout, konteks "ini" dalam fungsi itu hilang. Ini kerana setTimeout melaksanakan fungsi secara tidak segerak dan pada masa itu, konteks asal "ini" mungkin tidak lagi boleh diakses.

Untuk menyelesaikan isu ini, terdapat dua penyelesaian biasa:

1. Menggunakan Kaedah bind()

Kaedah bind() boleh digunakan untuk mengekalkan konteks "ini" dalam fungsi yang dihantar kepada setTimeout. Dengan menambahkan ".bind(this)" pada penghujung fungsi, konteks dipelihara secara eksplisit, seperti yang dilihat dalam contoh berikut:

setTimeout(function() {
    this.foo();
}.bind(this), 1000);

2. Fungsi Anak Panah

Fungsi anak panah mengikat "ini" secara automatik pada konteks sekeliling. Oleh itu, tiada langkah tambahan diperlukan untuk mengekalkan konteks yang betul dalam fungsi panggil balik yang dihantar kepada setTimeout:

setTimeout(() => {
    this.foo();
}, 1000);

Menggunakan teknik ini pada coretan kod yang disediakan, isu ini boleh diselesaikan dengan mengubah suai kod seperti berikut:

test.prototype.method = function() {
    //method2 returns image based on the id passed
    this.method2('useSomeElement').src = "http://www.some.url";
    timeDelay = window.setTimeout(this.method.bind(this), 5000);
    //                                       ^^^^^^^^^^^ <- fix context
};

Atas ialah kandungan terperinci Bagaimana untuk Mengekalkan Konteks \'ini\' dalam JavaScript Apabila Menggunakan setTimeout Asynchronously?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!