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)