TypeScript中对象方法的两种声明方式：差异何在？

嘿，这个问题问到点子上了！我先默认你说的A、B是日常开发中最常见的两种对象方法声明写法，先把代码示例摆出来，再逐个拆解差异：

两种写法示例 #

方式A（ES6方法简写） #

const myObj = {
  sayHi() {
    console.log(`Hi, I'm ${this.name}`);
  },
  // 支持Generator函数简写
  *count() {
    let i = 0;
    while (true) yield i++;
  }
};

方式B（传统函数赋值） #

const myObj = {
  sayHi: function() {
    console.log(`Hi, I'm ${this.name}`);
  },
  // Generator函数写法更繁琐
  count: function*() {
    let i = 0;
    while (true) yield i++;
  }
};

核心差异对比 #

1. 语法简洁度与兼容性 #

• 方式A是ES6（ECMAScript 2015）引入的语法糖，写法简洁直观，和类的方法定义风格统一，可读性拉满。但如果项目需要兼容ES5及更早的老环境（比如IE11），这种写法必须经过转译才能运行。
• 方式B是ES3就支持的传统写法，兼容性拉满，不需要转译就能在所有JS环境跑起来，但写法相对冗余，尤其是声明Generator函数时会显得啰嗦。

2. Generator函数支持 #

• 方式A可以直接通过*方法名()的简写来声明Generator函数，非常顺手。
• 方式B必须写成方法名: function*()的形式，语法上不够优雅。

3. 类场景下的额外差异（延伸） #

如果是在类中声明方法，类的默认方法（类似方式A的写法）是不可枚举的；而如果在构造函数里用方式B的写法给实例赋值方法（this.sayHi = function() {}），这个方法是可枚举的。不过这是类的特殊场景，和普通对象字面量的行为略有不同。

4. 相同点（划重点） #

• 两种写法声明的方法，直接调用myObj.sayHi()时，this都指向myObj本身。
• 默认情况下，两种方法都是可枚举的（可以通过for...in遍历，或Object.keys()获取到）。
• 当把方法单独提取出来调用时（比如const func = myObj.sayHi; func()），两种写法的this都会丢失绑定（非严格模式指向全局对象，严格模式下为undefined）。

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