JavaScript アロー関数
より短くなる！関数にステートメントが1つだけあり、そのステートメントが値を返す場合は、括弧とreturnキーワードを削除できます。
注:これは、関数にステートメントが1つしかない場合にのみ機能します。
パラメータがある場合は、括弧内にパラメータを渡します。
実際、パラメータが1つだけの場合は、括弧も省略できます。
何についてのthis?
アロー関数では通常の関数と比べてthisの扱いも異なります。
つまり、アロー関数ではthisのバインドはありません。
通常の関数では、thisキーワードは関数を呼び出すオブジェクト (ウィンドウ、ドキュメント、ボタンなど) を表します。
アロー関数の場合、thisキーワードは常にアロー関数を定義したオブジェクトを表します。
違いを理解するために、2つの例を見てみましょう。
どちらの例もメソッドを2回呼び出します。1回目はページの読み込み時、もう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のアロー関数を完全にサポートする最初のブラウザのバージョンを定義しています。
| Chrome 45 | Edge 12 | Firefox 22 | Safari 10 | Opera 32 |
| 2015年9月 | 2015年7月 | 2013年5月 | 2016年9月 | 2015年9月 |