"JavaScript 中 Object.defineProperty() 的奇怪行为"

Question

我在玩下面的javascript代码。 对Object.defineProperty()的理解，我遇到了一个奇怪的问题。 当我尝试在浏览器或 VS 代码中执行以下代码时，输​​出与预期不符，而如果我尝试调试代码，则输出是正确的

当我调试代码并评估配置文件时，我可以在对象中看到name & age属性但是在输出时，它只显示name属性

 //Code Snippet let profile = { name: 'Barry Allen', } // I added a new property in the profile object. Object.defineProperty(profile, 'age', { value: 23, writable: true }) console.log(profile) console.log(profile.age)

现在这里的预期输出应该是

{name: "Barry Allen", age: 23}
23

但我得到的输出。 请注意，我可以访问之后定义的age属性。 我不确定为什么console.log()会这样。

{name: "Barry Allen"}
23 

Answer 1

您应该将enumerable<\/code>设置为true<\/code> 。 在Object.defineProperty<\/code>中默认为false<\/code> 。 根据MDN<\/a> 。

可枚举的<\/strong>

当且仅当在枚举相应对象的属性期间显示此属性时才为true<\/code> 。

默认为假。<\/strong>

不可枚举意味着属性不会在Object.keys()<\/code>或for..in<\/code>循环中显示，也不会在控制台中显示

内置类的prototype<\/code>对象上的所有属性和方法都是不可枚举的。 这就是您可以从实例调用它们但它们在迭代时不会出现的原因。

获取所有属性（包括不可枚举的） Object​.get​OwnProperty​Names()<\/code><\/a> 。

Answer 2

默认情况下，您使用defineProperty<\/code>定义的属性是不可枚举<\/em>的——这意味着当您遍历它们的Object.keys<\/code> （这是代码段控制台所做的）时，它们不会显示。 （同样，数组的length<\/code>属性也不会显示，因为它是不可枚举的。）

见MDN<\/a> ：

可枚举的<\/strong>

当且仅当在枚举相应对象的属性期间显示此属性时才为 true。

默认为假。<\/strong>

改为可枚举：

您可以在记录的图像<\/a>中看到该属性的原因是 Chrome 的控制台也会向您显示不可枚举的属性 -但不可枚举的属性将略微变灰<\/strong>：

看看age<\/code>是灰色的，而name<\/code>不是 - 这表明name<\/code>是可枚举的，而age<\/code>不是。

Answer 3

每当您使用对象的“.defineProperty”方法时。 您应该更好地定义描述符的所有属性。 因为如果您不定义其他属性描述符，那么它会假定所有这些属性的默认值都是错误的。 因此，您的 console.log 会检查所有 enumerable : true 属性并记录它们。

//Code Snippet 
let profile = {
  name: 'Barry Allen',
}

// I added a new property in the profile object.
Object.defineProperty(profile, 'age', {
  value: 23,
  writable: true,
  enumerable : true,
  configurable : true
})

console.log(profile)
console.log(profile.age)