普通函数的this由调用方式决定：独立调用指向window或undefined，对象方法调用指向该对象，构造调用指向新实例，事件监听中指向触发元素；箭头函数无this，继承外层普通函数的this且不可更改。
普通函数的 this 是在调用时确定的
JavaScript 中 this 不由函数定义位置决定，而取决于「谁调用它」。常见误区是以为写在哪、声明在哪就绑定哪，其实不是。
关键判断逻辑：看函数被调用时的「点号左边是谁」，或者是否用 call/apply/bind 显式指定。
- 独立调用（如
foo()）：非严格模式下指向window（浏览器），严格模式下为undefined - 对象方法调用（如
obj.method()）：this指向obj - 构造函数调用（
new Foo()）：this指向新创建的实例 - 事件监听器中（
btn.addEventListener('click', handler)）：this指向触发事件的 DOM 元素
箭头函数没有自己的 this，它继承外层作用域的 this
箭头函数不绑定 this，也不支持 call/apply/bind 改变它。它的 this 值在定义时就固定了，等于「上一级普通函数作用域中的 this」，或者全局作用域中的 this。
这意味着：你不能靠调用方式改变箭头函数里的 this，也不能用 bind 修复它——它压根不接受。
立即学习“Java免费学习笔记（深入）”；
const obj = {
name: 'Alice',
regular() {
console.log(this.name); // 'Alice'
setTimeout(function () {
console.log(this.name); // undefined（非严格模式下是 window）
}, 100);
setTimeout(() => {
console.log(this.name); // 'Alice'，继承 regular 的 this
}, 100);
}
};
容易踩坑的典型场景：事件回调和定时器里用错函数类型
当把对象方法传给异步操作（如 setTimeout、addEventListener、Promise.then）时，普通函数会丢失原始 this，而箭头函数能保留——但前提是它定义在正确的上下文中。
- 错误写法：
setTimeout(obj.method, 100)→method被独立调用，this失效 - 正确做法之一：用箭头函数包裹：
setTimeout(() => obj.method(), 100) - 正确做法之二：用
bind绑定：setTimeout(obj.method.bind(obj), 100) - 注意陷阱：如果在类字段中写箭头函数（
handler = () => { ... }），它的this指向类实例，但若该字段被解构后使用（const { handler } = obj; handler()），依然会保持原this，这点和普通方法不同
class 中的箭头函数字段 vs 普通方法，this 表现不同
类中定义普通方法（method() {}）时，this 是动态的；定义箭头函数字段（method = () => {}）时，this 在实例化时就捕获并固化了。
这导致：前者可被重绑定（obj.method.call(other)），后者不可；后者适合做事件处理器，避免手动 bind，但也意味着无法通过 call 注入其他 this 上下文。
class Counter {
count = 0;
// 普通方法：this 动态
increment() {
this.count++;
}
// 箭头字段：this 在 new Counter() 时绑定到实例
decrement = () => {
this.count--;
};
}
真正复杂的地方在于嵌套作用域链和类字段的组合——比如在 React 类组件中混用箭头函数字段和生命周期方法，this 看似稳定，实则依赖构造顺序和初始化时机。稍不注意，就会在异步回调里拿到过期的 this 或未初始化的实例属性。
