React ES6アロー関数
アロー関数
アロー関数を使用すると、より短い関数構文を記述できます。
より短くできます！関数にステートメントが1つしかなく、そのステートメントが値を返す場合は、括弧とreturnキーワードを削除できます。
注：これは関数にステートメントが1つしかない場合にのみ機能します。
パラメータがある場合は括弧内に渡します。
パラメーターが1つしかない場合は、括弧もスキップできます。
thisとは?
thisの処理も、アロー関数では通常の関数とは異なります。
つまり、アロー関数ではthisのバインドはありません。
通常の関数では、thisキーワードは、ウィンドウ、ドキュメント、ボタンなど、関数を呼び出したオブジェクトを表します。
アロー関数では、thisキーワードいつもアロー関数を定義したオブジェクトを表します。
違いを理解するために、2つの例を見てみましょう。
どちらの例もメソッドを2回呼び出します。1回目はページの読み込み時、もう1回はユーザーがボタンをクリックしたときです。
最初の例では通常の関数を使用し、2番目の例ではアロー関数を使用しています。
結果は、最初の例が2つの異なるオブジェクト(ウィンドウとボタン)を返し、2番目の例がHeaderオブジェクトを2回返すことを示しています。
例
通常の機能で、this関数を呼び出したオブジェクトを表します。
class Header {
constructor() {
this.color = "Red";
}
//Regular function:
changeColor = function() {
document.getElementById("demo").innerHTML += this;
}
}
const myheader = new Header();
//The window object calls the function:
window.addEventListener("load", myheader.changeColor);
//A button object calls the function:
document.getElementById("btn").addEventListener("click", myheader.changeColor);
例
アロー関数では、thisが関数を呼び出したかに関係なく、Headerオブジェクトを表します。
class Header {
constructor() {
this.color = "Red";
}
//Arrow function:
changeColor = () => {
document.getElementById("demo").innerHTML += this;
}
}
const myheader = new Header();
//The window object calls the function:
window.addEventListener("load", myheader.changeColor);
//A button object calls the function:
document.getElementById("btn").addEventListener("click", myheader.changeColor);
関数を操作するときはこれらの違いを覚えておいてください。通常の関数の動作が必要な場合もありますが、そうでない場合はアロー関数を使用してください。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。