Javascript 使用jQuery$（this）和ES6 Arrow函数（词法绑定）

将ES6 arrow函数与词法

结合使用，这种绑定非常好

但是，我刚才在使用典型的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的工作原理。这是您通过使用
=>
而不是
函数（）{}
所要求的特定功能

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

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

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

jQuery提供了
event.currentTarget
，这是因为即使在ES6之前，jQuery也不可能总是将
this
强加于回调函数（即，如果它通过绑定到另一个上下文。
这与Traceur和关闭某些东西无关，这只是ES6的工作方式。这是您通过使用
=>
而不是
函数（）{}
要求的特定功能

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

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

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

jQuery提供了
event.currentTarget
，这是因为，即使在ES6之前，jQuery也不可能总是将
此
应用于回调函数（即，如果它通过事件绑定绑定到另一个上下文）

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

环路

事件绑定

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

环路

（这是我为这个问题的另一个版本所写的答案，之前我知道它是这个问题的一个副本。我认为这个答案相当清楚地汇集了这些信息，所以我决定将其添加为一个社区维基，尽管它在很大程度上只是其他答案的不同措辞。）

你不能。这是箭头点函数的一半，它们关闭
这个
，而不是拥有自己的由调用方式设置的函数。对于问题中的用例，如果你想在调用处理程序时由jQuery设置
这个
，那么处理程序需要是一个
函数
函数

但是，如果您有使用箭头的理由（可能您想使用
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
相同。
（这是我为这个问题的另一个版本所写的答案，之前我知道它是这个问题的一个副本。我认为这个答案相当清楚地汇集了这些信息，所以我决定将其添加为一个社区维基，尽管它在很大程度上只是其他答案的不同措辞。）

你不能。这是箭头点函数的一半，它们关闭
这个
，而不是拥有自己的由调用方式设置的函数。对于问题中的用例，如果你想在调用处理程序时由jQuery设置
这个
，那么处理程序需要是一个
函数
函数

但是，如果您有使用箭头的理由（可能您想使用
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
相同。
另一种情况
最高的答案是正确的，我投了赞成票

然而，还有另一种情况：

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

可固定为：

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

这是jQuery中的一个历史错误，它将索引而不是元素作为第一个参数：

.每个（功能）
功能

类型：
函数（整数索引，元素）


为每个匹配元素执行的函数

请参阅：
另一个案例
最高的答案是正确的，我投了赞成票

然而，还有另一种情况：

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

可固定为：

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

这是jQuery中的一个历史错误，它将索引而不是元素作为第一个参数：

.每个（功能）
功能

类型：
函数（整数索引，元素）


为每个匹配元素执行的函数

参见：
正如他在回答同一问题时所说

因此，如果您使用ES6的arrow函数：
（event）=>{}
，那么您必须使用
$（event.currentTarget）
而不是
$（this）

您还可以使用更友好、更简洁的方式将currentTarget用作
（{currentTarget}）=>{}

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

最初，这个想法是在@Meager的回答中被评论的，我觉得它很有用，我想不是所有人都会读到这个评论，所以我把它写成了另一个答案。
as sai