アロー関数
アロー関数(Arrow Functions)
アロー関数は、可愛いらしくfat arrow(なぜなら
->は細く =>は太い)、またはlambda関数(他の言語でそう名付けられているため)とも呼ばれます。一般的に利用される機能のひとつは、このアロー関数()=> somethingです。これを使う理由は次の通りです：- 1.
functionを何度もタイプしなくて済む - 2.
thisの参照をレキシカルスコープで捕捉する - 3.
argumentsの参照をレキシカルスコープで捕捉する
関数型言語と比べると、JavaScriptでは
functionを頻繁に打ち込まなければならない傾向があります。アロー関数を使うと、関数をシンプルに作成できます1
var inc = (x)=>x+1;
Copied!
thisはJavaScriptにおいて昔から頭痛の種でした。 ある賢い人は「thisの意味をすぐに忘れるJavaScriptが嫌いだ」と言いました。アロー関数は、それを囲んだコンテキストからthisを捕捉します。純粋なJavaScriptだけで書かれたクラスを使って考えてみましょう：1
function Person(age) {
2
this.age = age;
3
this.growOld = function() {
4
this.age++;
5
}
6
}
7
var person = new Person(1);
8
setTimeout(person.growOld,1000);
9
10
setTimeout(function() { console.log(person.age); },2000); // 1, should have been 2
Copied!
このコードをブラウザで実行すると、関数内の
thisはwindowを参照します。なぜなら、windowがgrowOld関数を実行しているからです。修正方法は、アロー関数を使うことです：1
function Person(age) {
2
this.age = age;
3
this.growOld = () => {
4
this.age++;
5
}
6
}
7
var person = new Person(1);
8
setTimeout(person.growOld,1000);
9
10
setTimeout(function() { console.log(person.age); },2000); // 2
Copied!
これがうまくいく理由は、アロー関数が、関数本体の外側の
thisを捕捉するからです。次のJavaScriptコードは同等の動きをします(TypeScriptを使用しない場合の書き方です)。1
function Person(age) {
2
this.age = age;
3
var _this = this; // capture this
4
this.growOld = function() {
5
_this.age++; // use the captured this
6
}
7
}
8
var person = new Person(1);
9
setTimeout(person.growOld,1000);
10
11
setTimeout(function() { console.log(person.age); },2000); // 2
Copied!
TypeScriptを使っているので、はるかに快適な構文で書けます。アロー関数とクラスは、組み合わせて利用できます:
1
class Person {
2
constructor(public age:number) {}
3
growOld = () => {
4
this.age++;
5
}
6
}
7
var person = new Person(1);
8
setTimeout(person.growOld,1000);
9
10
setTimeout(function() { console.log(person.age); },2000); // 2
Copied!
Tip：アロー関数の必要性
簡潔な構文が得られることに加えて、関数を他の何かに呼び出してもらいたい場合も、アロー関数を使うだけで良いのです。本質的には以下の通りです:
1
var growOld = person.growOld;
2
// Then later someone else calls it:
3
growOld();
Copied!
自分で呼び出す場合は以下のようになります:
1
person.growOld();
Copied!
どちらでも、
thisは正しいコンテキストになります(この例ではperson)。Tip：アロー関数の危険性
実は、
thisを呼び出しコンテキストにしたい場合はアロー関数を使うべきではありません。jquery、underscore、mochaのようなライブラリで使用するコールバックのケースです。ドキュメントがthisの機能について言及している場合は、おそらくアロー関数の代わりにfunctionを使うべきでしょう。同様に、あなたがargumentsを使うことを予定している場合は、アロー関数を使用しないでください。Tip：thisを使用するライブラリのアロー関数
thisを使用するライブラリのアロー関数thisを使う多くのライブラリ、例えば
jQueryの反復(例: https://api.jquery.com/jquery.each/)はthisを使って現在反復中のオブジェクトを渡します。このようなケースにおいて、ライブラリが渡したthisだけでなく周囲のコンテキストにもアクセスしたい場合は、アロー関数が無いときに行うように_selfのような一時変数を使用してください。1
let _self = this;
2
something.each(function() {
3
console.log(_self); // the lexically scoped value
4
console.log(this); // the library passed value
5
});
Copied!
Tip：アロー関数と継承
クラスのプロパティとしてのアロー関数は、継承において正常に動作します：
1
class Adder {
2
constructor(public a: number) {}
3
add = (b: number): number => {
4
return this.a + b;
5
}
6
}
7
class Child extends Adder {
8
callAdd(b: number) {
9
return this.add(b);
10
}
11
}
12
// Demo to show it works
13
const child = new Child(123);
14
console.log(child.callAdd(123)); // 246
Copied!
しかし、子クラスで関数をオーバーライドした場合、
superキーワードは動作しません。プロパティはthisに行きます。thisは1つしかないので、このような関数は、親クラスの同じ関数を呼び出すことはできません(superはprototypeのメンバだけで動作します)。メソッドを子にオーバーライドする前に、メソッドのコピーを作成することで回避できます。1
class Adder {
2
constructor(public a: number) {}
3
// This function is now safe to pass around
4
add = (b: number): number => {
5
return this.a + b;
6
}
7
}
8
9
class ExtendedAdder extends Adder {
10
// Create a copy of parent before creating our own
11
private superAdd = this.add;
12
// Now create our override
13
add = (b: number): number => {
14
return this.superAdd(b);
15
}
16
}
Copied!
Tip：Quick Object Return
時には単純なオブジェクトリテラルを返す関数が必要な場合もあります。しかし、下記のような場合:
1
// WRONG WAY TO DO IT
2
var foo = () => {
3
bar: 123
4
};
Copied!
JavaScriptランタイム(JavaScriptの仕様に原因がある)によってJavaScript Labelを含むブロックとして解釈されます。
この意味がわからなくても心配しないでください。いずれにしろ、"unused label"(未使用のラベル)というTypeScriptのナイスなコンパイラエラーが発生します。Labelは古い(そしてほとんどは使用されていない)JavaScript機能で、現代のGOTO(経験豊富な開発者は悪いものとみなす🌹)として無視して構いません。
()でオブジェクトのリテラルを囲むことで修正できます：1
// Correct 🌹
2
var foo = () => ({
3
bar: 123
4
});
Copied!
最終更新 1yr ago