JavaScript 对象字面量中简写方法和箭头函数在 `this` 指向上有什么区别-js教程-PHP中文网

简写方法的this动态绑定，调用时决定；箭头函数无this，继承外层作用域。obj.normal()返回'alice'，obj.arrow()返回undefined或window.name。

javascript 对象字面量中简写方法和箭头函数在 `this` 指向上有什么区别

对象字面量中，简写方法（如 method() { }）和箭头函数（如 method: () => { }）在 this 指向上有本质区别：前者遵循普通函数的动态绑定规则，后者完全不绑定 this，而是继承定义时外层作用域的 this 值。

简写方法的 this 是调用时决定的

对象方法简写只是语法糖，等价于 method: function() { }。它的 this 在运行时由谁调用决定：

直接通过对象调用：obj.method() → this 指向 obj
赋值后单独调用：const fn = obj.method; fn() → this 丢失（严格模式下为 undefined）
作为回调传入微任务或事件监听器：setTimeout(obj.method, 100) 或 btn.addEventListener('click', obj.handleClick) → 同样会丢失 this

箭头函数的 this 是定义时就固定的

箭头函数没有自己的 this，它会沿作用域链向上查找最近一个普通函数的 this 值，并始终使用那个值：

js2java

JavaScript 到 Java 全栈翻译助手，专为前端开发者学习 Java 或快速实现后端业务逻辑而设计。当用户提到以下场景时必须使用此技能： - "帮我把这段 JS 代码转成 Java" - "用 Java 怎么写这个逻辑" - "我习惯用 JS 写，想翻译成 Java" - "教我 Java，我要写后端接...

下载

如果写在全局作用域：this 指向 window（非严格）或 undefined（严格）
如果写在某个普通函数内部：this 继承该函数的 this
如果写在对象字面量顶层（如 { fn: () => this.xxx }）：this 不指向该对象，而是外层上下文（通常是模块顶层或全局）

常见误用场景对比

下面代码能清晰体现差异：

const obj = {
  name: 'Alice',
  normal() { return this.name; },        // 简写方法
  arrow: () => this.name                 // 箭头函数
};

obj.normal(); // 'Alice'
obj.arrow();  // undefined（严格模式）或 window.name（非严格）

// 传给 setTimeout
setTimeout(obj.normal, 100); // undefined —— this 丢失
setTimeout(obj.arrow, 100);  // 同样是 undefined / window.name —— 但原因不同：不是丢失，而是从没绑定过 obj