javascript this关键字是什么_它的指向如何确定?

JavaScript中this指向的唯一依据是函数调用者:new调用指向新实例,call/apply/bind显式绑定指定this,对象方法调用指向点号前对象,独立调用非严格模式指向全局、严格模式为undefined,箭头函数继承外层this。

JavaScript 中 this 指向的唯一判断依据:谁调用,this 就是谁

不是看函数在哪定义,也不是看它长什么样,只看「函数被谁调用」。哪怕同一个函数,不同调用方式下 this 完全不同。比如:

const obj = {
  name: 'Alice',
  say() {
    console.log(this.name);
  }
};
obj.say(); // 'Alice' → this 指向 obj
const fn = obj.say;
fn(); // undefined → this 指向全局(非严格模式)或 undefined(严格模式)

常见调用方式对应的 this

四种基础绑定规则,优先级从高到低:

  • new 调用:构造函数内部 this 指向新创建的实例对象
  • call/apply/bind 显式绑定:传入的第一个参数决定 thisbind 返回函数,需后续调用才生效)
  • 对象方法调用(obj.method()):this 指向点号左边的对象(即 obj
  • 独立函数调用(fn()):非严格模式下指向 window(浏览器)或 globalThis(Node),严格模式下为 undefined

箭头函数不遵循以上规则——它没有自己的 this,而是继承外层普通函数作用域的 this 值。

容易踩坑的典型场景

这些地方的 this 很容易意外丢失:

  • 事件回调中直接传入对象方法:button.addEventListener('click', obj.handleClick) → 点击时 this 不是 obj,而是 button(因为 DOM 事件机制会把 handler 的 this 设为触发元素)
  • 定时器里调用对象方法:setTimeout(obj.method, 100) → 等同于独立调用,this 丢失
  • 解构后调用:const { method } = obj; method(); → 左侧已脱离对象上下文
  • React 类组件中未绑定 this 的事件处理器:类方法默认不自动绑定,thisundefined(严格模式)

修复方式统一:用 bind、箭头函数、或在调用时包装成闭包,例如 setTimeout(() => obj.method(), 100)

如何快速验证当前 this 是什么?

最简单办法是在函数开头加一句:

console.log('this:', this);
但要注意:不能只靠「看起来像对象」就断定 this 正确。真正关键的是「调用链是否维持了上下文」。尤其在嵌套回调、Promise 链、或第三方库(如 Lodash debounce)中,this 极易被重置。别依赖直觉,动手加 console.log 看输出才是最稳的验证方式。