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

224

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

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

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

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

jQueryevent.currentTarget专门提供，因为即使在 ES6 之前，jQuery 也不总是可以将 a 强加this在回调函数上（即，如果它通过bind.

于 2014-12-27T18:52:24.183 回答
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 回答
58

另一个案例

meagar 的答案是正确的，我投了赞成票。

但是，还有另一种情况：

$('jquery-selector').each(() => {
    $(this).click();
})

可以固定为：

$('jquery-selector').each((index, element) => {
    $(element).click();
})

这是 jQuery 中的一个历史错误，它将index而不是element作为第一个参数：

.each（函数）

函数
类型：Function( Integer index, Element element )
为每个匹配元素执行的函数。

见：https ://api.jquery.com/each/#each-function

于 2017-03-27T13:54:54.757 回答
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
      }
    });
  }
}

事件对象的on 与 jQuery在调用处理程序时currentTarget设置的相同。this

于 2016-11-30T17:04:19.443 回答
8

正如Meager在他对同一个问题的回答中所说，如果你想写 ES6，你需要一直写 ES6，

所以如果你使用的是 ES6: 的箭头函数(event)=>{}，那么你必须使用$(event.currentTarget)而不是$(this).

您还可以使用更漂亮和更清洁的方式来使用 currentTarget ({currentTarget})=>{}，

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

最初， rizzi frank在 meagar 的回答中评论了这个想法，我觉得它很有用，我认为并非所有人都会阅读该评论，所以我把它写成另一个答案。

于 2019-07-30T10:33:34.620 回答