摘要：
你是否在深夜调试时对着"this is undefined"抓狂？是否在面试中被this指向问题难倒？本文将彻底解决你的this困惑！通过4大绑定规则+6种实战场景，结合ES6箭头函数特性，带你从混乱到精通。无论多复杂的this指向，从此一眼看穿！
正文内容
一、this的本质：动态上下文指针
核心特性：
- this的值在函数调用时确定，而非定义时
- 同一个函数在不同调用方式下，this可能完全不同
function showThis() {
console.log(this);
}
const obj = { name: "小明" };
showThis(); // 全局对象（浏览器中为window）
obj.method = showThis;
obj.method(); // {name: "小明", method: ƒ}
常见误解：
// 错误认知：this指向函数自身
function counter() {
this.count = this.count || 0;
this.count++;
}
counter(); counter();
console.log(count); // 全局污染！变为2
二、四大绑定规则详解
规则1：默认绑定（独立函数调用）
- 直接调用函数时
- this指向全局对象（严格模式下为undefined）
function log() {
console.log(this === window); // true（非严格模式）
}
log();
// 严格模式保护
("use strict");
function strictLog() {
console.log(this); // undefined
}
规则2：隐式绑定（方法调用）
- 通过对象调用方法时
- this指向调用对象
const user = {
name: "小明",
greet() {
console.log(`你好, ${this.name}`);
}
};
user.greet(); // 你好, 小明
隐式丢失陷阱：
const greet = user.greet;
greet(); // "你好, "（this指向全局）
规则3：显式绑定（call/apply/bind）
- 强制指定this的值
- call/apply立即执行，bind返回绑定函数
function introduce(lang) {
console.log(`${this.name}使用${lang}编程`);
}
const dev = { name: "小红" };
introduce.call(dev, "JavaScript"); // 小红使用JavaScript编程
introduce.apply(dev, ["Python"]); // 小红使用Python编程
const boundFn = introduce.bind(dev);
boundFn("Java"); // 小红使用Java编程
规则4：new绑定（构造函数调用）
- 使用new调用构造函数时
- this指向新创建的实例
function Person(name) {
this.name = name;
console.log(this);
}
new Person("小刚"); // Person {name: "小刚"}
三、优先级与特殊场景
规则优先级：new绑定 > 显式绑定 > 隐式绑定 > 默认绑定
优先级验证：
function Test() {
console.log(this.msg);
}
const obj1 = { msg: "隐式绑定" };
const obj2 = { msg: "显式绑定" };
// 隐式 vs 显式
obj1.test = Test;
obj1.test.call(obj2); // "显式绑定"（显式绑定优先）
// 显式 vs new
const boundTest = Test.bind({ msg: "显式绑定" });
new boundTest(); // undefined（new绑定覆盖显式绑定）
特殊场景突破：
- DOM事件处理器：
button.addEventListener("click", function() {
console.log(this); // 指向button元素
});
- setTimeout中的this：
const timer = {
start() {
setTimeout(function() {
console.log(this); // 指向window（默认绑定）
}, 100);
}
};
- 箭头函数例外：
const arrowObj = {
value: 42,
getValue: () => console.log(this.value)
};
arrowObj.getValue(); // undefined（继承外层this）
四、ES6箭头函数：this的静态绑定
核心特性：
- 没有自己的this，继承定义时的外层this
- 无法通过call/apply/bind修改this
正确使用场景：
class Timer {
constructor() {
this.seconds = 0;
}
start() {
setInterval(() => {
this.seconds++; // ✅ 正确指向Timer实例
console.log(this.seconds);
}, 1000);
}
}
致命陷阱：
const obj = {
data: [1, 2, 3],
print: () => {
// 箭头函数不适合作为方法
console.log(this.data); // 指向外层（可能是window）
}
};
五、实战解决方案
场景1：多层嵌套对象的方法绑定
const company = {
name: "TechCo",
department: {
name: "Dev",
showName() {
console.log(this.name); // 输出"Dev"
}
}
};
// 需要显示绑定外层this
company.department.showCompany = function() {
console.log(this.name);
}.bind(company);
company.department.showCompany(); // 输出"TechCo"
场景2：回调函数保持this指向
// 方案1：闭包保存this
class Request {
fetchData() {
const self = this;
ajax(url, function() {
self.render();
});
}
}
// 方案2：箭头函数（推荐）
class Request {
fetchData() {
ajax(url, () => {
this.render();
});
}
}
// 方案3：bind绑定
class Request {
fetchData() {
ajax(url, this.render.bind(this));
}
}
场景3：链式调用优化
const calculator = {
value: 1,
add(num) {
this.value += num;
return this; // 返回自身支持链式调用
},
multiply(num) {
this.value *= num;
return this;
}
};
calculator.add(5).multiply(2).value; // 12
结语与行动号召
🎯 现在你已彻底征服JavaScript的this机制！
1️⃣ 点赞支持原创技术干货！
2️⃣ 收藏构建你的JS核心知识库！
3️⃣ 关注获取系列更新通知！
🚀 你的每一次互动，都是我深夜码字的动力源泉！ 🚀
