How to Maintain This Reference in Prototype Methods within setInterval and setTimeout?

Using this within Prototype Methods in setInterval and setTimeout

When using setInterval or setTimeout, it's essential to maintain a reference to the correct this context inside prototype methods. However, referencing this in these situations can be tricky.

The Problem

For example, consider the following code:

<code class="javascript">function Foo() {}
Foo.prototype = {
    bar: function () {
        this.baz();
    },
    baz: function () {
        this.draw();
        requestAnimFrame(this.baz);
    }
};</code>

In this code, an attempt is made to use this to refer to the Foo instance within the prototype method baz. However, this code throws an error because after extracting the method call and passing it to requestAnimFrame, the method loses its reference to this.

The Solution

There are several ways to overcome this issue:

Using an Anonymous Function

One solution is to wrap the method call within an anonymous function:

<code class="javascript">var that = this;
setInterval(function(){
    return that.baz();
}, 1000);</code>

In this approach, the this context is saved in the that variable, ensuring correct access to it within the anonymous function's scope.

Using a Fat Arrow Function

If your JavaScript implementation supports fat arrow functions, you can use them to simplify the code:

<code class="javascript">setInterval( () =&gt; this.baz(), 1000 );</code>

Fat arrow functions preserve the this context of the surrounding function, eliminating the need for a helper variable.

Using a Binding Function

Finally, you can also use a binding function like Function.prototype.bind to set the this context explicitly:

<code class="javascript">setInterval( this.baz.bind(this), 1000 );</code>

These alternative solutions allow you to maintain the correct this reference within your prototype methods when used with setInterval or setTimeout.

The above is the detailed content of How to Maintain This Reference in Prototype Methods within setInterval and setTimeout?. For more information, please follow other related articles on the PHP Chinese website!