JavaScriptの通常の関数と矢印関数の違い

MDNによると、矢印関数式は、通常の関数式の構文的にコンパクトな代替手段ですが、this、arguments、super、またはnew.targetキーワードへの独自のバインディングはありません。矢印関数式はメソッドとしては不適切であり、コンストラクターとして使用することはできません。

JavaScriptの通常の関数と矢印関数には3つの微妙な違いがあります。

このバインディングを所有していません

矢印関数には、独自のこの値はありません。矢印関数内のこの値は、常に囲んでいるスコープから継承されます。

例

this.a = 100;
let arrowFunc = () => {this.a = 150};
function regFunc() {
   this.a = 200;
}
console.log(this.a)
arrowFunc()
console.log(this.a)
regFunc()
console.log(this.a)

出力

100
150
150

矢印関数がこのオブジェクトをスコープ外に変更したことを確認してください。通常の関数は、それ自体の内部で変更を加えただけです。

矢印関数には引数配列がありません

JS引数では、関数の配列は、関数に渡されるすべての引数を取得するために使用できる特別なオブジェクトです。これと同様に、矢印関数には引数オブジェクトへの独自のバインドはなく、スコープを囲む引数にバインドされます。

矢印関数は呼び出し可能ですが、構築できません

関数が構築可能である場合、それはnew、つまりnew User（）で呼び出すことができます。関数が呼び出し可能である場合、それは新規なしで呼び出すことができます（つまり、通常の関数呼び出し）。

関数宣言/式を介して作成された関数は、構築可能であり、呼び出し可能です。

矢印関数（およびメソッド）は呼び出し可能です。クラスコンストラクターは構築可能です。

呼び出し不可能な関数を呼び出そうとしたり、構築不可能な関数を構築しようとすると、ランタイムエラーが発生します。

let arrowFunc = () => {}
new arrowFunc()
This code gives the error:
arrowFunc is not a constructor