0
499
VisualizaçõesComportamiento extraño de Object.defineProperty() en JavaScript
Estaba jugando con el siguiente código javascript. Comprensión de Object.defineProperty() y estoy enfrentando un problema extraño con él. Cuando trato de ejecutar el siguiente código en el navegador o en el código VS, el resultado no es el esperado, mientras que si trato de depurar el código, el resultado es correcto.
Cuando depuro el código y evalúo el perfil, puedo ver la propiedad de name & age en el objeto. Pero en el momento de la salida, solo muestra la propiedad de 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)Ahora la salida esperada aquí debería ser
{name: "Barry Allen", age: 23} 23 pero obtengo la salida como. Tenga en cuenta que puedo acceder a la propiedad de age definida más adelante. No estoy seguro de por qué console.log() se comporta de esta manera.
{name: "Barry Allen"} 233 Respostas
Responde à pergunta0
Debe establecer enumerable en true . En Object.defineProperty es false por defecto. Según MDN .
enumerable
truesi y solo si esta propiedad aparece durante la enumeración de las propiedades en el objeto correspondiente.
El valor predeterminado es falso.
No enumerable significa que la propiedad no se mostrará en Object.keys() o for..in loop ni en la consola
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) Todas las propiedades y métodos en el objeto prototype de las clases integradas no son enumerables. Esa es la razón por la que puede llamarlos desde la instancia, pero no aparecen durante la iteración.
Para obtener todas las propiedades (incluidas las no enumerables) 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 too0
De forma predeterminada, las propiedades que define con defineProperty no son enumerables ; esto significa que no aparecerán cuando itere sobre sus Object.keys (que es lo que hace la consola de fragmentos). (Del mismo modo, la propiedad de length de una matriz no se muestra porque no es enumerable).
Ver MDN :
enumerable
verdadero si y solo si esta propiedad aparece durante la enumeración de las propiedades en el objeto correspondiente.
El valor predeterminado es falso.
Hazlo enumerable en su lugar:
//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)La razón por la que puede ver la propiedad en la imagen registrada es que la consola de Chrome también le mostrará propiedades no enumerables, pero las propiedades no enumerables aparecerán ligeramente atenuadas :
Vea cómo la age es grisácea, mientras que el name no lo es; esto indica que el name es enumerable y la age no.
0
Siempre que use el método ".defineProperty" del objeto. Debería definir mejor todas las propiedades del descriptor. Porque si no define otro descriptor de propiedad, asume valores predeterminados para todos ellos, lo cual es falso. Entonces, su console.log verifica todas las enumerables: propiedades verdaderas y las registra.
//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)