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( () => 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中文網其他相關文章！
