为什么addEventListener的匿名箭头回调内this.value返回undefined？

MDN文档中描述的「addEventListener 触发回调时 this 指向绑定事件的DOM元素」规则，仅对普通函数形式的回调生效，箭头函数回调不受该规则约束。实际表现不符合预期的本质是混淆了箭头函数的this绑定特性和普通函数的this绑定逻辑。

具体逻辑拆解 #

• 前三组测试用例的回调均为普通函数形式，普通函数的this由调用上下文动态决定：事件触发时，浏览器会将回调的this强制指向绑定事件的DOM节点，因此可以正常通过this.value拿到滑块的当前值。
• 失效用例采用箭头函数作为回调，箭头函数本身没有独立的this绑定机制：它的this值在函数定义阶段就确定，会直接继承外层词法作用域的this，完全不受后续事件调用时的上下文修改影响。
• 测试代码中的箭头函数定义在全局作用域下，浏览器环境中全局作用域的this为window对象，因此回调执行时，this指向window而非slider DOM元素，读取this.value自然返回undefined。
• 箭头函数的this无法通过call、apply、bind方法强制修改，这也是其区别于普通函数的核心特性。

常用修正方案 #

• 箭头函数回调中如果需要拿到绑定事件的DOM元素，无需依赖this，可以通过事件对象的currentTarget属性获取，示例写法：

var slide = document.getElementById("slider");
slide.addEventListener("input", (e) => { 
  alert(e.currentTarget.value)
});

• 如果需要让回调内的this正常指向DOM元素，直接替换为普通函数形式即可，和前面可正常运行的测试用例逻辑保持一致。

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