JavaScript中this指向详解及场景变化分析

JavaScript 中的 this 指向看似多变，实则严格遵循“调用方式决定 this”的核心原则：普通函数独立调用时指向全局或 undefined（取决于严格模式），箭头函数不绑定 this 而继承外层作用域，对象方法中 this 由“点号左侧的调用者”决定，构造函数和 class 实例方法中 this 指向新创建的对象，而 call/apply/bind 则提供显式、灵活的 this 控制能力；真正引发 bug 的往往不是规则本身，而是方法被赋值、解构或作为回调传递后调用关系断裂导致的上下文丢失——掌握这一动态本质，才能彻底摆脱 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 改变（除非原函数是箭头函数，但它根本不受影响）

this 的复杂性不在规则多，而在于它完全由「函数如何被调用」决定，和函数定义位置、是否在对象里、甚至是否在 class 中都无直接关系。最常出问题的是把方法赋值给变量或传入回调——那一刻，调用关系就断了。

终于介绍完啦！小伙伴们，这篇关于《JavaScript中this指向详解及场景变化分析》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！