【javascript,jQuery】アロー関数を使ってthis使ったら思ったようにいかなかった時の備忘録

クリックイベントのコールバック関数でアロー関数使ったらthisがクリックした要素じゃなくてdocumentオブジェクト見に行って「？？？」ってなった時の備忘録

関数内で呼び出した「this」が効かなかった

クリック時の処理で、es6学んだしアロー関数で書こうかなって思って試したらアロー関数内のthisが何故かローカルスコープじゃなくてグローバルスコープのdocumentオブジェクトを見に行ってた

// アロー関数
$('ul li').on('click', () => {
  console.log($(this));// document（liクリックするとdocument返す）
}

// 通常の関数
$('ul li').on('click', function() {
  console.log($(this));// li（liクリックしたらli返す）
}

最初コールバック関数にアロー関数を使うのが駄目だと思っていたけど、アロー関数内のthisはどうにもグローバルスコープのthisを参照するみたい

javascriptのthisも同じで
オブジェクト内のメソッドとして通常の関数とアロー関数の2パターンで試してみる

this.name = 'グローバル';

var obj = {
  name: 'ローカル',
  normal: function() {
    console.log(this.name+'です。');
  },
  arrow: () =>{
    console.log(this.name+'です。');
  }
};
obj.normal();// ローカルです。
obj.arrow();// グローバルです。

アロー関数を使うとグローバルスコープを参照してた
レキシカルスコープって呼んでる記事もあった

なんかthisを束縛したくなくてアロー関数はできたみたいだから
基本的にローカルスコープを使いたいときは通常の関数function () {}を使ったほうがいいみたいね

勉強になったわ