JavaScript中this由调用方式决定，按优先级依次为new绑定、显式绑定、隐式绑定、默认绑定；箭头函数继承外层this且不可修改，常用于回调场景。

JavaScript 中的 this 不是指向函数本身，也不是固定指向某个对象，而是由函数如何被调用决定的。理解 this 的绑定规则，比死记“谁调用就指向谁”更可靠。

四种 this 绑定规则，按优先级从高到低

JavaScript 引擎在执行函数时，会按以下顺序确定 this 值：

• new 绑定：用 new 调用构造函数时，this 指向新创建的对象
• 显式绑定：通过 call、apply、bind 明确指定 this，优先级高于隐式绑定
• 隐式绑定：函数作为对象的方法被调用（如 obj.method()），this 指向该对象
• 默认绑定：独立调用函数（如 foo()），非严格模式下 this 指向全局对象（浏览器中是 window），严格模式下为 undefined

箭头函数没有自己的 this

箭头函数不遵循上述四条规则，它继承外层普通函数作用域中的 this 值，且无法通过 call/apply/bind 改变。适合用于需要保持上下文的回调场景：

const obj = {
  name: 'Alice',
  regular() {
    console.log(this.name); // 'Alice'
    setTimeout(() => {
      console.log(this.name); // 'Alice' —— 继承 regular 的 this
    }, 100);
  },
  broken() {
    console.log(this.name); // 'Alice'
    setTimeout(function() {
      console.log(this.name); // undefined（严格模式）或 window.name（非严格）
    }, 100);
  }
};

常见失控场景与修复方式

以下情况容易导致 this 意外丢失，需主动干预：

• 事件监听器中：直接传方法引用（btn.addEventListener('click', obj.handleClick)）会丢失 this → 改用箭头函数、bind 或包装函数：() => obj.handleClick()
• 数组方法回调中：如 arr.map(obj.method) → 使用 arr.map(obj.method.bind(obj)) 或 arr.map(item => obj.method(item))
• 解构后调用方法：如 const { method } = obj; method() → this 丢失 → 改为 obj.method() 或提前 bind：const bound = obj.method.bind(obj)

调试和确认 this 的实用技巧

不必靠猜，可主动验证当前 this：

• 在函数开头加 console.log(this) 直观查看
• 使用 debugger 断点，在开发者工具控制台输入 this 查看实时值
• 对关键方法统一用 bind 初始化（如类构造器中：this.handleClick = this.handleClick.bind(this)）
• 现代写法推荐 class 字段语法 + 箭头函数：handleClick = () => { ... }，自动绑定 this