对象字面量中两种方法定义的区别及适用场景解析

先看给出的代码示例：

const obj = {
  val: 7,

  prop: function() {
    alert("prop " + this.val);
  },

  met() {
    alert("met " + this.val);
  }
};

obj.prop();
obj.met();

1. met是什么？ #

met是ES6新增的对象方法简写语法定义的对象方法，本质上它也是obj的一个属性，属性值是函数，和prop一样属于对象的方法，只是写法更简洁。

2. 它与prop有何区别？ #

两者核心都是存储函数的对象属性，但存在以下几点关键区别：

• 语法形式：met()是ES6引入的简写，省略了function关键字和冒号；prop: function()是ES5及之前的传统函数表达式赋值写法。
• 构造函数能力：简写语法定义的met不能当作构造函数使用（调用new obj.met()会报错）；而prop对应的函数表达式可以被new实例化对象。
• 原型与super：简写方法没有自己的prototype属性，且内部可正常用super访问原型链上的方法；传统函数表达式赋值的方法无法直接使用super，且拥有prototype属性。
• IDE语义识别：VS的IntelliSense把简写的met标注为“方法”，因为这种写法明确传递了“对象成员方法”的语义；prop因是函数表达式赋值，被识别为普通“属性”（尽管它的值是函数）。

3. 何时使用prop语法，何时使用met语法？ #

• 使用met()简写语法：
  • 定义对象的常规实例方法，不需要将其作为构造函数使用时；
  • 追求简洁代码风格，同时希望明确表达“对象方法”语义时；
  • 运行环境支持ES6及以上版本时。
• 使用prop: function()语法：
  • 需要将函数作为构造函数new实例化时；
  • 需要给函数命名（比如prop: function myNamedFunc()，方便调试识别）时；
  • 要兼容ES5及更低版本环境时；
  • 动态赋值函数的场景（比如根据条件给prop赋值不同函数）时。

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