setInterval 및 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.

위 내용은 setInterval 및 setTimeout 내의 프로토타입 메소드에서 이 참조를 유지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!