为什么 TypeScript 在原型而不是对象上定义属性？答案

【问题标题】：Why does TypeScript define properties on the prototype and not the object?为什么 TypeScript 在原型而不是对象上定义属性？
【发布时间】：2017-04-21 23:14:25
【问题描述】：

我有一个数据对象，并且我在 TypeScript 中定义了一个属性，例如：

get name() {
    return this._hiddenName;
}
set name(value) {
    ...stuff...
    this._hiddenName = value;
}

但是当我看到输出代码时

Object.defineProperty(MyObject.prototype, "name", {

所以属性存在于原型而不是对象上。当我想调用它时这很好，但是当我想用 Object.keys() 遍历对象的属性时，这些属性将不会被拾取。

具体来说，我将一个具有属性的对象传递到 Angular 中的 FormGroup 中，并尝试使用 Object.keys 将对象映射到表单，该对象会找到我的支持属性，但不是我真正想要公开的属性。

【问题讨论】：

没错，name 不是自己的财产，所以它没有被Object.keys 列出。它在原型上定义是绝对正确的，因为您通过使用类成员作为名称告诉它在那里。
好的，所以我的假设是属性是为封装而设计的，因此您可以使某些东西的行为就像对象的基本值一样。事实上，JavaScript 有一个“可枚举”，它使属性显示为对象的正常部分（在 Object.keys() 中）。 TypeScript 实际上设置了“enumerable:true”，但随后将属性从对象中取出并放入原型中，这专门禁用了“enumerable:true”的意图和属性对外界来说就像一个正常值的想法.
当您使用for ... in 进行迭代时，原型上的可枚举属性被包含。

标签： javascript angularjs typescript

【解决方案1】：

如果你定义一个类，所有的方法和getter/setter都会在原型中：

class MyObject {
  private _hiddenName: string
  get name() {
    return this._hiddenName;
  }
  set name(value) {
      this._hiddenName = value;
  }
}

但是你可以定义一个对象：

let obj = {
  _hiddenName: "abc",
  get name() {
    return this._hiddenName;
  },
  set name(value) {
      this._hiddenName = value;
  }
}

这里，getter 和 setter 都在对象中。编译后的代码与 TypeScript 代码相同。

【讨论】：