在jQuery中使用ES6箭头函数绑定点击事件时遇问题，如何解决？

我懂你想用ES6箭头函数替代jQuery里传统的事件绑定写法，但碰到了两个头疼的问题对吧？咱们先把根源理清楚，再给你靠谱的解决方案：

首先得戳破箭头函数的核心特性：它没有自己独立的this，会直接继承外层作用域的this。而jQuery的事件绑定机制，本来是靠fn.apply(event.target, args)这种方式，把事件处理函数里的this强制指向触发事件的DOM元素——但箭头函数不吃这一套，它的this从一开始就定死了，根本没法被apply修改。

另外你也提到了，jQuery不像原生的Array.forEach()那样，会把当前元素作为第一个参数传给回调，所以想用箭头函数直接拿元素的话，一开始就没路子。

虽然箭头函数拿不到this指向的元素，但jQuery会给事件处理函数传一个事件对象event，咱们可以从这个对象里捞到目标元素：

• event.currentTarget：绑定事件的那个元素（和传统写法里的this完全一致）
• event.target：实际触发事件的子元素（比如你给父元素绑了事件，点击子元素时，这个就是子元素）

给你举个实际的例子对比：

传统jQuery点击事件写法：

$('.card').click(function() {
  $(this).toggleClass('expanded'); // this就是点击的.card元素
});

换成箭头函数的写法：

$('.card').click((event) => {
  $(event.currentTarget).toggleClass('expanded'); // 用event.currentTarget替代this
});

如果你的事件处理函数需要访问外层作用域的this（比如类组件里的实例属性），那箭头函数简直是救星，比如：

class TodoList {
  constructor() {
    this.todos = [];
    // 用箭头函数的话，这里的this直接指向TodoList实例
    $('#add-todo').click(() => {
      this.todos.push('新待办');
      console.log(this.todos.length);
    });
  }
}

这种场景下，你不用再写var self = this或者.bind(this)来保留外层的this，省心不少。

• 箭头函数在jQuery事件绑定里没法用this拿元素，但靠event.currentTarget就能完美替代
• 如果只是单纯操作触发事件的元素，其实传统函数写法更直接；但要是需要外层的this，箭头函数就是绝佳选择
• 本质就是箭头函数的this绑定规则和jQuery的事件调用机制不兼容，换个方式拿元素就搞定啦

内容的提问来源于stack exchange，提问作者santiago arizti