箭头函数在对象字面量中定义，this 指向怎么确定？-js教程-PHP中文网

箭头函数的this继承外层词法作用域的this，不绑定对象字面量本身；在对象中直接定义时，this指向全局或外层函数的this，而非该对象。

箭头函数在对象字面量中定义，this 指向怎么确定？

箭头函数本身没有自己的 this，它会沿作用域链向上查找，继承外层普通函数（或全局）的 this 值。在对象字面量中直接用箭头函数定义方法时，this 不指向该对象，而是指向定义时所在上下文的 this —— 通常是全局对象（浏览器中是 window，严格模式下是 undefined），或外层函数的 this。

对象字面量中箭头函数的 this 不绑定对象

对象字面量只是创建一个普通对象，不构成函数执行上下文，也不会改变内部箭头函数的词法作用域。箭头函数的 this 在定义时就已确定，和对象是否“拥有”它无关。

例如：

奇布塔

一款面向有声绘本创作的AI工具，帮助用户围绕故事内容制作绘本和声音表现，降低儿童故事内容制作门槛。

下载

const obj = {
  name: 'Alice',
  regular() {
    return this.name; // 'Alice'
  },
  arrow: () => {
    return this.name; // undefined（严格模式）或 window.name（非严格）
  }
};
obj.regular(); // 'Alice'
obj.arrow();   // undefined

常见误解：以为“写在对象里”就绑定对象

很多人误以为只要箭头函数写在对象字面量内部，this 就会自动指向该对象。这是错的——对象字面量不是执行环境，不提供新的 this 绑定。箭头函数的 this 只取决于它**声明时所处的词法环境**。

如果箭头函数在全局作用域定义 → this 是全局对象（或 undefined）
如果在某个函数内部定义 → this 继承该函数的 this
即使写在对象字面量里，只要没被包裹在普通函数中，就不会获得对象的 this

想让方法访问对象自身？用普通函数或显式绑定

需要访问对象属性时，应避免在对象字面量顶层直接使用箭头函数作为方法。可行方案包括：

用传统函数表达式：method() { return this.name; }
在构造函数或工厂函数中定义箭头函数（此时外层 this 已绑定目标对象）
用 bind、call 或箭头函数包裹普通函数调用（不推荐，绕远）

// ✅ 推荐：普通方法
const obj = {
  name: 'Bob',
  getName() { return this.name; }
};

// ✅ 外层有 this 绑定时可用箭头函数
function createObj(name) {
  return {
    name,
    getName: () => this.name // 这里的 this 是 createObj 调用时的 this
  };
}