Bagaimana Mengendalikan Isu Kontekstual dengan \'ini\' dalam JavaScript Apabila Menggunakan setTimeout?

setTimeout dan "this" dalam JavaScript

Apabila menggunakan fungsi setTimeout dalam kaedah kelas, ada kemungkinan untuk menghadapi ralat yang menunjukkan kaedah lain dalam kelas (cth. , "method2" dalam kod yang disediakan) tidak ditentukan selepas tamat masa. Ini disebabkan oleh cara JavaScript mengendalikan kata kunci ini dalam fungsi bersarang.

Dalam kod contoh, fungsi setTimeout digunakan dengan kelewatan yang ditentukan untuk memanggil fungsi kaedah dalam objek ujian. Fungsi method2 dipanggil dalam fungsi kaedah untuk mendapatkan semula elemen imej berdasarkan ID yang diluluskan. Pada mulanya, ini berfungsi tanpa masalah.

Walau bagaimanapun, selepas tamat masa, fungsi method2 menjadi tidak ditentukan kerana cara ini terikat dalam fungsi setTimeout. Secara lalai, ini merujuk kepada objek global apabila dipanggil sebagai panggilan balik dalam setTimeout.

Untuk menyelesaikan isu ini, satu penyelesaian adalah untuk menambahkan .bind(this) ke penghujung fungsi yang dihantar ke setTimeout. Ini memastikan bahawa konteks ini terikat dengan betul pada objek (dalam kes ini, objek ujian). Dalam kod yang diubah suai:

<code class="js">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
};</code>

Menggunakan .bind(this) membenarkan fungsi method2 untuk mengekalkan konteks ini yang betul dalam setTimeout panggil balik, membolehkan ia berjaya mendapatkan dan memanipulasi elemen imej.

Atas ialah kandungan terperinci Bagaimana Mengendalikan Isu Kontekstual dengan 'ini' dalam JavaScript Apabila Menggunakan setTimeout?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!