JavaScriptの矢印関数
矢印関数はES6で導入されました。
矢印関数を使用すると、より短い関数構文を記述できます。
let myFunction = (a, b) => a * b;
前：
hello = function() {
return "Hello World!";
}
矢印機能付き：
hello = () => {
return "Hello World!";
}
短くなります！関数にステートメントが1つしかなく、ステートメントが値を返す場合は、角かっことキーワードを削除でき
ますreturn。
矢印関数のデフォルトの戻り値：
hello = () => "Hello World!";
注：これは、関数にステートメントが1つしかない場合にのみ機能します。
パラメータがある場合は、括弧内に渡します。
パラメータ付きの矢印関数：
hello = (val) => "Hello " + val;
実際、パラメーターが1つしかない場合は、括弧をスキップすることもできます。
どうthisですか？
this矢印関数の扱いも通常の関数とは異なります。
要するに、矢印関数では。のバインディングはありません
this。
通常の関数では、thisキーワードは関数を呼び出すオブジェクトを表します。これは、ウィンドウ、ドキュメント、ボタンなどです。
矢印関数を使用すると、thisキーワードは常に矢印関数を定義したオブジェクトを表します。
違いを理解するために、2つの例を見てみましょう。
どちらの例も、メソッドを2回呼び出します。最初はページが読み込まれたとき、もう1回はユーザーがボタンをクリックしたときです。
最初の例では通常の関数を使用し、2番目の例では矢印関数を使用しています。
結果は、最初の例が2つの異なるオブジェクト（ウィンドウとボタン）を返し、2番目の例がウィンドウオブジェクトを2回返すことを示しています。これは、ウィンドウオブジェクトが関数の「所有者」であるためです。
例
通常の関数では、関数を呼び出すthisオブジェクトを表します。
// Regular Function:
hello = function() {
document.getElementById("demo").innerHTML
+= this;
}
// The window object calls the function:
window.addEventListener("load", hello);
// A button object calls the
function:
document.getElementById("btn").addEventListener("click", hello);
例
矢印付きの関数は、関数の所有者thisを表し
ます。
// Arrow Function:
hello = () => {
document.getElementById("demo").innerHTML
+= this;
}
// The window object calls the function:
window.addEventListener("load", hello);
// A button object calls the
function:
document.getElementById("btn").addEventListener("click", hello);
関数を操作するときは、これらの違いを覚えておいてください。通常の関数の動作が必要な場合もありますが、そうでない場合は、矢印関数を使用してください。
ブラウザのサポート
次の表は、JavaScriptでArrow関数を完全にサポートする最初のブラウザバージョンを定義しています。
| Chrome 45 | Edge 12 | Firefox 22 | Safari 10 | Opera 32 |
| Sep, 2015 | Jul, 2015 | May, 2013 | Sep, 2016 | Sep, 2015 |