普通函数调用时this指向全局对象或undefined；箭头函数不绑定this，继承外层作用域；对象方法中this指向调用者；构造函数中this指向新实例；call/apply/bind可显式控制this。

普通函数调用时 this 指向全局对象或 undefined

在非严格模式下，this 指向 window（浏览器）或 globalThis（Node.js）；严格模式下是 undefined。这是最容易误判的起点。

• 直接写 function foo() { console.log(this); }，然后调用 foo()，结果取决于是否开启严格模式
• 箭头函数不绑定 this，它继承外层作用域的 this 值，和调用方式无关
• 避免依赖全局 this，尤其在模块化环境（如 ES Module）中，默认就是严格模式

对象方法中 this 指向调用它的那个对象

关键看「点号左边是谁」——也就是谁「拥有并调用了这个函数」。

const obj = {
  name: 'Alice',
  sayName() {
    console.log(this.name); // 'Alice'
  }
};
obj.sayName(); // this 指向 obj

• const fn = obj.sayName; fn(); 此时 this 不再是 obj，而是全局或 undefined（严格模式）
• 想固定绑定，可用 fn.bind(obj)、obj.sayName.bind(obj)，或改用箭头函数包裹（但注意箭头函数不能作为构造函数）
• Vue/React 组件方法常需手动绑定 this，否则事件回调里会丢失上下文

构造函数和 class 中 this 指向新创建的实例

用 new 调用函数时，this 被自动绑定为即将返回的新对象。

function Person(name) {
  this.name = name; // this 指向 new 出来的实例
}
const p = new Person('Bob');

• class 的 constructor 和普通方法内部的 this 也指向实例，但前提是方法被实例调用（p.method()），不是被解构后调用
• class 字段初始化中的箭头函数可安全捕获 this，比如 handler = () => { console.log(this.name); }
• 如果在 class 中定义普通函数方法却没绑定，传给事件监听器仍会丢失 this

call/apply/bind 显式控制 this 指向

这三个方法本质都是「临时替换函数执行时的 this」，区别只在参数传递形式。

• fn.call(obj, arg1, arg2)：立即执行，参数逐个传
• fn.apply(obj, [arg1, arg2])：立即执行，参数用数组传
• const bound = fn.bind(obj, arg1)：返回新函数，this 和部分参数已预设
• 注意：bind 两次不会覆盖，第一次绑定的 this 无法被后续 call 改变（除非原函数是箭头函数，但它根本不受影响）