Bagaimana untuk Mengekalkan Rujukan \"ini\" dalam setInterval/setTimeout dalam Kaedah Prototaip?

Referencing "this" within setInterval/setTimeout in Prototype Methods

While typically, assigning an alternative "self" reference is used to refer to "this" within setInterval, this method may not be feasible for prototype methods. For instance, in the following code:

function Foo() {}
Foo.prototype = {
    bar: function () {
        this.baz();
    },
    baz: function () {
        this.draw();
        requestAnimFrame(this.baz);
    }
};

This code encounters an error because the method call to baz is taken out of context and loses its "this" reference. To resolve this issue, consider the following alternatives:

Anonymous Function Wrapper:

Wrap the method call within an anonymous function to ensure it is called immediately after accessing the baz property, preserving the correct "this" context. However, a helper variable is necessary to store the "this" reference from the outer function.

var that = this;
setInterval(function(){
    return that.baz();
}, 1000);

Fat Arrow Function Wrapper:

If arrow functions are supported, this issue can be addressed more concisely:

setInterval( () => this.baz(), 1000 );

Binding Function:

Utilize a binding function like Function.prototype.bind or its equivalent from a preferred library to preserve the "this" reference:

setInterval( this.baz.bind(this), 1000 );

Atas ialah kandungan terperinci Bagaimana untuk Mengekalkan Rujukan \"ini\" dalam setInterval/setTimeout dalam Kaedah Prototaip?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!