箭头函数在dom事件监听器中无法获取触发元素的this，因其不绑定this而是继承外层词法作用域的this；应使用event.currenttarget或改用普通函数。
箭头函数在 DOM 事件监听器中“失效” this，本质不是它失效，而是它根本没有自己的 this —— 它会沿作用域链向上找外层函数的 this，而外层往往不是你期望的 DOM 元素。
箭头函数不绑定 this
普通函数作为事件处理器时，浏览器会自动把触发该事件的 DOM 元素赋给函数内的 this（即 event.currentTarget）。但箭头函数没有自己的 this，它继承定义时所在词法作用域的 this 值。
常见写法错误：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
button.addEventListener('click', () => {
console.log(this); // 这里的 this 是外层作用域的（比如 window 或模块顶层），不是 button
});
为什么看起来“this 失效”了
- 在全局作用域或模块顶层定义箭头函数 → this 指向 window（非严格模式）或 undefined（严格模式）
- 在 class 方法里定义箭头函数 → this 指向 class 实例，而非事件目标元素
- 无法通过 call/apply/bind 改变箭头函数的 this
怎么正确获取触发事件的 DOM 元素
-
用 event 参数代替 this：所有事件处理器都会收到 Event 对象，
event.target（实际点击的元素）或event.currentTarget（监听器绑定的元素）更可靠 - 改用普通函数：让浏览器自动绑定 this 到当前绑定的 DOM 元素
- 显式传入 this：如果必须用箭头函数，可在外层捕获 this 并闭包使用（不推荐，冗余）
推荐写法对比
✅ 推荐（用 event）：
button.addEventListener('click', (e) => {
console.log(e.currentTarget); // 就是 button，稳定可靠
console.log(e.target); // 点击的子元素（如 button 内的 span）
});
✅ 也推荐（普通函数）：
button.addEventListener('click', function() {
console.log(this); // 自动指向 button
});
❌ 避免（想当然用箭头函数 + this）：
button.addEventListener('click', () => {
console.log(this); // 几乎肯定不是 button
});
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
