JavaScript 中箭头函数与普通函数混用时的 this 追踪

箭头函数不绑定自己的this，其this值继承自外层第一个普通函数（或全局）的作用域，且定义时即确定、不可更改；普通函数的this则由调用方式动态决定。

箭头函数不绑定自己的 this，它会沿作用域链向上查找外层普通函数的 this 值；而普通函数的 this 由调用方式决定。混合使用时，this 的归属容易混淆，关键在于识别“谁创建了箭头函数”以及“普通函数的 this 在何处被绑定”。

箭头函数的 this 永远继承自外层普通函数的作用域

箭头函数没有独立的执行上下文，它的 this 在定义时就确定了，等于外层第一个普通函数（或全局）的 this 值，之后不会改变。

例如：

const obj = { name: 'Alice', regular() { console.log(this.name); // 'Alice' const arrow = () => console.log(this.name); // 继承 regular 的 this arrow(); // 'Alice' } }; obj.regular();

普通函数的 this 取决于调用位置，箭头函数无法改变它

即使把箭头函数作为参数传给另一个普通函数，只要它是在某个普通函数内部定义的，它的 this 仍锁定在那个外层函数的 this 上，不会随新调用环境变化。

立即学习“Java免费学习笔记（深入）”；

常见陷阱：

• 将箭头函数赋值给对象属性后直接调用：obj.fn = () => console.log(this) → 此时 this 是定义时所在上下文（通常是全局或模块顶层），不是 obj
• 用 call/apply/bind 调用箭头函数：无效，因为箭头函数忽略显式绑定
• 在事件监听器中混用：btn.addEventListener('click', () => this.handleClick()) 安全；但若写成 btn.addEventListener('click', this.handleClick)（且 handleClick 是普通函数），则 this 指向 btn，需提前绑定

嵌套多层时，this 向上穿透直到遇到第一个普通函数

箭头函数会跳过所有中间的箭头函数，一直找到最近的非箭头函数作用域来继承 this。

示例：

const outer = function() { this.id = 100; const innerArrow = () => { const deepArrow = () => console.log(this.id); deepArrow(); // 100 —— this 来自 outer }; innerArrow(); }; outer.call({ id: 100 });

需要动态 this 时，必须用普通函数；需要稳定 this 时，优先用箭头函数

实用建议：

• 对象方法、原型方法、回调需访问实例属性 → 用普通函数，并注意绑定（如构造函数中 this.fn = this.fn.bind(this)，或 class 字段语法 fn = () => {}）
• 数组遍历、定时器、Promise 回调中访问外围实例 → 用箭头函数，避免手动绑定
• 不确定 this 来源时，可在外层普通函数开头加 console.log(this)，再在其内部定义箭头函数并打印，验证继承关系