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为true。在Object.defineProperty其false默认情况下。根据MDN的说法。枚举true当且仅当该属性显示了相应的对象的属性的枚举期间。默认为false。不可枚举意味着该属性将不会在控制台中显示Object.keys()或for..in循环显示let profile = {    name: 'Barry Allen',}// I added a new property in the profile object.Object.defineProperty(profile , 'age', {    value: 23,    writable: true,    enumerable: true})console.log(profile)console.log(profile.age)prototype内置类的对象的所有属性和方法都是不可枚举的。这就是您可以从实例中调用它们但它们在迭代时不出现的原因。获取所有属性（包括不可枚举）Object.getOwnPropertyNames() 。let profile = {    name: 'Barry Allen',}// I added a new property in the profile object.Object.defineProperty(profile , 'age', {    value: 23,    writable: true,    enumerable: false})for(let key in profile) console.log(key) //only name will be displayed.console.log(Object.getOwnPropertyNames(profile)) //You will se age too

Answer 2

默认情况下，您使用定义的属性defineProperty是不可枚举的-这意味着当您对其进行迭代时，这些属性将不会显示Object.keys（这是代码段控制台所做的事情）。（类似地，由于length无法枚举数组的属性，因此无法显示。）参见MDN：数不清的当且仅当在枚举相应对象的属性时显示此属性时，才返回true。默认为false。使其可枚举：//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})console.log(profile)console.log(profile.age)您可以在记录的图像中看到该属性的原因是，Chrome的控制台也将向您显示不可枚举的属性-但不可枚举的属性将略显灰色：看看age灰色是多少，而name不是灰色-这表明它name是可枚举的，而age不是。

Answer 3

每当使用对象的“ .defineProperty”方法时。您最好定义描述符的所有属性。因为如果您不定义其他属性描述符，则它将假定所有属性描述符的默认值为false。因此，您的console.log检查所有可枚举的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)