另一个案例

Question

使用带有词法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忽略＆＃34; $（this）＆＃34;用于词汇绑定？

Answer 1

这与Traceur无关，关闭了一些东西，这就是ES6的工作原理。它是您使用=>代替function () { }所要求的具体功能。

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

解决此特定问题的方法不是使用=>来获取对被点击元素的访问权限，而是使用this：

event.currentTarget

jQuery特别提供Class Game { foo(){ this._pads.on('click', (event) => { if(this.go) { $(event.currentTarget).addClass('active'); } }); } }因为，即使在ES6之前，jQuery也不总是可以在回调函数上强加event.currentTarget（即，如果它通过{{3绑定到另一个上下文） }}

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

Answer 3

另一个案例

最佳答案是正确的，我已经投了票。

然而，还有另一种情况：

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

可以修复为：

<xsl:template match="input" mode="ixsl:onclick">
  <ixsl:schedule-action document="{if (@name='DataEntry') 
                                   then 'data.xml' 
                                   else 'data1.xml'}">
    <xsl:call-template name="process-xml-file"/>
  </ixsl:schedule-action>
</xsl:template>

Answer 4

（这是我为这个问题的另一个版本写的答案，在学习之前它是这个问题的重复。我认为答案相当清楚地汇总了信息所以我决定将它添加为社区维基虽然它在很大程度上只是对其他答案的不同措辞。）

你不能。这是箭头功能的一半，它们关闭this而不是按照他们的方式设置自己的设置。对于问题中的用例，如果您希望在调用处理程序时由jQuery设置this，则处理程序需要是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
      }
    });
  }
}

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

Answer 5

正如Meager在回答同一问题If you want to write ES6, you need to write ES6 all the time时所说，

因此，如果您正在使用ES6的箭头功能：(event)=>{}，则必须使用$(event.currentTarget)而不是$(this)。

您还可以使用更好的方法，将currentTarget用作({currentTarget})=>{}，

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

最初，这个想法在@Meager的回答中由rizzi frank进行了评论，我觉得它很有用，而且我认为并非所有人都会读到该评论，所以我将其写为另一个答案。

使用jQuery $（this）和ES6 Arrow函数（词汇这个绑定）

5 个答案:

另一个案例