JavaScript中的this指向如何确定_箭头函数改变了什么_技术教程

普通函数的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 修复它——它压根不接受。

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 或未初始化的实例属性。