Wie gehe ich mit „dieser“ Referenzierung in Rückruffunktionen innerhalb von Objektprototypmethoden in JavaScript um?

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.

Das obige ist der detaillierte Inhalt vonWie gehe ich mit „dieser“ Referenzierung in Rückruffunktionen innerhalb von Objektprototypmethoden in JavaScript um?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!