JavaScript アロー関数
- 前のページ JS this キーワード
- 次のページ JS クラス
ES6でアロー関数が導入されました。
アロー関数はより短い関数を書くことを可能にします：
文法
let myFunction = (a, b) => a * b;
以前：
hello = function() {
return "Hello World!";
}
アロー関数を使用した後：
hello = () => {
return "Hello World!";
}
本当に短くなりました！関数が一つの文しかない場合で、その文が値を返す場合、括弧と return キーワード：
アロー関数のデフォルトの返却値：
hello = () => "Hello World!";
注釈：これは関数が一つの文しかない場合にのみ有効です。
パラメータがある場合、それらを括弧内に渡します：
パラメータ付きのアロー関数：
hello = (val) => "Hello " + val;
実際には、一つのパラメータしかない場合、括弧を省略することもできます：
括弧なしのアロー関数：
hello = val => "Hello " + val;
これは どうすればいいのでしょうか？
標準関数と比較して、アロー関数は これは の処理も異なります。
簡潔に言えば、アロー関数を使用する際には、 これは のバインディングです。
標準関数において、キーワード これは 呼び出す関数のオブジェクトを表し、それはウィンドウ、ドキュメント、ボタン、その他の何でもできます。
アロー関数において、これは キーワードは常にアロー関数を定義するオブジェクトを表します。
これらの違いを理解するために二つの例を見てみましょう。
これらの例はどちらも二度方法を呼び出しています、一つはページが読み込まれたとき、もう一つはユーザーがボタンをクリックしたときです。
最初の例は標準関数を使用し、二つ目の例はアロー関数を使用しています。
結果は、最初の例では二つの異なるオブジェクト（windowとbutton）が返され、二つ目の例ではwindowオブジェクトが二度返される理由は、windowオブジェクトが関数の「所有者」だからです。
例
標準関数において、thisはその関数を呼び出すオブジェクトを表します：
// 標準関数：
hello = function() {
document.getElementById("demo").innerHTML += this;
}
// ウィンドウオブジェクトがこの関数を呼び出します：
window.addEventListener("load", hello);
// ボタンオブジェクトがこの関数を呼び出します：
document.getElementById("btn").addEventListener("click", hello);
例
アロー関数を使用すると これは 関数の所有者を示します：
// 矢印関数：
hello = () => {
document.getElementById("demo").innerHTML += this;
}
// ウィンドウオブジェクトがこの関数を呼び出します：
window.addEventListener("load", hello);
// ボタンオブジェクトがこの関数を呼び出します：
document.getElementById("btn").addEventListener("click", hello);
関数を使用する際には、これらの違いを覚えておいてください。時には、通常の関数の動作が望ましい場合がありますが、そうでない場合は、矢印関数を使用してください。
ブラウザのサポート
以下の表は、最初に完全に JavaScript 矢印関数をサポートするブラウザのバージョンを示しています：
| Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome 45 | Edge 12 | Firefox 22 | Safari 10 | Opera 32 |
| 2015 年 9 月 | 2015 年 7 月 | 2013 年 5 月 | 2016 年 9 月 | 2015 年 9 月 |
- 前のページ JS this キーワード
- 次のページ JS クラス
