使用jQuery $(this)与ES6箭头函数(词法this绑定)

使用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'); }
    });
  }
}

然后… $(this) 会被转换为 ES5 (self = this) 类型的闭包。

有没有办法让Traceur忽略”$(this) “的词法绑定?

解决方案:

这与Traceur和关闭某些功能无关,这只是ES6的工作方式。这是你要求的特定功能,通过使用 => 而不是 function () { }.

如果你想写ES6,你需要一直写ES6,你不能在某些代码行上开关它,你也绝对不能压制或改变ES6的运行方式 => 工作。即使你能做到,你也只能用一些只有你自己才懂的奇怪版本的 JavaScript,而且在你定制的 Traceur 之外永远无法正常工作,这绝对不是 Traceur 的意义所在。

解决这个特殊问题的方法是不使用 this 来访问被点击的元素,而不是使用 event.currentTarget:

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

jQuery提供 event.currentTarget 特别是因为,即使在ES6之前,jQuery也并不总是能够强加一个 this 上的回调函数(即,如果它是通过 bind.

给TA打赏
共{{data.count}}人
人已打赏
未分类

CSS动画关键帧计算

2022-9-13 15:57:36

未分类

Oracle:"(+) "在WHERE子句中的作用是什么?

2022-9-13 15:57:38

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索