150

レキシカルthisバインディングで ES6 アロー関数を使用するのは素晴らしいことです。

ただし、典型的な jQuery クリック バインディングで使用する少し前に問題が発生しました。

class Game {
  foo() {
    self = this;
    this._pads.on('click', function() {
      if (self.go) { $(this).addClass('active'); }
    });
  }
}

代わりに矢印関数を使用します。

class Game {
  foo() {
    this._pads.on('click', () => {
      if (this.go) { $(this).addClass('active'); }
    });
  }
}

そして、$(this)ES5 (self = this) 型のクロージャーに変換されます。

字句バインディングのために Traceur に "$(this)" を無視させる方法はありますか?

4

5 に答える 5

63

イベントバインディング

$button.on('click', (e) => {
    var $this = $(e.currentTarget);
    // ... deal with $this
});

ループ

Array.prototype.forEach.call($items, (el, index, obj) => {
    var $this = $(el);
    // ... deal with $this
});
于 2015-12-10T10:27:40.523 に答える
9

（これは、この質問の複製であることを知る前に、この質問の別のバージョンに対して書いた回答です。回答は情報をかなり明確にまとめていると思うので、コミュニティ wiki として追加することにしましたが、それは大きく異なるだけです他の回答の言い回し。)

できません。それがアロー関数のポイントの半分thisです。それらは、呼び出された方法によって設定された独自のアロー関数を持つ代わりに閉じます。質問のユースケースではthis、ハンドラーを呼び出すときにjQueryで設定したい場合、ハンドラーはfunction関数である必要があります。

ただし、矢印を使用する理由がある場合 (おそらく、this矢印の外側で矢印の意味を使用したい場合)、必要に応じてe.currentTarget代わりに使用できます。this

class Game {
  foo(){
    this._pads.on('click', e => {                   // Note the `e` argument
      if(this.go) {
        $(e.currentTarget).addClass('active');      // Using it
      }
    });
  }
}

イベント オブジェクトのは、ハンドラを呼び出すときにcurrentTargetjQuery が設定するものと同じです。this

于 2016-11-30T17:04:19.443 に答える
8

この同じ質問に対する彼の回答でMeagerが言ったように、ES6 を書きたい場合は、常に ES6 を書く必要があります。

したがって、ES6: のアロー関数を使用している場合は、代わりに(event)=>{}を使用する必要があります。$(event.currentTarget)$(this)

currentTarget を as として使用する、より適切でクリーンな方法を使用することもできます ({currentTarget})=>{}。

Class Game {
  foo(){
    this._pads.on('click', ({currentTarget}) => {
      if(this.go) {
        $(currentTarget).addClass('active');
      }
    });
  }
}

もともとこのアイデアは、ミーガーの回答でrizzi frankによってコメントされていました。私はそれが役立つと感じました。すべての人がそのコメントを読むとは限らないので、この別の回答として書きました。

于 2019-07-30T10:33:34.620 に答える