根本原因是箭头函数不绑定this，而是静态捕获定义时词法作用域的this值；对象字面量不创建新执行上下文，其内箭头函数的this指向全局或undefined，与调用方式无关。

ES6 箭头函数作为对象方法时，this 不指向该对象，根本原因在于：箭头函数没有自己的 this 绑定，它直接继承定义时所在词法作用域的 this 值——而这个作用域往往不是对象本身。

对象字面量中定义箭头函数，this 指向外层作用域

对象字面量本身不创建新的执行上下文，其中的箭头函数是在全局（或模块顶层）作用域中被定义的。此时外层的 this 就是全局对象（浏览器中为 window）或严格模式下的 undefined（ES6 模块默认严格模式）。

例如：

const obj = {
  name: 'Alice',
  greet: () => {
    console.log(this.name); // this 指向全局，非 obj
  }
};
obj.greet(); // 输出 undefined（严格模式）或 window.name（非严格）

普通函数方法 vs 箭头函数方法的本质区别

普通函数的 this 是动态绑定的，取决于调用方式（谁调用，this 就是谁）；而箭头函数的 this 是静态捕获的，只看它写在哪一层作用域里。

Javascript Sdk

用于 inference.sh 的 JavaScript/TypeScript SDK，可运行 AI 应用、构建代理、集成 150+ 模型。包名：@inferencesh/sdk（npm install），完整 TypeScript 支持。

下载

• 普通函数：obj.method() → this 是 obj
• 箭头函数：obj.greet() → this 仍是定义时外层的 this，与调用无关

常见误用场景与修复方式

典型问题出现在事件监听、定时器回调等需要保持对象上下文的地方。比如：

const button = document.querySelector('button');
const handler = {
  message: 'clicked!',
  onClick: () => console.log(this.message) // ❌ this 不是 handler
};
button.addEventListener('click', handler.onClick);

修复方法有两种：

• 改用普通函数：onClick() { console.log(this.message); }
• 在普通函数内定义箭头函数（利用其继承特性）：
  onClick() { const fn = () => console.log(this.message); fn(); }

为什么不能靠 call/apply/bind 强行修改

因为箭头函数忽略所有显式绑定：handler.onClick.call(handler) 或 handler.onClick.bind(handler) 都无效。它的 this 在定义那一刻就固化了，无法运行时覆盖。