JavaScriptにおけるthisがイベントハンドラ内で置き換わることの対処について

Question

概要

質問を見ていただきありがとうございます。

下記ソースコードでクラスみたいなものを作ったときに、
this.image.onloadにて呼ばれるthis.finish内のthis.loadedが
this.image.loadedを参照してしまうことについての対処を教えていただきたいです。

こうなってしまう理屈はわかるのですが、対処する方法がイマイチわかりません。
どなたか教えていただけると助かります。

var SpriteLoader = function(){
    
    this.image = new Image();
    this.loaded = false;
    
    this.finish = function(){
        this.loaded = true;
        //ここのthisはimageのthisになってしまう。
    };
    
    this.init_image = function(src){
        this.image.onload = this.finish();
        this.loaded = false;
        this.image.src = src; //ここでURLを設定しています
    };

    //以降関係ないので省略
}

教えていただきたいこと

具体的に「画像の読み込みが完了した際にSpriteLoaderのloadedをtrueにする」
といった処理を行う方法を教えていただけると嬉しいです。

環境等

chromeやfireFoxの最新バージョンで動くものを作ろうと考えています。

補足

JavaScriptについては全くの初心者です。
この質問内の用語等の誤用も教えていただけると幸いです。

以上、よろしくお願いいたします。

Answer 1

古典的な手法としては、var that=this;のような変数を確保しておいて、イベントハンドラの中ではthatを使う、という方法があります。

ES6環境であれば、(引数リスト) => {関数本体}の形で作った関数は、周囲のthisをそのまま受け継ぐようになります。

Comments

[takanakahiko]

回答ありがとうございます。
下記の通りソースコードを編集してみました。

```javaScript
this.finish = () => {
this.loaded = true;
};

this.init_image = function(src){
//this.image.onload = this.finish();
this.image.onload = this.finish();
this.loaded = false;
this.image.src = src;
};

```

**(引数リスト) => {関数本体}**の形で書いた場合はこうでしょうか？
これも期待した通りに動かないのですが、どこが不適切でしょうか？

Answer 2

this.image.onload = this.finish.bind(this);

に修正することで解決できました。
質問に答えていただいた方、ありがとうございます！
あとでほかのところにまとめておきます。