JavaScriptの矢印関数のチュートリアル

矢印関数は、ES6 / ES2015で最も影響力のある変更の1つであり、今日では広く使用されています。通常の機能とは少し異なります。方法を見つけます

矢印関数はES6 / ECMAScript 2015で導入され、導入以来、JavaScriptコードの外観(および動作)が一変しました。

私の意見では、この変更は非常に歓迎されたので、今ではめったに使用法を見ることができませんfunction最新のコードベースのキーワード。それはまだその使用法がありますが。

視覚的には、これは単純で歓迎すべき変更であり、以下から、より短い構文で関数を記述できます。

const myFunction = function() {
  //...
}

const myFunction = () => {
  //...
}

関数本体にステートメントが1つしかない場合は、角かっこを省略して、すべてを1行に書き込むことができます。

const myFunction = () => doSomething()

パラメータは括弧内に渡されます:

const myFunction = (param1, param2) => doSomething(param1, param2)

パラメータが1つ(および1つだけ)ある場合は、括弧を完全に省略できます。

const myFunction = param => doSomething(param)

この短い構文のおかげで、矢印関数小さな関数の使用を奨励する

暗黙のリターン

矢印関数を使用すると、暗黙的に戻り値を返すことができます。値は、を使用せずに返されます。returnキーワード。

関数本体に1行のステートメントがある場合に機能します。

const myFunction = () => 'test'

myFunction() //‘test’

別の例として、オブジェクトを返すときは、中括弧を括弧で囲むことを忘れないでください。これは、折り返し関数の本体ブラケットと見なされないようにするためです。

const myFunction = () => ({ value: 'test' })

myFunction() //{value: ‘test’}

どうやってthis矢印関数で動作します

thisコンテキストによって大きく異なり、JavaScriptのモードによっても異なるため、理解が複雑になる可能性のある概念です(厳密モードか否か)。

矢印関数は通常の関数とは動作が大きく異なるため、この概念を明確にすることが重要です。

オブジェクトのメソッドとして定義されている場合、通常の関数でthisオブジェクトを参照するため、次のことができます。

const car = {
  model: 'Fiesta',
  manufacturer: 'Ford',
  fullName: function() {
    return `${this.manufacturer} ${this.model}`
  }
}

召命car.fullName()戻ります"Ford Fiesta"

ザ・this矢印関数付きのスコープは遺伝性の実行コンテキストから。矢印関数はバインドされませんthisまったく、その値はコールスタックで検索されるので、このコードではcar.fullName()動作せず、文字列を返します"undefined undefined"

const car = {
  model: 'Fiesta',
  manufacturer: 'Ford',
  fullName: () => {
    return `${this.manufacturer} ${this.model}`
  }
}

このため、矢印関数はオブジェクトメソッドとしては適していません。

オブジェクトをインスタンス化するとコンストラクタが発生する場合、矢印関数をコンストラクタとして使用することもできません。TypeError

これは、代わりに通常の関数を使用する必要がある場所です。動的コンテキストが不要な場合

これは、イベントを処理するときにも問題になります。 DOMイベントリスナーセットthisターゲット要素になるために、そしてあなたが依存している場合thisイベントハンドラーでは、通常の関数が必要です。

const link = document.querySelector('#link')
link.addEventListener('click', () => {
  // this === window
})
const link = document.querySelector('#link')
link.addEventListener('click', function() {
  // this === link
})

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


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