TypeScript与JavaScript中原型信息表现差异的原因探究

核心原因是两种方式给原型添加的方法可枚举性不同：

• 原生ES6 class 语法定义的类方法，会被添加到类的原型对象上，但这些方法的enumerable属性被默认设置为false（不可枚举）。浏览器控制台打印对象时，默认只展示对象的可枚举属性，所以你看到的输出是{}——但实际上hi方法确实存在于原型链上，只是没被控制台显示出来。你可以用Object.getOwnPropertyDescriptor(Object.getPrototypeOf(hello), 'hi')查看，会看到它的enumerable为false。

• TypeScript编译后的代码，是通过常规的对象属性赋值方式（Hello.prototype.hi = function () {}）给原型添加方法，这种方式添加的属性，enumerable默认是true（可枚举）。所以控制台打印原型对象时，会直接显示出这个可枚举的hi方法，输出就是{ hi: [Function (anonymous)] }。

你也可以用Object.keys()验证：原生JS环境下执行Object.keys(Object.getPrototypeOf(hello))会返回空数组，而TS编译后的代码执行该语句会返回['hi']，因为Object.keys()只会提取对象的可枚举属性。

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