Bagaimana untuk Mengendalikan Rujukan \"ini\" dalam Fungsi Panggilan Balik dalam Kaedah Prototaip Objek dalam 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.

Atas ialah kandungan terperinci Bagaimana untuk Mengendalikan Rujukan \"ini\" dalam Fungsi Panggilan Balik dalam Kaedah Prototaip Objek dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!