###質問内容
MacのVScodeにてJSで神経衰弱のゲームを制作していたのですがエラーが出てしまい、その原因を探しました。すると原因は
コード card.addEventListener("click",function() { flipCard(this); //上の関数はのちに定義するfunction flipCard();です });
と書くべき部分を
コード card.addEventListener("click",() => { flipCard(this); //上の関数はのちに定義するfunctionです });
のようにアロー関数で書いてしまっていたことが原因でした。しかし何故ダメなのか理由が分からなかったため、検索したところ
このサイト(https://qiita.com/immrshc/items/aec874fc5cf55cde7fa1)で説明されていたのですがよくわかりませんでした。おそらくthisのスコープの範囲が違うから2つを全く同じものと考えてはいけないみたいな事を説明していると思うのですが、あまり理解できませんでした。いったいどのような事を説明しているのでしょうか?よろしくお願いします????♂️
↓サイト内のコード引用(アロー関数と関数の違いとthisの評価のされ方について)
コード this.data = 'this is within global'; function func() { // 実行時のレシーバであるオブジェクトをthisとして定義する console.log(this.data); } const arrowFunc = () => { // 宣言時のスコープを持つオブジェクトをthisとして定義する // ここではグローバルオブジェクト console.log(this.data); }; const f = { data: 'within object', execute: func }; f.execute(); // => 'within object' const af = { data: 'this is within object', execute: arrowFunc }; af.execute(); // => 'this is within global'
###追記
アローファンクションの場合だとアロー関数の中にあるthisは、書いた時点で固定される(この場合だとWindowオブジェクトになってしまう)からでした。回答ありがとうございました。
コード card.addEventListener("click",function() { // 上でアロー関数で定義してしまうと下のthisはWindowオブジェクトになってしまう(アロー関数のthisは、書いた時点で固定されてしまう) // そのため、下のfunction flipCard()を別の場所で使うとうまく機能しない場合がある。 flipCard(this); ..... }
回答1件
あなたの回答
tips
プレビュー