arrow関数のthisに気を付ける(自分用メモ)

公開:2021/02/23
更新:2021/02/23
1 min読了の目安(約700字TECH技術記事

thisを容易く使うと

$("#aBtn").on('click', function() {
  console.log(this);
})
// ->
// <button id="aBtn">Submit</button>

$("#aBtn").on('click', () => {
  console.log(this);
})
// ->
// Window {window: Window, self: Window, document: document, name: "", location: Location, …}


実行された要素をthisとして定義
下(arrow)
宣言時のスコープを持つオブジェクトをthisとして定義
スコープを特に指定しなければグローバルオブジェクトとなる

実行された要素を取得するには

$("#aBtn").on('click', (e) => {
  console.log(e.currentTarget);
})
// ->
// <button id="aBtn">Submit</button>

が正解

余談だが、
仮に

<div id="aBtn">
  <p>Submit</p>
</div>

のような要素があったとしたとき

$("#aBtn").on('click', (e) => {
  console.log(e.target);
})

とすると
<p>Submit</p>
が返ってくることがある

これは
currentTargetがイベントリスナーを付けたノードに紐づけられたものに対して、
targetはマウスオーバーしているイベント発生ノードに紐づけられるから