Javascript 为什么我的属性在decorator中Object.defineProperty之后失效？

我有一个装饰器，它将字符串数字转换为javascript数字

示例：

“87”

->

87

代码非常简单：

function digit(target: any, key: string) {

  // property value
  var _val = this[key];

  // property getter
  var getter = () =>  _val;

  // property setter
  var setter = (newVal) => _val = parseInt(newVal)

  // Create new property with getter and setter
  Object.defineProperty(target, key, {
    get: getter,
    set: setter,
    enumerable: true,
    configurable: true,
  });
}

class User {

  @digit
  public id: number;
  public isActive: boolean;

  constructor(instanceData) {
    this.id = instanceData.id;
    this.isActive = instanceData.isActive;
  }
}

let user = new User({
  id: '712',
  isActive: '1'
})

console.log([user.id]) // [ 712 ] as expected
console.log(user) // Person { isActive: '1' }

为什么id字段不出现在second console.log中，我如何使它出现？ 我可以访问它，但它隐藏在控制台中

谢谢

因为实例属性的值应用于类的原型，而不是任何实例。这是您所能做的最好的，因为在调用

new User（）

之前，不存在

User

的实例。当您仅使用

console.log（）

获取调试输出时，您只会看到实例的属性，而不会看到原型上的属性

由于所有实例都共享一个原型，您可能不希望这样做：

let user = new User({
  id: '712',
  isActive: '1'
}) 
let user2 = new User({
  id: '567',
  isActive: '1'
})
console.log(user.id) // 567!

一个原型，整个类的一个

id

值。所有

User

对象都具有相同的

id

。哎呀

---

当实例可用时，您可能希望至少对其执行一些操作：

function digit(target: any, key: string) {
  // Create new property with getter and setter
  Object.defineProperty(target, key, {
    get: function () { return this._val },
    set: function (newVal) { this._val = parseInt(newVal) },
    enumerable: true,
    configurable: true,
  });
}

注意在

get

和

set

方法中使用了

this

。这将

\u val

属性放在实例上，因此您将得到不同的属性。通过

console.log（）

，您仍然看不到

id

（您将看到

\u val

）

---

有太多的方法可以配置对象，以便它打印出您使用

console.log（）

所期望的内容，并以您期望的方式运行（每个实例一个

id

），我在此列举。提示：您可以通过修改类构造函数而不是尝试使用装饰器，将属性访问器放在实例上。并确保添加的

\u val

不可枚举，因此不会出现。希望有帮助；祝你好运