JavaScript
callback

JavaScriptでクラス・メソッドをコールバックしたい時のthis

More than 1 year has passed since last update.

thisの参照先は文脈で変わる

クラス(仮)のメソッド内で別のメソッドを渡して実行すると関数として解釈されるので、コールバック内のthisの参照先がwindowになる。かなしい。

wtf
var Animal = function() {
    return {
        builder: function() {
            console.log(this); // -> ???
        },

        build: function(callback) {
            console.log(this); // -> Animal
            callback();
        },

        run: function() {
            this.build(this.builder);
        },
    };
};

var animal = new Animal();
animal.run();

result
Object { builder=function(),  build=function(),  run=function()}
Window /class-callback/

これを回避する方法は色々あるらしい。その一つのエイリアスを使う方法。
runを以下のように変更する。builderrun内のthisのエイリアスthatと一緒にラップして実行時にthatを参照させる。

ok
        run: function() {
            var that = this; // Alias for this
            that.build(function() {
                return that.builder();
            });
        },
result
Object { builder=function(),  build=function(),  run=function()}
Object { builder=function(),  build=function(),  run=function()}

何度かはまったのでメモ。