如何处理 JavaScript 中对象原型方法中回调函数中的'this”引用？

Referencing "this" in Interval/Timeout Functions within Object Prototype Methods

In JavaScript, referencing "this" within nested functions can be tricky, especially when working with object prototype methods. Consider the following code snippet:

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

This code will result in an error when calling bar() because this refers to the global object within the baz function. To resolve this issue, you can utilize several techniques:

1. Anonymous Function Wrapper

Wrap the baz call within an anonymous function, passing the correct this value:

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

2. Fat Arrow Function Wrapper

In JavaScript implementations with arrow function support:

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

3. Binding Function

Use a function like Function.prototype.bind to bind this:

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

By employing these techniques, you can ensure that this references the correct object within interval or timeout functions, ensuring consistent and functional prototype method behavior.

以上是如何处理 JavaScript 中对象原型方法中回调函数中的'this”引用？的详细内容。更多信息请关注PHP中文网其他相关文章！