JavaScript中this指向详解

哈喽！今天心血来潮给大家带来了《JavaScript中this的指向解析【教程】》，想必大家应该对文章都不陌生吧，那么阅读本文就都不会很困难，以下内容主要涉及到，若是你正在学习文章，千万别错过这篇文章~希望能帮助到你！

JavaScript中this由函数调用时的上下文决定，谁调用就指向谁；普通调用时非严格模式指向全局对象、严格模式为undefined；对象方法调用时指向该对象；call/apply/bind可显式绑定；new调用时指向新实例；箭头函数无this，继承外层。

JavaScript 中的 this 不是由函数定义时决定的，而是由**函数调用时的上下文**决定的——换句话说，谁调用它，this 就指向谁（除非被显式绑定或处于特殊模式）。

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

在非严格模式下，直接调用函数（如 foo()），this 指向全局对象（浏览器中是 window）；严格模式下则为 undefined。

常见错误现象：在回调、定时器或事件处理中丢失 this，比如：

const obj = {
  name: 'Alice',
  say() { console.log(this.name); }
};
setTimeout(obj.say, 100); // 输出 undefined（严格模式）或 window.name

原因：这里 obj.say 被取出来单独调用，等价于 const fn = obj.say; fn();，调用者不再是 obj。

• 解决方法：用箭头函数包装、bind(obj)、或改写为 setTimeout(() => obj.say(), 100)
• 注意：箭头函数没有自己的 this，它继承外层作用域的 this 值

对象方法调用时 this 指向调用者

当函数作为对象属性被调用（即 obj.method() 形式），this 指向该对象。

但要注意「赋值即脱钩」：

const obj = { x: 42, f() { return this.x; } };
const ref = obj.f;
ref(); // this 是全局或 undefined，不是 obj

• 只有「点号左侧的对象」才影响 this，括号前的表达式决定了调用者
• (obj.f)() 和 obj.f() 行为一致；但 (obj.f = obj.f)() 或 (0, obj.f)() 会丢失绑定

call/apply/bind 显式控制 this

这三个方法允许你手动指定函数执行时的 this 值。

• fn.call(obj, arg1, arg2)：立即执行，参数逐个传入
• fn.apply(obj, [arg1, arg2])：立即执行，参数以数组形式传入
• fn.bind(obj, arg1)：返回一个新函数，this 永久绑定为 obj，后续调用不再改变

注意：bind 绑定不可逆，即使再对返回函数调用 call 也无法覆盖原始绑定（除非用 new 调用）。

构造函数和 new 调用时的 this 指向新实例

使用 new Foo() 调用函数时，this 指向新创建的空对象，并且该对象隐式继承 Foo.prototype。

关键细节：

• 如果构造函数显式返回一个对象，则 this 实例被丢弃，返回该对象；返回原始值（如 return 42）则忽略，仍返回新实例
• 箭头函数不能用作构造函数，调用 new 会报 TypeError: xxx is not a constructor
• ES6 类的 constructor 内部 this 也遵循同样规则

真正容易被忽略的是「调用位置」的隐蔽性：比如事件监听器中的 this 是触发元素，但 Promise 回调里的 this 取决于外层；嵌套函数、解构赋值、高阶函数都可能悄悄改变调用方式。别依赖“看起来像对象方法”，盯住括号前的那个表达式是谁。

到这里，我们也就讲完了《JavaScript中this指向详解》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！