jQuery点击事件箭头函数中this为undefined的原因咨询

代码片段 #

JavaScript

$('.myclass').click(() => {
  let myvar = this;
  console.log(this.tagName);
})

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<li><button class="myclass">click me</button></li>

控制台输出undefined，预期是button标签，需要获取按钮的data-*属性，但无法通过this获取元素，请问原因是什么？

核心原因是箭头函数不绑定自身的this上下文，它会继承外层作用域的this，而非指向触发事件的DOM元素。

在jQuery的事件回调机制中，只有使用普通函数作为回调时，this才会被自动绑定到触发事件的DOM元素。而你用了箭头函数，这里的this实际指向的是外层作用域（比如全局window对象，严格模式下为undefined），所以无法拿到按钮元素。

两种解决方法： #

1. 改用普通函数作为回调：

$('.myclass').click(function() {
  console.log(this.tagName); // 输出 BUTTON
  // 获取data属性示例：$(this).data('yourAttrName')
});

2. 若坚持使用箭头函数，通过事件对象的currentTarget获取元素：

$('.myclass').click((e) => {
  console.log(e.currentTarget.tagName); // 输出 BUTTON
  // 获取data属性示例：$(e.currentTarget).data('yourAttrName')
});

注意：e.target可能指向事件触发的子元素，而e.currentTarget始终指向绑定事件的元素，更适合你的场景。

内容的提问来源于stack exchange，提问作者R-obert