箭头函数不绑定this，其this沿作用域链向上继承外层非箭头函数的this值；模块顶层箭头函数中this为undefined；对象方法内箭头函数继承外层函数this；事件监听中定义在class构造函数内的箭头函数可正确访问实例this；导出箭头函数调用时this恒为undefined。
箭头函数本身不绑定 this，它会沿作用域链向上查找最近的非箭头函数上下文中的 this 值。在模块内部使用时，关键看箭头函数定义的位置和外层函数的 this 绑定方式。
模块顶层的箭头函数没有 this 绑定
ES 模块（.mjs 或 type="module" 的 script）顶层代码运行在严格模式下，且顶层 this 是 undefined。如果在模块顶层直接写箭头函数：
const fn = () => console.log(this); // this 是 undefined对象方法中用箭头函数，this 取决于外层函数
如果箭头函数写在对象的方法里（该方法是普通函数），它的 this 会继承外层函数的 this：
const obj = {
name: 'test',
normalMethod() {
const arrow = () => this.name; // this 指向 obj
return arrow();
}
};
- 调用 obj.normalMethod() 时，外层函数的 this 是 obj，箭头函数也拿到 obj
- 但如果把 normalMethod 赋值给变量再调用，普通函数的 this 会丢失，箭头函数也就跟着取不到正确对象
事件处理或回调中常见陷阱
在模块中给 DOM 元素添加事件监听器时，容易误以为箭头函数能自动绑定 this：
class Component {constructor() {
this.value = 42;
document.body.addEventListener('click', () => {
console.log(this.value); // ✅ 正确，this 指向 Component 实例
});
}
}
- 因为箭头函数定义在 constructor 内部，外层是 class 构造函数，this 是当前实例
- 但若把监听器写成 document.body.addEventListener('click', this.handleClick)，而 handleClick 是普通函数，就需手动绑定 this 或改用箭头函数定义方法
导出函数中使用箭头函数要注意调用方式
模块导出一个箭头函数时，它没有自己的 this，调用时 this 总是 undefined（严格模式）：
export const action = () => {console.log(this); // undefined，无论怎么调用
};
- 即使通过对象调用：obj.action()，箭头函数也不认 obj 为 this
- 需要动态 this 的场景，应使用普通函数，并确保调用时绑定正确上下文
