javascript - requestAnimationFrame で正しい this-value を設定する

Question

次のような app-object コンストラクターがあります。

var app = function(loadedsettings) {

    return {
        init: function() {          
            this.loop();
        },

        loop: function() {
            this.update();
            window.requestAnimationFrame(this.loop);
        },

        update: function() {
            //loop through settings and call update on every object.
        },

        settings: [
             //array of settings objects, all with update methods. 
        ]
    };
}

それから私がするとき：

var theApp = app(settings);
theApp.init();

私は得る：

Uncaught TypeError: Object [object global] has no method 'update'

requestAnimationFrame が呼び出されると、ループ関数内の this-value が wi​​ndow に設定されるためです。

「theApp」オブジェクトを this-value として設定して requestAnimatinFrame を呼び出す方法を知っている人はいますか?

Answer 1

バインドされた関数 (固定されたthis) を作成し、それを requestAnimationFrame に渡すことができます。

var app = function(loadedsettings) {

    return {
        init: function() {          
            this.loop();
        },

        loop: function() {
            this.update();
            window.requestAnimationFrame(this.loop.bind(this));
        },

        update: function() {
            //loop through settings and call update on every object.
        },

        settings: [
             //array of settings objects, all with update methods. 
        ]
    };
}

requestAnimationFrame をサポートするブラウザは Function.prototype.bind もサポートすると思いますが、サポートしていないブラウザに遭遇した場合は、ポリフィルが利用可能です。

Answer 2

への参照をキャッシュする必要がありますthis:

var app = function(loadedsettings) {
    var self = this;
    return {
        init: function() {          
            self.loop();
        },

        loop: function() {
            self.update();
            window.requestAnimationFrame(self.loop);
        },
        ** snip **
        ...