JSのaddEventListenerのコールバック関数とthisの継承
よくハマりそうなのでメモ。
MDNによると、次の通り（執筆時点）。
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener
なお、無名関数とアロー関数は似ており、違いは this を結び付けるかどうかです。無名関数 (および従来のすべての JavaScript 関数) は固有の this を作成するのに対し、アロー関数はそれを含む関数の this を継承します。
具体例としては、次の通り。
次の様に「function()」の形で定義するとエラーとなり、ウェブブラウザの開発者ツールでは「this.settings.hogeは存在しない」と言われるが、
export class Hoge {
constructor(options) {
this.settings.hoge = "ほげ";
}
button.addEventListener("click", function() {
console.log(this.settings.hoge);
});
}
const hoge = new Hoge();
次のように「()=>」で定義すれば「ほげ」がウェブブラウザ開発者ツールのコンソールに出る。
export class Hoge {
constructor(options) {
this.settings.hoge = "ほげ";
}
button.addEventListener("click", ()=> {
console.log(this.settings.hoge);
});
}
const hoge = new Hoge();