jQuery回调中箭头函数的this异常及编辑按钮ID数字提取问题

这问题我之前踩过坑！箭头函数的this绑定逻辑和普通函数完全不一样，咱们来一步步搞定它~

为什么箭头函数里this不好使？ #

箭头函数没有自己独立的this上下文，它的this是直接继承自外层作用域的。比如你在事件回调里用箭头函数，this指向的是外层的全局window（或者如果在类里的话就是类实例），根本不是你点击的那个.edit按钮，自然没法通过this.id拿到按钮的ID。

两种靠谱的解决方案 #

1. 用事件对象的currentTarget获取当前元素

这是最直接的方法，箭头函数的事件回调会接收一个event参数，通过event.currentTarget就能精准拿到绑定事件的按钮元素（区别于target，后者可能指向按钮内部的子元素，比如图标）。代码示例：

// 给所有.edit按钮绑定点击事件
document.querySelectorAll('.edit').forEach(btn => {
  btn.addEventListener('click', (e) => {
    // 获取当前点击的按钮
    const clickedBtn = e.currentTarget;
    // 拆分ID提取数字部分
    const itemId = clickedBtn.id.split('-')[1];
    
    console.log(itemId); // 输出类似32的数字
    // 接下来处理弹出表单的逻辑...
  });
});

2. 若不需要外层this，改用普通函数

如果你不需要在回调里捕获外层作用域的this，那直接换回普通函数就可以沿用你原来ES5的写法，省心又省力：

document.querySelectorAll('.edit').forEach(btn => {
  btn.addEventListener('click', function() {
    // 这里的this就是当前点击的按钮
    const itemId = this.id.split('-')[1];
    // 处理弹出表单...
  });
});

小提示 #

如果你的按钮是动态生成的（比如从后端加载的表格行），记得用事件委托来绑定事件，避免重复绑定的问题，同样可以用上面的方法获取元素ID：

// 给父容器绑定事件，监听子元素的点击
document.querySelector('#table-container').addEventListener('click', (e) => {
  // 判断点击的是不是.edit按钮
  if (e.target.closest('.edit')) {
    const clickedBtn = e.target.closest('.edit');
    const itemId = clickedBtn.id.split('-')[1];
    // 处理逻辑...
  }
});

内容的提问来源于stack exchange，提问作者Code Realistic