JavaScript 中的 this 是前端开发者最容易踩坑的知识点之一。它不像其他语言那样在编译阶段就确定，而是在运行时根据函数的调用方式动态绑定。理解 this 的关键，在于搞清楚“谁在调用这个函数”。本文将系统梳理六种 this 绑定规则，并深入剖析箭头函数与普通函数在 this 处理上的本质区别。
一、为什么 this 让人困惑？
很多初学者会误以为 this 指向函数自身或函数的作用域。实际上，this 是函数被调用时发生的一个绑定，它的值取决于调用位置（call site），而不是定义位置。正因如此，同一函数用不同方式调用，this 可能完全不同。
二、六种 this 绑定规则
1. 默认绑定（Default Binding）
当函数以独立函数调用的形式执行时，this 指向全局对象（浏览器中为 window，Node.js 中为 global）。在严格模式下，this 为 undefined。
function foo() {
console.log(this); // window（非严格模式）
}
foo();
2. 隐式绑定（Implicit Binding）
当函数作为对象的方法调用时，this 指向调用该方法的对象。
const obj = {
name: 'Alice',
greet() {
console.log(this.name); // Alice
}
};
obj.greet();
需要注意的是，隐式绑定存在“丢失”问题：如果把方法赋值给变量再调用，就会退化为默认绑定。
const fn = obj.greet;
fn(); // undefined（严格模式）或 window.name
3. 显式绑定（Explicit Binding）
通过 call、apply、bind 可以强制指定 this。
function greet() {
console.log(this.name);
}
const user = { name: 'Bob' };
greet.call(user); // Bob
greet.apply(user); // Bob
const bound = greet.bind(user);
bound(); // Bob
call 和 apply 立即执行，区别仅在参数传递方式；bind 返回一个新函数，this 被永久绑定。
4. new 绑定（Constructor Binding）
使用 new 调用构造函数时，会创建一个新对象，并将 this 绑定到该新对象。
function Person(name) {
this.name = name;
}
const p = new Person('Carol');
console.log(p.name); // Carol
5. 箭头函数绑定（Lexical Binding）
箭头函数没有自己的 this，它继承外层作用域的 this。这也是本文重点讨论的内容，稍后详细展开。
6. 事件处理与 DOM 绑定
在 DOM 事件处理中，this 通常指向触发事件的元素（除非使用箭头函数）。
button.addEventListener('click', function() {
console.log(this); // button 元素
});
三、优先级：谁说了算？
当多条规则同时适用时，优先级从高到低为：
- new 绑定
- 显式绑定（call/apply/bind）
- 隐式绑定
- 默认绑定
箭头函数则完全跳过这套规则，直接采用词法作用域的 this。
四、箭头函数的本质区别
箭头函数并非“简写版的普通函数”，它在 this 处理上有本质不同：
- 没有自己的 this：箭头函数内部的
this在定义时就已经确定，等于外层函数的this。 - 无法被 call/apply/bind 改变 this：这些方法对箭头函数的
this无效。 - 不能用作构造函数：箭头函数没有
[[Construct]]，使用new会报错。 - 没有 arguments 对象：需要用 rest 参数替代。
const obj = {
name: 'Dave',
greet: () => {
console.log(this.name); // undefined（外层是全局）
}
};
obj.greet();
上面例子中，greet 是箭头函数，它的 this 来自定义时的外层作用域（全局），而不是 obj。这正是许多 bug 的根源。
五、常见误区与最佳实践
- 不要用箭头函数定义对象方法，除非你明确需要外层
this。 - 回调函数中善用箭头函数，可以避免
this丢失问题。 - 在类的方法中，如果需要将方法作为回调传递，可以用箭头函数绑定实例，或在构造函数中
bind。 - 严格模式下默认绑定为
undefined，能帮助暴露错误。
六、总结
this 的绑定规则可以归纳为：默认绑定、隐式绑定、显式绑定、new 绑定、箭头函数词法绑定、DOM 事件绑定。理解它们的关键在于找到函数的调用位置，并按照优先级判断。箭头函数则通过词法作用域彻底绕开了动态绑定，让 this 更可预测，但也带来了不能作为构造函数、不能改变 this 等限制。掌握这些规则，你就能在复杂代码中准确判断 this 的指向，写出更健壮的 JavaScript。
未经允许不得转载：任鹏个人博客 » this 指向全解析：六种绑定规则与箭头函数的本质区别
