17370845950

普通函数直接调用时this指向全局对象（非严格模式）或undefined（严格模式）；箭头函数不绑定this，继承外层作用域；obj.method()中this指向obj，但赋值后单独调用则失效；call/apply/bind可显式绑定this；构造函数和类普通方法中this指向实例。

普通函数调用时的 this 指向全局对象（非严格模式）或 undefined（严格模式）

这是最容易踩坑的场景。直接写 foo() 调用函数，this 不指向调用者，也不指向函数自身，而是由执行上下文决定：

• 浏览器中非严格模式下，this 是 window
• 严格模式下，this 是 undefined（Node.js 同理，全局是 globalThis，但严格模式仍为 undefined）
• 箭头函数不绑定 this，它继承外层作用域的 this 值，和调用方式无关

function test() {
  console.log(this);
}
test(); // 非严格模式 → window；严格模式 → undefined

const arrow = () => console.log(this);
arrow(); // 继承外层 this，不是调用时的 this

obj.method() 调用时 this 指向 obj，但赋值后立即失效

看起来直观，但一旦把方法提取出来单独调用，this 就断了。这不是“丢失”，而是调用形式变了：

• obj.fn() → this 是 obj
• const f = obj.fn; f() → 回到上一条规则，变成普通调用
• setTimeout(obj.fn, 100)、button.addEventListener('click', obj.handleClick) 同理，本质都是把函数取出来再调用

const obj = {
  name: 'alice',
  say() { console.log(this.name); }
};
obj.say(); // 'alice'
const s = obj.say;
s(); // undefined（严格模式）或 window.name（非严格）

用 call、apply、bind 显式控制 this

这三个 API 是唯一能强行指定 this 的方式，优先级高于隐式绑定（即 obj.fn() 这种）：

• fn.call(obj, a, b) 立即执行，this 绑定为 obj
• fn.apply(obj, [a, b]) 参数以数组传入
• const bound = fn.bind(obj) 返回新函数，this 永远锁定为 obj（即使再 call 也无法覆盖）
• 注意：bind 两次不会叠加，第二次无效；箭头函数不能被 call/apply/bind 改变 this

function log(x) { console.log(this.id, x); }
const ctx = { id: 'demo' };
log.call(ctx, 'hello'); // 'demo hello'
const bound = log.bind(ctx);
bound('world'); // 'demo world'

构造函数和类方法中的 this 指向实例对象

使用 new 调用函数或 class 中的普通方法（非箭头），this 指向新创建的实例：

• new Foo() 内部会创建空对象，并将 this 指向它，再执行构造逻辑
• 类中定义的 method() {} 是原型方法，通过实例调用时 this 是该实例
• 但类中定义的 arrowMethod = () => {} 是实例属性（箭头函数），this 在定义时就固定为当前实例，适合传给事件回调等场景

class Person {
  constructor(name) {
    this.name = name;
  }
  greet() { return `Hi, ${this.name}`; }
  greetArrow = () => `Hi, ${this.name}`;
}
const p = new Person('bob');
p.greet(); // 'Hi, bob'
p.greetArrow(); // 'Hi, bob'

真正容易忽略的是：**this 的值只在函数被调用的那一瞬间确定，且完全取决于调用语法，而非定义位置或上下文嵌套深度**。哪怕一个函数嵌套在十层箭头函数里，只要它是普通函数并以 obj.fn() 形式调用，this 就是 obj；反之，哪怕它写在类方法内部，一旦被解构出来单独调用，this 就立刻失效。