JavaScript中foo() {}和foo: function() {}两种方法声明的差异

这两种写法不是完全等价的语法简写，ES6新增的方法简写语法（第二种写法）除了更简洁外，和第一种普通函数赋值的写法存在3个关键行为差异：

• 不可作为构造函数调用
  方法简写声明的函数没有[[Construct]]内部方法，尝试用new关键字实例化会直接抛出TypeError，而第一种写法的普通函数表达式支持正常的构造函数调用：

  const bar1 = {
    foo: function() { return 0 }
  }
  new bar1.foo() // 正常返回实例对象
  
  const bar2 = {
    foo() { return 0 }
  }
  new bar2.foo() // 抛出错误：Uncaught TypeError: bar2.foo is not a constructor
  

• 支持super关键字访问原型方法
  方法简写会绑定所属对象的[[HomeObject]]内部属性，因此可以通过super直接访问原型链上的方法，普通函数赋值的写法没有绑定该属性，使用super会直接报语法错误：

  const parent = {
    foo() { return 1 }
  }
  
  const bar1 = {
    foo: function() { return super.foo() }
  }
  Object.setPrototypeOf(bar1, parent)
  bar1.foo() // 抛出语法错误：Uncaught SyntaxError: 'super' keyword unexpected here
  
  const bar2 = {
    foo() { return super.foo() }
  }
  Object.setPrototypeOf(bar2, parent)
  bar2.foo() // 正常返回1
  

• 原生支持特殊方法声明
  方法简写语法可以直接声明生成器方法、异步方法、异步生成器方法，不需要额外加function关键字：

  const bar = {
    // 生成器方法
    *gen() { yield 1 },
    // 异步方法
    async asyncFunc() { return Promise.resolve(2) },
    // 异步生成器方法
    async *asyncGen() { yield 3 }
  }
  

如果你的使用场景不涉及构造函数调用、super访问这两类情况，两种写法的运行效果完全一致，可以互相替换。

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