如何理解使用对象字面量简写语法声明含函数属性的对象？

首先纠正一个错误观点：let foo = { bar () {} };这段代码创建的bar属性不是箭头函数，而是普通的对象方法。接下来针对你的问题逐一解答：

1. { bar: () => {} }与{ bar () {} }是否等价？ #

完全不等价，核心差异体现在以下几点：

• this指向规则不同
  • { bar () {} }是对象方法，调用时this绑定到调用该方法的对象实例：

    const obj = {
      name: 'demo',
      bar() { console.log(this.name) }
    };
    obj.bar(); // 输出 'demo'
    // 把方法单独提取出来调用时，this指向会改变
    const standaloneBar = obj.bar;
    standaloneBar(); // 非严格模式指向全局对象，严格模式下为undefined
    

  • { bar: () => {} }是将箭头函数赋值给对象属性，箭头函数没有独立的this，它的this继承自定义时的词法作用域，永远不会绑定到调用它的对象：

    const obj = {
      name: 'demo',
      bar: () => { console.log(this.name) }
    };
    obj.bar(); // 若在全局作用域定义obj，这里输出全局的name（通常为undefined）
    

• 构造函数能力不同
  • 对象方法可以用new作为构造函数调用，会生成新的实例：

    const obj = { bar() {} };
    const inst = new obj.bar();
    console.log(inst instanceof obj.bar); // true
    

  • 箭头函数不能作为构造函数，用new调用会直接抛出错误：

    const obj = { bar: () => {} };
    new obj.bar(); // TypeError: obj.bar is not a constructor
    

• 其他差异
  • 对象方法支持使用super关键字（当对象是类的实例或继承自其他对象时），箭头函数不支持；
  • 对象方法有自己的arguments对象，箭头函数没有，会沿用外层作用域的arguments。

2. 专属术语与规范参考 #

• { bar () {} }这种写法叫做对象字面量方法定义语法，是ES6（ECMAScript 2015）引入的语法糖；
• 该语法的官方定义可在ECMAScript规范的对象字面量章节中找到，它是{ bar: function() {} }的简写，但在部分细节上（比如作为生成器/异步方法的简写）有扩展能力。

3. 除减少输入外的其他使用理由 #

• 语义更明确：直接表明这是对象的方法，而非普通的函数属性，代码可读性更强；
• 支持便捷定义特殊方法：
  • 生成器方法：只需加*即可，比如{ *bar() {} }，比{ bar: function*() {} }简洁；
  • 异步方法：直接写{ async bar() {} }，比{ bar: async function() {} }更直观；
• 一致性：和类中的方法定义语法保持一致，让代码风格更统一（类中方法也是class Foo { bar() {} }这种写法）。

内容的提问来源于stack exchange，提问作者nwayve