JavaScriptthis四大绑定规则全解析

从现在开始，我们要努力学习啦！今天我给大家带来《JavaScript this指向四大绑定规则详解》，感兴趣的朋友请继续看下去吧！下文中的内容我们主要会涉及到等等知识点，如果在阅读本文过程中有遇到不清楚的地方，欢迎留言呀！我们一起讨论，一起学习！

JavaScript中this的指向取决于调用方式，分四类：默认绑定（独立调用，非严格模式指向window，严格模式为undefined）、隐式绑定（obj.method()，this指向直接调用对象）、显式绑定（call/apply/bind指定）、new绑定（优先级最高，指向新实例）。

JavaScript 中 this 的指向不是看函数怎么定义的，而是看它**怎么被调用的**。只要掌握四类调用场景下的绑定优先级，就不再需要死记“谁调用指向谁”这种模糊说法。

默认绑定：独立调用时的 this

函数以普通方式执行（非对象方法、非 call/apply/bind、非箭头函数内），this 指向全局对象（浏览器中是 window，严格模式下为 undefined）。

• 常见错误现象：setTimeout(obj.method, 100) 或 const fn = obj.method; fn(); 导致 this 丢失
• 严格模式下触发 TypeError: Cannot read property 'xxx' of undefined，比非严格模式更早暴露问题
• Node.js 环境中默认绑定指向 globalThis，而非 window

function foo() {
  console.log(this);
}
foo(); // 非严格模式 → window；严格模式 → undefined

隐式绑定：对象方法调用时的 this

当函数作为对象属性被调用（即 obj.method() 形式），this 绑定到该**直接调用者对象**，但仅限一层。

• 嵌套对象中：obj.inner.method() 的 this 指向 inner，不是 obj
• 赋值后调用会退化为默认绑定：const bar = obj.method; bar(); → this 不再是 obj
• 回调中容易忽略：如 button.addEventListener('click', obj.handleClick)，点击时 this 是 button 元素，不是 obj

const obj = {
  name: 'Alice',
  greet() {
    console.log(`Hello, ${this.name}`);
  }
};
obj.greet(); // Hello, Alice — this 指向 obj
const sayHi = obj.greet;
sayHi(); // Hello, undefined — this 指向全局或 undefined

显式绑定：用 call、apply、bind 强制指定 this

这三个方法都允许传入第一个参数作为函数运行时的 this 值。区别在于参数传递方式和是否立即执行：

• func.call(obj, a, b)：立即执行，参数逐个传入
• func.apply(obj, [a, b])：立即执行，参数以数组形式传入
• func.bind(obj, a, b)：返回新函数，this 被永久绑定为 obj，后续调用无法覆盖（硬绑定）
• 注意：bind 返回的函数若再被 new 调用，this 会被重置为新实例，硬绑定失效

function introduce(age) {
  console.log(`I'm ${this.name}, ${age} years old`);
}
const person = { name: 'Bob' };
introduce.call(person, 30); // I'm Bob, 30 years old
const bound = introduce.bind(person, 25);
bound(); // I'm Bob, 25 years old

new 绑定：构造函数调用时的 this

使用 new 调用函数时，会创建一个新对象，并将 this 绑定到该对象，同时该对象原型指向构造函数的 prototype。

• 优先级最高：new 绑定 > 显式绑定 > 隐式绑定 > 默认绑定
• 箭头函数没有自己的 this，也不可被 new 调用，否则报错 TypeError: Arrow functions are not constructors
• 如果构造函数显式返回对象，则 this 绑定结果被忽略，返回该对象；返回原始值则忽略，仍返回新实例

function Person(name) {
  this.name = name;
}
const p = new Person('Charlie');
console.log(p.name); // Charlie — this 指向新创建的 p 实例

真正容易出错的地方不在规则本身，而在于「调用链断裂」——比如把方法从对象上取出来、传给事件系统或定时器、在 Promise 回调里使用。这时候显式绑定（.bind）、箭头函数（继承外层 this）、或解构时用对象字面量包装（{ method: obj.method }）才是实际解法。不要依赖“应该指向谁”，只相信“此刻是谁在调用”。

理论要掌握，实操不能落！以上关于《JavaScriptthis四大绑定规则全解析》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！