17370845950

this在函数调用时确定，取决于调用方式而非定义位置；普通调用指向全局对象或undefined，对象方法调用指向点号左侧对象，箭头函数继承外层this，call/apply/bind/new可显式绑定。

this 不是定义时绑定的，而是在函数被调用时才确定指向——它完全取决于「谁调用了这个函数」，而不是函数写在哪、怎么声明的。

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

这是最容易踩坑的地方：单独写 foo()，不管它在对象里定义还是嵌套多深，只要不是通过对象属性方式调用，this 就不绑定到那个对象。

• 浏览器中非严格模式下，this 指向 window
• 严格模式下，this 是 undefined，访问 this.xxx 会直接报错
• Node.js 环境下，全局对象是 global，但模块顶层的 this 实际指向当前 module.exports，不是 global

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

对象方法调用时，this 指向该对象（隐式绑定）

关键看调用时的「点号左边是谁」。只要形如 obj.method()，this 就是 obj。

• 只认最后一次点调用：如果 const fn = obj.method; fn()，就丢失绑定，退回到上一条规则
• 嵌套对象也一样：obj.inner.method() 中 this 是 obj.inner，不是 obj
• 箭头函数没有自己的 this，它沿用外层函数作用域的 this 值（不是调用时决定的）

const user = {
  name: 'Alice',
  getName() {
    return this.name;
  }
};
user.getName(); // 'Alice' —— this 指向 user
const fn = user.getName;
fn(); // undefined（严格模式）或 window.name（非严格）—— this 已丢失

call / apply / bind 和 new 调用强制改变 this 指向

这四种方式属于「显式绑定」或「构造调用」，优先级高于隐式绑定。

• func.call(obj, ...args) 和 func.apply(obj, argsArray) 立即执行，this 设为 obj
• func.bind(obj) 返回新函数，永久绑定 this 为 obj（后续再 call/apply 也无法覆盖）
• new Func() 时，this 指向新创建的实例对象，且函数体内返回值会被忽略（除非返回显式的非空对象）
• 注意：箭头函数不能用 new，也不能用 call/apply/bind 改变 this（它们无效）

function greet() {
  return `Hello, ${this.name}`;
}
const person = { name: 'Bob' };
greet.call(person); // 'Hello, Bob'
const bound = greet.bind({ name: 'Carol' });
bound(); // 'Hello, Carol'

事件监听器和回调中 this 经常意外丢失

DOM 事件处理函数默认把 this 绑定到触发事件的元素，但一旦你提取出来或传给异步回调，就极易出问题。

• btn.addEventListener('click', obj.handler)：此时 this 是 btn，不是 obj
• 解决方法：用 obj.handler.bind(obj)、() => obj.handler()、或定义时用箭头函数（如果 handler 本身不需要动态 this）
• Promise 回调、setTimeout 内部的普通函数，this 都按第一条规则走，和外层无关

const button = document.getElementById('btn');
const ui = {
  message: 'clicked!',
  handleClick() {
    console.log(this.message); // 想打印 'clicked!'，但实际是 undefined
  }
};
// 错误写法：
button.addEventListener('click', ui.handleClick); // this 是 button
// 正确写法之一：
button.addEventListener('click', ui.handleClick.bind(ui));

真正难的不是记规则，而是意识到「this 的值永远由调用方式决定」——哪怕函数被赋值、传参、包在 setTimeout 里，只要没用 call/bind/new/箭头函数干预，它就按那几条原始规则跑。多数 bug 来自想当然地认为「函数在哪定义，this 就指向哪」。