JavaScript 中箭头函数在事件监听器中的 this 指向分析-js教程-PHP中文网

dom事件监听器中不推荐用箭头函数，因其不绑定自身this而继承外层作用域this（如window或undefined），无法直接访问触发元素；应改用普通函数或通过event.currenttarget获取目标元素。

javascript 中箭头函数在事件监听器中的 this 指向分析

箭头函数在事件监听器中不会绑定自己的 this，而是继承外层作用域的 this 值——这既是它的特点，也是容易出错的关键点。

箭头函数没有独立的 this 绑定

普通函数作为事件监听器时，浏览器会把触发事件的元素（如 button）作为 this 传入；而箭头函数不创建自己的执行上下文，它直接沿用定义时所在作用域的 this。

如果箭头函数写在全局作用域，this 指向 window（非严格模式）或 undefined（严格模式）
如果写在某个对象方法内部，this 就是该对象（前提是该方法的 this 本身被正确绑定）
它永远不会被事件触发机制动态修改为事件目标元素

常见错误场景：想访问 event.target 但误用 this

比如想点击按钮后修改自身样式：

const btn = document.querySelector('button');
btn.addEventListener('click', () => {
  this.style.backgroundColor = 'red'; // ❌ this 不是 btn，很可能是 window 或 undefined
});

正确做法是使用事件对象的 currentTarget 或 target：

Java注释规范Skills

当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。

下载

event.currentTarget 等价于监听器绑定的元素（即 btn）
event.target 是实际触发事件的元素（可能为子元素）

改写示例：

btn.addEventListener('click', (e) => {
  e.currentTarget.style.backgroundColor = 'red'; // ✅ 安全可靠
});

何时适合用箭头函数写事件监听器

当需要在回调中访问外层的 this（比如类实例、闭包变量），且不需要把事件源当作 this 时，箭头函数反而更安全。

类组件中保持对实例的引用：class App { handleClick = () => { console.log(this.state); } }
闭包中捕获变量：const id = 123; el.addEventListener('click', () => fetch(`/api/${id}`));
避免手动 bind：el.addEventListener('click', this.handleClick.bind(this)) 可替换为 this.handleClick = () => { ... }

替代方案与兼容性提醒

如果确实需要传统函数的 this 行为，就别用箭头函数。可选方式包括：

使用普通函数并确保调用上下文正确（如通过 bind、对象方法调用）
用 event 对象代替 this 访问 DOM 元素（推荐，语义更清晰）
ES6+ 中也可用解构获取 currentTarget：el.addEventListener('click', ({ currentTarget }) => currentTarget.remove())

注意：箭头函数不能用作构造函数，也不能使用 arguments 或 yield，这些限制在事件处理中虽不常涉及，但需心里有数。