17370845950

JavaScript中this指向由函数调用方式决定：普通调用指向全局对象或undefined，对象方法调用指向该对象，构造调用指向新实例，显式绑定指向指定对象；箭头函数无this，继承外层。

JavaScript 中 this 指向谁，完全取决于「函数怎么被调用」

this 不是定义时决定的，也不是由函数本身决定的。它在每次函数执行时才绑定，绑定规则只看调用位置和方式。常见误解是认为 this 指向函数所在对象，但其实只要函数被“脱离上下文”调用，this 就会变。

四种主要调用方式决定 this 值

记住这四类，覆盖 95% 的实际场景：

• 普通函数调用：fn() → 非严格模式下 this 是 window（浏览器）或 globalThis（Node），严格模式下是 undefined
• 对象方法调用：obj.method() → this 是 obj（前提是没被赋值或解构）
• 构造函数调用：new Fn() → this 是新创建的实例对象
• 显式绑定：fn.call(obj, ...)、fn.apply(obj, [...])、fn.bind(obj) → this 强制为传入的 obj

容易踩坑的三种典型场景

这些地方 this 最常“意外丢失”：

• 对象方法赋值给变量后调用：

  const obj = { name: 'a', say() { console.log(this.name) } };
  const fn = obj.say;
  fn(); // this 是 undefined（严格模式），输出 undefined —— 不是 'a'

• 回调函数中直接使用对象方法：

  button.addEventListener('click', obj.say); // 点击时 this 指向 button，不是 obj

  解决：用 obj.say.bind(obj)、() => obj.say() 或 obj.say.bind(obj)
• 箭头函数没有自己的 this：它会沿作用域链向上找外层函数的 this，且无法被 call/apply/bind 改变

ES6 类方法里的 this 为什么有时也出问题？

类中的方法默认不自动绑定 this，尤其在作为事件处理器、定时器回调、或传入高阶函数（如 map、setTimeout）时，本质还是上面的「赋值后调用」问题：

• class C { handleClick() { console.log(this) } }; const c = new C(); setTimeout(c.handleClick, 100) → this 是 undefined（严格模式）
• 修复方式：在 constructor 中绑定 this.handleClick = this.handleClick.bind(this)，或用箭头属性 handleClick = () => { ... }，或调用时写成 setTimeout(() => c.handleClick(), 100)

真正麻烦的不是规则多，而是你得时刻问自己一句：“这个函数此刻是被谁调用的？”——而不是“它写在哪儿”。