アロー関数をもう一度見てみましょう。
アロー関数は、小さなことを書くための単なる「速記」ではありません。これらには、非常に具体的で便利な機能がいくつかあります。
JavaScript には、別の場所で実行される小さな関数を作成する必要がある状況がたくさんあります。
例えば：
arr.forEach(func) – func配列項目ごとにforEachによって実行されます。
setTimeout(func) – func組み込みスケジューラによって実行されます。
…他にもあります。
関数を作成してどこかに渡すのは、JavaScript の精神そのものです。
そして、そのような関数では通常、現在のコンテキストを離れたくありません。そこでアロー関数が役に立ちます。
オブジェクト メソッドの章で覚えたように、アロー関数にはthisがありません。 thisアクセスすると外部から取得されます。
たとえば、これを使用してオブジェクト メソッド内で反復処理を行うことができます。
グループ = { にします
タイトル: 「私たちのグループ」、
生徒: [「ジョン」、「ピート」、「アリス」]、
showList() {
this.students.forEach(
学生 => アラート(this.title + ': ' + 学生)
);
}
};
group.showList();ここでforEachではアロー関数が使用されているため、その中のthis.titleは外側のメソッドshowListとまったく同じです。つまり、 group.titleです。
「通常の」関数を使用すると、エラーが発生します。
グループ = { にします
タイトル: 「私たちのグループ」、
生徒: [「ジョン」、「ピート」、「アリス」]、
showList() {
this.students.forEach(function(student) {
// エラー: 未定義のプロパティ 'title' を読み取れません
アラート(this.title + ': ' + 学生);
});
}
};
group.showList();このエラーが発生するのは、 forEachデフォルトでthis=undefinedを指定して関数を実行するため、 undefined.titleへのアクセスが試行されるためです。
アロー関数にはthisがないだけなので、これは影響しません。
アロー関数はnewでは実行できません
thisがないということは、当然、別の制限を意味します。アロー関数はコンストラクターとして使用できません。 newを使用して呼び出すことはできません。
アロー関数 VS バインド
アロー関数=>と.bind(this)で呼び出される通常の関数の間には微妙な違いがあります。
.bind(this)関数の「バインドされたバージョン」を作成します。
矢印=>バインディングを作成しません。この関数には単にthisがありません。 this検索は、通常の変数検索とまったく同じ方法で、外部の字句環境で行われます。
アロー関数にはarguments変数もありません。
これは、現在のthisおよびarguments使用して呼び出しを転送する必要がある場合に、デコレータにとって非常に便利です。
たとえば、 defer(f, ms)関数を取得し、呼び出しをmsミリ秒遅らせるラッパーを返します。
関数 defer(f, ms) {
戻り関数() {
setTimeout(() => f.apply(this, argument), ms);
};
}
関数sayHi(who) {
アラート('こんにちは' + 誰);
}
letsayHiDeferred = defer(sayHi, 2000);
SayHiDeferred("ジョン"); // こんにちは、2 秒後のジョンアロー関数を使用しない場合は次のようになります。
関数 defer(f, ms) {
return function(...args) {
ctx = これとします。
setTimeout(関数() {
f.apply(ctx, args) を返します。
}、 MS）;
};
}ここでは、 setTimeout内の関数がそれらを取得できるように、追加の変数argsとctx作成する必要がありました。
アロー関数:
this持っていない
arguments持たないでください
newでは呼び出せません
superもありませんが、まだ勉強していません。クラス継承の章に進みます
これは、それらが独自の「コンテキスト」を持たず、現在のコンテキスト内で動作する短いコード部分を対象としているためです。そして、それらはそのユースケースで本当に威力を発揮します。