ES6の矢印関数に反応する
矢印関数
矢印関数を使用すると、より短い関数構文を記述できます。
前：
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番目の例が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);
関数を操作するときは、これらの違いを覚えておいてください。通常の関数の動作が必要な場合もありますが、そうでない場合は、矢印関数を使用してください。