関数(関数式)とアロー関数のthisの評価の違い

前提

this は、現在のコンテキスト（文脈）で実行されているオブジェクトを参照するために使用される。このキーワードは、関数内で定義された場合、その関数を呼び出す方法によって、参照するオブジェクトが変わる。

関数(関数式)とアロー関数の違い

• アロー関数は、ES6から新しく導入された関数記法で、名前の通り=>を使って関数を定義する。
• 関数式をより簡潔に表現するため考案された為、関数式に書き方が似ている。
• アロー関数と通常の関数の主な違いは、アロー関数はより短く簡潔な構文を持ち、"this" の扱いが異なるという点。

thisの評価の違い

関数(関数式)とアロー関数によって、this の値は、以下のように決まる。

• 関数内 : thisはGlobalオブジェクト(windowオブジェクト)を参照

  • Globalオブジェクトはwindowオブジェクト
  • Webブラウザ環境でJavaScriptのコードを書く場合には、Globalオブジェクトはwindowオブジェクトと定義される
  • しかし、例外として、Strict モードではundefinedになってしまう

• アロー関数内 : thisは呼び出し元のオブジェクト(レシーバーオブジェクト)を参照

  • 関数であってもアロー関数内では、thisの値は通常の関数定義や関数式とは異なる値を参照する
  • アロー関数内のthisは定義されておらず、呼び出し元のオブジェクト（レシーバーオブジェクト）を参照する

以下の例のようにthisの参照先に違いがみられる

let a = {
  firstName: "arrow function!",
  callThis() {
    let arrow = () => {
      console.log(this);
    };
    arrow();
  }
};

a.callThis();// 結果：オブジェクトa

let b = {
  firstName: "function!",
  callThis() {
    let func = function () {
      console.log(this);
    };
    func();
  }
};

b.callThis();// 結果：windowオブジェクト

参考

JavaScriptの"this"を完全解説！！【開眼JavaScriptまとめ】
【JavaScriptの基本】アロー関数と従来の関数の違い
アロー関数式 - mdn web docs
アロー関数と関数の違いとthisの評価のされ方