[JavaScript] クラス内のメソッドからconstructorで設定した変数が見えません

Question

###前提・実現したいこと
プログラミングの勉強を始めたばかりの初心者です。
勉強として，html5/JavaScriptで，ブラウザにテキストファイルをドラッグ&ドロップして表示するプログラムを書いています。

###発生している問題
ドラッグ&ドロップの部分をクラスとして切り出せないかと考え，以下のようなコードを書きました。インスタンス生成時に渡した文字列を関数名として，ドロップされたファイルのFileListオブジェクトを渡せれば，毎回ドラッグ&ドロップの部分のコードを書かなくていいのではないか?と考えたからです（できるのか?という意味も込めて試してみました）。
下記のコードでFileListオブジェクトを得るところまではうまくいっている（ように見える）のですが，その次のconsole.log(this.func)の部分で，constructorでセットしたthis.funcが見えません（undefinedになります）。ブラウザの開発者ツールのコンソールから dd.func を見ると，dnd {func: "func"} と表示されます。なぜdroppedメソッドの中からだと見えないのか，見えないのになぜそこにたどり着くまではうまく動く（ように見える）のか，がよく理解できずに悩んでおります。ご教示願えれば幸いです。

###該当のソースコード

class dnd {
    constructor (func){
        this.func = func;
        document.addEventListener('dragover', this.dragOver, false);
        document.addEventListener('dragleave', this.dragLeave, false);
        document.addEventListener('drop', this.dropped, false);
    }
    dragOver (event){
        event.stopPropagation();
        event.preventDefault();
    }
    dragLeave (event){
        //とりあえず何もしない
    }
    dropped (event){
        event.stopPropagation();
        event.preventDefault();
        this.files = event.dataTransfer.files;
        console.log(this.files);
        //FileListオブジェクトが見えます
        console.log(this.func);
        //undefinedになります
        //eval(this.func + '(' + this.files + ')');
    }
}

function func (files){
    //FileListオブジェクトを渡したい関数
}

let dd = new dnd('func');

Answer 1

        document.addEventListener('dragover', this.dragOver, false);
        document.addEventListener('dragleave', this.dragLeave, false);
        document.addEventListener('drop', this.dropped, false);

の部分を

        document.addEventListener('dragover', this.dragOver.bind(this), false);
        document.addEventListener('dragleave', this.dragLeave.bind(this), false);
        document.addEventListener('drop', this.dropped.bind(this), false);

としてみてください。たぶん、これでうまくいくはずです。

---

【解説】

JavaScriptにおいて、thisは最も奇妙で間際らしい動作をします。特にコールバックにおいてはthisを意識しないと、途端に動かなくなります。

問題です。次のコードはどのような出力になるでしょうか？

const a = {
    x: 0,
    f: function() { return this.x; }
}
console.log(a.f());
const g = a.f;
console.log(g());

正解は0とundefinedを表示します。同じ関数を呼び出したはずなのに、一番目と二番目で値が異なります。なぜそうなるのか…それはthisが異なるからです。

JavaScriptではa.f()という形で関数が実行された場合、a.fが指す関数(aのfというプロパティに該当する関数)を**thisがaであるコンテキストで呼び出します。いわゆるメソッド呼び出しという物です。では、一旦a.fを変数gに入れてg()とした場合、どうなるでしょうか？この場合は.でレシーバがないため、そのような特殊な呼び出しはせず、thisがグローバルオブジェクト(strictモードではundefined)であるコンテキストで**呼び出します。つまり、thisはグローバルオブジェクトであり、グローバルオブジェクトにはxというプロパティがないのでundefinedになるというわけです。

これと似たような事です。addEventListher()で登録したとき、登録されるのは関数そのものです。そこにはthisが何であるかという情報はありません。実際イベントが発生し、呼び出されるときは、そのイベントを処理している所から別途thisを指定して(call()やapply()を内部で使用)、または、指定せずに呼び出されるので、全く異なるオブジェクト(この場合はイベントが発生するターゲットになります)がthisとして関数が実行されます。つまり、登録されているdropped関数の処理をするとき、その中でのthisはaddEventListher()で登録したときのthisとは異なるということです。このthisにはfuncなど無いのでエラーになると言うことです。

では、修正されたコードはどうなんでしょうか？先ほどのコードも修正してみましょう。

const a = {
    x: 0,
    f: function() { return this.x; }
}
console.log(a.f());
const g = a.f.bind(a);
console.log(g());

うまく、0が二回表示されるはずです。このようにa.f.bind(a)とすると、この関数はどこでどのように呼び出されたとしても、thisをaに強制できます。bind()はこのようにthisを強制的に割り当て、勝手に変更できなくする役目を持っています。これを**thisの束縛**と言います。

つまり、this.dropped.bind(this)とすれば、this.droppedがイベント発生時に呼び出せるときに、そのときのthisをaddEventListher()で登録したときのthisに強制することができます。これで、想定通りのthisになるため、this.func()も正常に呼び出すことができるようになるでしょう。

このように、JavaScriptのthisは注意しなければなりません。特にコールバックではthisが変わっていないかを常に意識してください。なお、bind()以外の解決方法としてe => this.dropped(e)と書く方法もあります。アロー関数は関数式よりも短いだけでなく、現在のコンテキストでthis束縛を行うという特徴があるため、コールバックで使用するときはとても有用です。

Comments

[tt.key]

raccy 様
初心者の愚問に対して非常に丁寧な解説をいただき，大変恐縮しております。
おかげさまで無事うまくいきました。
this を全く勘違いしていたことがよくわかりました。
また，bindの使い方やアロー関数についても，頂いた解説を元に色々といじって勉強したいと思います。
どうもありがとうございます。

[raccy]

メソッド呼び出し(a.b()と言う形)でもなく、callやapply等でthisを指定していない、いわゆる関数呼び出しの場合のthisについての説明が間違ってましたので、修正しました。ちょっと、勘違いしてました…。

[tt.key]

raccy様
どうもありがとうございます。勉強になります。
また機会がありましたらよろしくお願いします。

Answer 2

dropped()の呼び出し方により、dropped()内のthisがdndインスタンス以外のものになっているとか

Comments

[tt.key]

turbgraphics200 様
早々にご回答頂き，どうもありがとうございます。
ご指摘通り，this に入っていたのは document でした。
this が 呼び出し方が変わることで変わってしまう，というのは大変勉強になりました。
どうもありがとうございます。