「baz(() => this);」の「() => this」はどういう意味?

投稿者: Anonymous

**下記コードで、

() => this

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


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

解決

アロー関数と呼ばれる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に束縛されるため、簡潔に匿名関数を定義して他の処理に渡すことが出来ます。

回答者: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *