Comment gérer le référencement « ceci » dans les fonctions de rappel dans les méthodes de prototype d'objet en JavaScript ?

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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!