2

**下記コードで、

() => this

はどういう意味でしょうか?**


  this.a = 0;
  baz(() => this);
0

1 件の回答 1

8

アロー関数と呼ばれるECMAScript 6で導入された構文で、「引数のないthisを返す無名関数」を作成しています。

前半の()は関数の仮引数宣言です。この場合は()ですので引数を取りませんが、一般的には(a, b, c, ..., z)のように宣言します。また引数が1個の場合a =>のように括弧を省略することが出来ます。

後半の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となる値を含めてFunction.prototype.callapplyを呼び出して実行するなどの方法がとられていました。

baz(this.foo, this);

// function baz(fn, thisArg)
fn.call(thisArg);

アロー関数では関数内のthisはアロー関数式が実行されたときのthisに束縛されるため、簡潔に匿名関数を定義して他の処理に渡すことが出来ます。

3
  • 「() =>」ってそういう意味なのですね。検索キーワードが分からなかったので助かりました。「アロー関数とthis」については、ざっくり言うと、呼び出し元は全く関係がなく、呼び出される側の 「アロー関数とthis」を囲む実行コンテキストの 値が this へ設定される? 「アロー関数とthis」を囲む「実行コンテキストがグローバルだったら、thisは常にグローバルオブジェクト」、「実行コンテキストが関数だったらthisは常に関数オブジェクト」を指す、ということでしょうか?
    – re9
    Commented 2016年9月27日 0:35
  • 2
    そうですね。アロー関数内のthisは「アロー関数のインスタンスを作成した」コンテキストのthisとなります。
    – pgrho
    Commented 2016年9月27日 1:54
  • 回答編集ありがとうございました。説明大変分かりやすかったです。参考になりました
    – re9
    Commented 2016年9月27日 23:57

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。