function定義の関数とアロー関数との this の違い

function定義の関数の this

定義された文脈中の object

アロー関数の this

関数それ自体

例

• function定義の関数の this

以下の例では obj1 が this となっている。

const obj1 = {
  num: 123,
  fn: function() {
    console.log(this);
  }
}

obj1.fn()
// { num: 444, fn: [Function: fn] }

• アロー関数の this

const obj2 = {
  num: 888,
  fn:()=>{
    console.log(this);
  }
};

obj2.fn()
// Object [global] {
//   global: [Circular],
//     clearInterval: [Function: clearInterval],
//     clearTimeout: [Function: clearTimeout],
//     setInterval: [Function: setInterval],
//     setTimeout: [Function: setTimeout] { [Symbol(util.promisify.custom)]: [Function] },
//     queueMicrotask: [Function: queueMicrotask],
//     clearImmediate: [Function: clearImmediate],
//     setImmediate: [Function: setImmediate] {
//     [Symbol(util.promisify.custom)]: [Function]
//   }
// }

開発における使い分け

基本的にアロー関数を使って、コードベース内で統一していく方がいい。

そうすることで、function定義の関数を使っていると、関数内で this から何か使いたいんだなという意図を伝えられる。