=>
はアロー関数と呼ばれるECMAScript 6で導入された構文で、「引数のないthis
を返す無名関数」を作成しています。
前半の()
は関数の仮引数宣言です。この場合は()
ですので引数を取りませんが、一般的には(a, b, c, ..., z)
のように宣言します。また引数がないこと1個の場合a =>
のように括弧を表し省略することが出来ます。
従来のJavaScript後半のthis
は関数オブジェクトの本体で{ return this; }
の省略形です。
またアロー関数には呼び出し方により「アロー関数が作成されたときのthis
の値がアロー関数内部で使用されるthis
の値になる」という特徴があります。
仮に質問文のコードをfunction
を使って
baz(function () { return this });
と書き換えると、baz
内での引数の取り扱いによって関数内のthis
の値が変化するためしてしまいます。
function baz(fn) {
console.log(fn()); // グローバルオブジェクトが出力される
var obj = { fn: fn };
console.log(obj.fn()); // objが出力される
}
これではなにかと不都合なので、呼び出し側でthis
参照を変数に置き換えたり、
var _this = this;
baz(function () { return _this; });
のよう関数に呼び出し元で渡す引数にthis
のとなる値をどこかに保存するか、引数として追加で含めてthisFunction.prototype.call
として使用する値やapply
を指定させる必要呼び出して実行するなどの方法がありとられていましたが、アロー。
baz(this.foo, this);
// function baz(fn, thisArg)
fn.call(thisArg);
アロー関数では関数内のthis
はアロー関数式が変化しない実行されたときのでこのような工夫this
に束縛されるため、簡潔に匿名関数をする必要定義して他の処理に渡すことがありません出来ます。