javascript箭头函数中的this是什么_它为什么没有自己的this？

箭头函数的 this 指向外层作用域的 this，它不绑定自身 this，而是在定义时固化外层函数的 this 值；普通函数则每次调用时根据调用方式动态绑定 this。

箭头函数的 this 指向外层作用域的 this

箭头函数不绑定自己的 this，它直接沿用定义时所在词法作用域的 this 值。这不是运行时动态查找，而是在函数创建时就确定了绑定关系——也就是说，this 的值在箭头函数被声明的那一刻就“固化”了。

这和普通函数形成鲜明对比：function 声明的函数每次调用时会根据调用方式（如 obj.method()、fn.call(obj)、独立调用）重新绑定 this；而箭头函数完全跳过这一步。

为什么箭头函数没有自己的 this？

这是语言设计上的有意取舍，核心目标是解决回调中常见的 this 丢失问题。早期写法常需手动绑定：setTimeout(function() { this.doSomething(); }.bind(this), 100)，或者用变量暂存：const self = this;。箭头函数让这种场景更简洁自然。

背后机制是：ECMAScript 规范明确要求箭头函数不具有 [[ThisBindingStatus]] 内部状态，也不参与 this 绑定过程。它的 this 查找方式等同于普通变量 —— 向外层函数作用域逐级搜索 this 绑定。

常见错误现象与使用场景

最容易踩坑的是在对象方法中误用箭头函数：

const obj = {
  name: 'Alice',
  regular() {
    console.log(this.name); // 'Alice'
  },
  arrow: () => {
    console.log(this.name); // undefined（this 指向全局或 undefined（严格模式））
  }
};
obj.regular(); // 正常
obj.arrow();   // 不按预期工作

• 在事件监听器、setTimeout、Promise.then 等异步回调中用箭头函数，通常能避免 this 丢失
• 但绝不能在需要动态 this 的地方用它，比如 Vue/React 类组件的方法、jQuery 插件回调（依赖 this 指向 DOM 元素）
• 箭头函数也不能用 call/apply/bind 强制改变 this，这些方法对它完全无效

this 的实际表现取决于定义位置，而非调用位置

关键要盯住「定义时的外层函数」的 this 是什么。例如：

function makeHandler() {
  return () => {
    console.log(this.value);
  };
}
const obj = { value: 42 };
const handler = makeHandler.call(obj); // 这里绑定了外层 this
handler(); // 输出 42

上面例子中，handler 是箭头函数，但它捕获的是 makeHandler 被调用时的 this（即 obj），不是 handler() 被调用时的上下文。

如果外层函数本身也没绑定 this（比如顶层箭头函数嵌套在全局箭头函数里），那最终可能落到全局对象或 undefined，这点很容易被忽略。