JavaScriptとthisとEventListener

備忘録として。

---

以下のコードを見てください。

class Hoge {
    myname;
    constructor() {
        this.myname = "taro";
    }

    onClick() {
        console.log(this.myname);
    }
}

Hogeっていうクラスがあって、クラスメソッドでonClickが定義されています。
何かがクリックされた時にthis.mynameを表示しています。
this.mynameはconstructorでtaroとして初期化されていますね。

関数の名前から、onClickがどんな時に呼ばれるか分かると思います。
そして分かる人なら、この時点でこのコードは上手く動かない可能性がある、とも気づくはずです。

そうです、onClickはその名の通り、何かがクリックされたタイミングで呼ばれます。
例えば以下のようなHTMLがあるとしましょう。　

<button id="foo">Foo</button>

そして、jsに以下のコードが追加されました。

let hogeObject = new Hoge();
document.getElementById("foo").addEventListener("onclick", hogeObject.onClick);

この時、id="foo"を持つボタンが押された時どんな挙動になるでしょうか。

taroを期待しますが、正解はundefinedです。
クラスプロパティがmynameとなっているのでundefinedです。

ここのクラスプロパティを、もしくはonClickの中で呼び出しているプロパティの入力を、間違えてlocationとかnavigatorとかと入力してしまっていると別の値が表示されるかもしれません。

EventListenerのコールバック関数で扱えるthis、そのコールバック関数がクラスメソッドだとしても、そのthisはグローバルオブジェクトを指します。

期待通り動かしたいなら、1つ無名関数をコールバックとして挟みましょう。

document.getElementById("foo").addEventListener("onclick", (e) => {hogeObject.onClick(e)});