
箭头函数不绑定自己的 `this`,而是继承外层词法作用域的 `this` 值;因此在对象方法中直接定义的箭头函数,其 `this` 指向全局对象(如浏览器中为 `window`),而非该对象本身。
JavaScript 中的 this 绑定规则是理解箭头函数行为的关键。普通函数(如方法、function 声明或表达式)的 this 在调用时动态确定,取决于函数如何被调用(例如 obj.method() 中 this 指向 obj)。而箭头函数没有自己的 this——它完全忽略运行时调用上下文,始终从定义时所在的词法作用域中捕获 this 值。
来看两个典型示例:
示例 1:箭头函数作为对象属性值
const obj = {
perimeter: () => {
console.log(this); // 浏览器中输出: Window {...}
}
};
obj.perimeter();此处箭头函数 perimeter 直接定义在全局作用域(对象字面量内部仍属全局词法环境),因此它捕获的是全局 this(即 window)。即使通过 obj.perimeter() 调用,也无法改变其 this —— 因为箭头函数不响应调用方式。
立即学习“Java免费学习笔记(深入)”;
示例 2:箭头函数嵌套在普通函数内
const obj = {
sing() {
console.log(this); // 输出: { sing: ƒ } → this 指向 obj
const b = () => {
console.log(this); // 输出: { sing: ƒ } → 继承外层函数的 this
};
b();
}
};
obj.sing();sing 是普通方法,调用时 this 正确绑定为 obj;其内部定义的箭头函数 b 则“看到”并继承了 sing 函数体内的 this 值,因此也指向 obj。
✅ 关键总结:
- 箭头函数的 this 是静态的、词法的,由定义位置决定,不可被 call/apply/bind 或调用方式修改;
- 普通函数的 this 是动态的、调用时的,取决于调用者与调用语法;
- 在对象字面量中直接使用箭头函数作为方法,几乎总是错误用法(应改用普通函数或显式绑定);
- 箭头函数适合用于回调(如 array.map(x => x * 2))、事件处理器(需保持外层 this)等场景,但不适用于需要动态 this 的对象方法。
⚠️ 注意:在严格模式下,全局 this 为 undefined(非 window),此时示例 1 将输出 undefined,进一步凸显该行为的风险性。










