VSCode中对象成员显示为property与method的差异原因解析

先看你给出的代码示例：

const obj = {
  name1: function name() {
    console.log('name1')
  },
  name2: function () {
    console.log('name2')
  },
  name3() {
    console.log('name3')
  },
}

VSCode里出现的显示差异，核心是它的智能提示（IntelliSense）依赖TypeScript的静态类型分析引擎，根据语法定义形式来区分对象成员的类型：

• name1、name2被识别为property：这两个都是通过「函数表达式赋值」的方式定义的对象成员，本质是把一个函数类型的值赋值给对象的属性。在TypeScript的静态分析逻辑里，这种写法和给对象赋值字符串、数值属性的逻辑完全一致，所以会被标记为普通属性（property）。

• name3被识别为method：这是ES6新增的「对象方法定义语法」，这种语法在ECMAScript规范里就是专门为对象方法设计的语法糖。TypeScript的分析引擎会直接识别这种语法结构，将其标记为方法（method），以此和赋值式的函数属性做区分。

需要注意的是：这种区分只是静态语法层面的分类显示，运行时这三个成员的本质都是对象的属性，值都是函数，功能上没有任何差异。VSCode这么做是为了让开发者直观区分不同的对象成员定义方式。

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