アロー関数を使用すると、setTimeout の this を、実行されるスコープを指すのではなく、定義されているスコープにバインドできます。次に例を示します。
関数タイマー() {
this.s1 = 0;
this.s2 = 0;
setInterval(() => {
これ.s1++;
}, 1000);
setInterval(関数() {
これ.s2++;
console.log('ここに着く', this.s2); // NaN
}, 1000);
}
let timer = new Timer();
setTimeout(() => console.log('s1: ', timer.s1), 3100); // 3.1秒後に3を出力します
setTimeout(() => console.log('s2: ', timer.s2), 3100); // 3.1秒後に0を出力
上記のコードでは、最初の setInterval の this は定義されているスコープ (Timer 関数) にバインドされ、2 番目の setInterval の this は実行されるスコープ (グローバル オブジェクト) にバインドされています。 s2 は実際にはリアルタイム グローバル s2 です。元々は未定義で、++ を使用した後に NaN になりました。そのため、timer.s2 が出力されると、タイマーの s2 は更新されず、0 が出力されます。
注: アロー関数を使用すると、上の図の最初の setInterval など、この点を固定できます。