Bagaimana untuk Mengekalkan Konteks dengan `ini` Apabila Menggunakan `setTimeout` dalam JavaScript?

Menggunakan setTimeout dan Memelihara Konteks dengan ini dalam JavaScript

Apabila menggunakan fungsi setTimeout dalam JavaScript, adalah penting untuk mengetahui cara ia mengendalikan konteks ini. Ini menjadi sangat relevan apabila memanggil kaedah yang ditakrifkan dalam konteks berbeza dalam panggilan balik tamat masa.

Dalam coretan kod yang disediakan, fungsi kaedah memanggil method2, yang mendapatkan semula elemen imej berdasarkan ID yang diluluskan dan menetapkan sifat srcnya . Pada mulanya, method2 berjaya dilaksanakan. Walau bagaimanapun, selepas kelewatan setTimeout, ralat berlaku kerana fungsi method2 tidak lagi ditakrifkan dalam konteks yang dimaksudkan.

Isu timbul kerana setTimeout mencipta konteks pelaksanaan baharu dan kata kunci ini lalai kepada objek global. Dalam kod yang disediakan, fungsi kaedah digunakan menggunakan konteks prototaip ujian, tetapi apabila panggilan balik tamat masa dilaksanakan, konteks ini telah bertukar kepada objek global.

Penyelesaian:

Untuk mengekalkan konteks yang dimaksudkan ini dalam panggilan balik tamat masa, anda boleh menggunakan kaedah .bind() untuk menetapkan pengikatan konteks secara eksplisit. Dengan menambahkan .bind(this) pada penghujung fungsi yang dihantar ke setTimeout, anda boleh memastikan bahawa ini dalam fungsi panggil balik merujuk kepada konteks yang dimaksudkan.

Dalam coretan kod yang dikemas kini:

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

Dengan menambahkan .bind(this), kata kunci ini dalam fungsi panggil balik akan terikat pada prototaip ujian, membolehkan kaedah2 dipanggil dengan betul dalam konteks kaedah prototaip walaupun selepas kelewatan setTimeout.

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