☰

オブジェクトプロトタイプメソッド内のsetInterval/setTimeout内で「this」を参照する [重複] 質問する

tag-icon • tag-icon javascript scope lexical-scope
オブジェクトプロトタイプメソッド内のsetInterval/setTimeout内で「this」を参照する [重複] 質問する

通常、setInterval 内で「this」を参照するときには、代替の「self」参照を割り当てます。プロトタイプ メソッドのコンテキスト内で同様のことを実現することは可能ですか? 次のコード エラー。

function Foo() {}
Foo.prototype = {
    bar: function () {
        this.baz();
    },
    baz: function () {
        this.draw();
        requestAnimFrame(this.baz);
    }
};

ベストアンサー1

Pythonのような言語とは異なり、Javascriptのメソッドは、抽出して別の場所に渡すと、それがメソッドであることを忘れてしまいます。

メソッド呼び出しを匿名関数内にラップする

この方法では、bazプロパティへのアクセスと呼び出しが同時に行われ、thisメソッド呼び出し内で正しく設定するために必要となります。

this内部関数は別のオブジェクトを参照するため、外部関数からの結果をヘルパー変数に保存する必要がありますthis。

var that = this;
setInterval(function(){
    return that.baz();
}, 1000);

メソッド呼び出しをファットアロー関数内にラップする

Javascript実装では、矢印関数機能を使用すると、ファット矢印構文を使用して上記のソリューションをより簡潔に記述できます。

setInterval( () => this.baz(), 1000 );

ファットアロー無名関数はthis周囲の関数の を保持するので、トリックを使用する必要はありませんvar that = this。この機能が使用できるかどうかを確認するには、次のような互換性テーブルを参照してください。これです。

バインディング関数を使用する

最後の代替案は、Function.prototype.bind などの関数、またはお気に入りの Javascript ライブラリの同等の関数を使用することです。

setInterval( this.baz.bind(this), 1000 );

//dojo toolkit example:
setInterval( dojo.hitch(this, 'baz'), 100);

おすすめ記事