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

矢印関数はJSの通常の関数とどのように異なりますか?


通常の関数は、JavaScriptの開始以来使用している「古い学校」の関数です。

function run() {

}

それらは直接実行できます:

run()

または、変数に割り当てることができます。

const run = function run() {

}

run()

そうすると、関数は次のことができますまた匿名にする:

const run = function () {

}

run()

唯一の違いは、エラーが発生したときに表示されるスタックトレースに、関数名が表示されなくなることです。

2015年にES6で導入された矢印関数は、名前がないため、この最後のバージョンの通常の関数に似ています。決して。

構文「フットプリント」は小さくなります。

const run = () => {

}

run()

パラメータが1つある場合は、括弧を省略できます。

const run = param => {

}

run()

また、ステートメントが1つしかない場合は、中括弧を省略することもできます。

const run = param => 'running'
run()

この場合、戻り値は文字列です。'running'

矢印関数と通常の関数の両方をオブジェクトメソッドとして使用できます。

これらの2つの機能の最大の違いは、次のとおりです。thisメソッドにバインドされています。

この例を考えてみましょう。

const car = {
  brand: 'Ford',
  model: 'Fiesta',
  start: function() {
    console.log(`Started ${this.brand} ${this.model}`)
  },
  stop: () => {
    console.log(`Stopped ${this.brand} ${this.model}`)
  }
}

thisの中にstart()メソッドはオブジェクト自体を参照します。

しかし、stop()矢印関数であるメソッドは、そうではありません。

thisオブジェクトインスタンスにバインドされていません。それは何を指しているthis外側のスコープを指します。

これは、矢印関数は、オブジェクトメソッドでの使用には適していませんアクセスしたいときthis

私の無料ダウンロードJavaScriptビギナーズハンドブック


その他のjsチュートリアル: