Great question! Let’s break down the two common ways to define functions in object literals—method syntax (fn() {}) and function expression assignment (fn: function() {})—and clear up the differences, performance implications, and underlying mechanics.

首先明确两种写法的示例 #

• 方法语法（ES6+）：

  const user = {
    sayHello() {
      console.log(`Hello, I'm ${this.name}`);
    },
    name: "Alice"
  };
  

• 函数表达式赋值（ES5及更早）：

  const user = {
    sayHello: function() {
      console.log(`Hello, I'm ${this.name}`);
    },
    name: "Alice"
  };
  

核心差异与底层细节 #

1. 语法与特性差异 #

• super关键字支持：这是最关键的区别。方法语法定义的函数可以使用super来访问原型链上的方法，而普通函数表达式不行。比如在原型继承场景中：

  const parent = {
    greet() { return "Hi from parent"; }
  };
  // 方法语法可以用super
  const child = {
    __proto__: parent,
    greet() { return `${super.greet()} — and child!`; }
  };
  console.log(child.greet()); // 输出 "Hi from parent — and child!"
  
  // 普通函数表达式无法使用super
  const child2 = {
    __proto__: parent,
    greet: function() { return `${super.greet()} — and child!`; }
  };
  // 运行时会报错：Uncaught SyntaxError: 'super' keyword unexpected here
  

  原因是方法语法会让函数绑定到对象的原型链上下文，拥有[[HomeObject]]内部属性，而普通函数没有这个绑定。

• 构造函数能力：方法语法定义的函数不能作为构造函数使用（调用new user.sayHello()会抛出TypeError: user.sayHello is not a constructor），而普通函数表达式可以。这是因为方法缺少[[Construct]]内部方法，而普通函数具备。

2. 性能表现 #

现代JavaScript引擎（比如V8在Chrome/Node.js、SpiderMonkey在Firefox）对这两种写法的优化几乎完全一致。在日常开发中，你不会察觉到任何可感知的性能差异。

引擎在解析后会将它们处理为功能相近的函数对象，只有在极端的、百万级调用的性能测试中才可能出现微乎其微的差别——但这种场景在实际业务代码中几乎不会遇到。

3. 底层机制的一致性 #

除了上面提到的super支持和构造函数能力外，两者的底层机制基本相同：

• 两者都是函数对象，this的绑定规则一致（调用时基于上下文动态绑定）。
• 都可以访问对象的其他属性，也可以被重新赋值（比如user.sayHello = function() { ... }）。

总结建议 #

• 如果只是定义普通的对象方法，两种写法在功能和性能上几乎等价，选哪个主要看代码风格偏好（方法语法更简洁，是现代JS的推荐写法）。
• 如果需要用到super（比如在原型继承的对象中），或者想避免函数被当作构造函数调用，优先使用方法语法。
• 如果需要兼容ES5及更早的环境，只能用函数表达式赋值。

内容的提问来源于stack exchange，提问作者Willem van der Veen