矢印関数vs一般関数

1.最小化関数

通常の関数とは異なり、いくつかの内容を省略して、関数を簡略化することができます.
矢印関数のサムネイル

文に加えて、{}を省略して返すこともできます.

しかし、returnキーワードの前に特定の論理が含まれている場合、簡略化は困難である.

パラメータがある場合は、()を省略してもよい.

ただし、実行文の部分が{}に囲まれている場合は、実行文を返すことはできません.戻るにはreturnキーを使用する必要があります.

2. this

次のコードでは、基本論理は同じですが、通常の関数を使用して作成された法線値と矢印値の出力の結果は異なります.これは、矢印関数と通常の関数のthisが異なるためです.

const Yseo = {
  name: '0seo',
  normal: function () {
    console.log(this.name)
  },
  arrow: () => {
  console.log(this.name)
  }
}
Yseo.normal() //noraml함수가 호출될 때 연결되어 있는 객체가 Yseo이기 때문에 this는 "0seo"가 됩니다
Yseo.arrow() // undefined : 호출위치와 상관 없이 함수 범위에서 this가 정의됩니다.(즉, 화살표함수가 만들어지는 위치에서 정의됩니다.)

一般(Normal)関数「呼び出し位置」定義

矢印(Arrow)関数は、宣言された「関数範囲」で

を定義します.
コールバック関数にこの値が定義されていない場合、

矢印関数はウィンドウグローバルオブジェクト

に設定されます.
例

const timer = {
  name: '0seo!',
  timeout: function () {
    setTimeout(function () {
      console.log(this.name)
    }, 2000)
  }
}
timer.timeout() // undefined

次のコードでは、timeout呼び出しの位置がsettimootという関数の内部であるため、this.nameはundefinedを出力します.したがって、timerの名前を出力する場合は、通常の関数ではなく矢印関数にコードを変更する必要があります.以下に示します.

const timer = {
  name: '0seo!',
  timeout: function () {
    setTimeout(() => {
      console.log(this.name)
    }, 2000)
  }
}
timer.timeout() // 0seo! (2초 뒤)

settimeoutやsetIntervalなどのタイマ関数を実行する場合、コールバック関数は矢印関数を使用するよりも通常の関数を使用するほうが効果的です.