登录
深度解析 JS 中的 this 指向：从底层逻辑到实战规则
前言
在 JavaScript 的面试和日常开发中，this 绝对是一个绕不开的“大山”。很多初学者会被它忽左忽右的指向搞得晕头转向。今天我结合自己的学习笔记，把 this 的来龙去脉和绑定规则彻底理清楚。希望对同样在进阶路上的你有所帮助！
一、 为什么我们需要 this？
很多同学会问：既然我可以直接引用对象名，为什么还要用 this？ 核心价值：隐式传递对象引用。 this 提供了一种更优雅的方式来传递引用，使得代码更简洁、易于复用。
function identify() {
return this.name.toUpperCase();
}
var me = { name: "Kyle" };
var you = { name: "Reader" };
identify.call(me); // KYLE
identify.call(you); // READER
如果不使用 this，你就需要显式地将对象作为参数传递，代码会变得冗余且难以维护。
二、 this 到底出现在哪？
在 JavaScript 中，this 主要出现在两个地方：
- 全局环境：在浏览器环境下，this 直接指向 window 对象。
- 函数体内：这是最复杂的地方，this 的指向不是在函数创建时决定的，而是在函数被调用时决定的。
三、 五大绑定规则
掌握了下面这五条规则，你就掌握了 this 的“密码”：
1. 默认绑定
当函数被独立调用（不带任何修饰的函数调用）时，函数中的 this 指向全局对象 window。
function foo() {
console.log(this);
}
foo(); // window
2. 隐式绑定
当函数被一个上下文对象所拥有，并被该对象调用时，this 指向该对象。
var obj = {
a: 2,
foo: function() { console.log(this.a); }
};
obj.foo(); // 2
3. 隐式丢失（就近原则）
这是一个细节：当函数被多层对象嵌套调用时，this 指向离它最近的那个对象。
var obj2 = {
a: 42,
foo: function() { console.log(this.a); }
};
var obj1 = {
a: 2,
obj2: obj2
};
obj1.obj2.foo(); // 42 (指向 obj2)
4. 显式绑定 (Explicit Binding)
显式绑定就像是给函数下达“死命令”，强制它在执行时将 this 指向我们指定的对象。
① call —— 逐个传参的“指挥官”
call 会立即执行函数。它的第一个参数是 this 的指向，后面的参数需要一个一个列出来。
function greet(skill, hobby) {
console.log(`我是${this.name}，我会${skill}，喜欢${hobby}`);
}
const user = { name: "阿强" };
// 语法：fn.call(thisArg, arg1, arg2, ...)
greet.call(user, "JavaScript", "代码");
// 输出：我是阿强，我会JavaScript，喜欢代码
② apply —— 数组传参的“打包员”
apply 的功能和 call 完全一样，唯一的区别是：它接收参数的方式是数组。这在处理动态参数（如获取数组最大值）时非常有用。
const user = { name: "阿珍" };
// 语法：fn.apply(thisArg, [argsArray])
greet.apply(user, ["Python", "看书"]);
// 输出：我是阿珍，我会Python，喜欢看书
③ bind —— 延后执行的“契约书”
bind 不会立即执行函数，而是返回一个绑定了新 this 的新函数。你可以随时在需要的时候调用它。
const user = { name: "老王" };
// 语法：const newFn = fn.bind(thisArg, arg1, ...)
const bindGreet = greet.bind(user, "Vue", "钓鱼");
// 此时不会有输出，直到你手动调用它
bindGreet();
// 输出：我是老王，我会Vue，喜欢钓鱼
💡 快速对比表
为了方便记忆，我总结了一个对比表，大家可以直接保存：
| 方法 | 立即执行 | 传参方式 | 常用场景 |
|---|---|---|---|
| call | 是 | 参数列表 (arg1, arg2) | 对象的属性继承、借用构造函数 |
| apply | 是 | 数组形式 ([args]) | 与 arguments 配合、操作数组 |
| bind | 否 | 参数列表 (arg1, arg2) | React/Vue 中的回调函数绑定、延迟执行 |
面试小贴士： 如果 call/apply/bind 的第一个参数传入了 null 或 undefined，那么在非严格模式下，this 会自动指向全局对象 window。
5. new 绑定
使用 new 关键字调用构造函数时，JS 内部会创建一个新对象，并把构造函数里的 this 绑定到这个新对象上。
function Person(name) {
this.name = name;
}
var me = new Person("Jay");
console.log(me.name); // Jay
四、 特殊存在的箭头函数
箭头函数没有自己的 this！ 这是它和普通函数最大的区别。箭头函数的 this 是在定义时捕获自外层（父级）非箭头函数的作用域。
注意： 箭头函数的 this 一旦确定，就无法通过 call/apply/bind 再次修改。
总结
- 独立调用看 window。
- 对象调用看对象。
- 多层对象看最近。
- call/apply/bind 看第一个参数。
- new 看实例。
- 箭头函数看它亲爹（外层作用域）。
