将 jQuery $（this）与 ES6 Arrow Functions 一起使用（对这个绑定进行词法化）

javascript jquery ecmascript-6 arrow-functions

2022-08-30 02:37:14

将 ES6 箭头函数与词法绑定结合使用非常棒。this

但是，我刚才遇到了一个问题，将其与典型的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'); }
    });
  }
}

然后转换为 ES5 （self = this）类型的闭包。$(this)

有没有办法让 Traceur 忽略词法绑定的“$（this）”？

答案 1

这与Traceur和关闭某些东西无关，这就是ES6的工作原理。这是您通过使用而不是来请求的特定功能。=>function () { }

如果你想写ES6，你需要一直写ES6，你不能在某些代码行上切换进出它，你绝对不能抑制或改变工作方式。即使你可以，你最终也会得到一些奇怪的JavaScript版本，只有你才能理解，并且在你定制的Traceur之外永远不会正常工作，这绝对不是Traceur的重点。=>

解决此特定问题的方法不是使用来访问单击的元素，而是使用：thisevent.currentTarget

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

jQuery之所以特别提供，是因为即使在ES6之前，jQuery也并不总是能够对回调函数施加一个（即，如果它通过绑定绑定到另一个上下文。event.currentTargetthis

答案 2

事件绑定

$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
});

将 jQuery $（this） 与 ES6 Arrow Functions 一起使用（对这个绑定进行词法化）

将 jQuery $（this）与 ES6 Arrow Functions 一起使用（对这个绑定进行词法化）