0
314
Views¿Por qué los objetos simples no se registran de manera consistente en diferentes entornos?
¡Realmente ayudaría a la depuración si todos los entornos registraran el mismo contenido de manera consistente! Tengo un problema al poder registrar los contenidos correctos en diferentes IDE y navegadores.
Después de leer varias otras publicaciones (por ejemplo, aquí ), intento simplemente registrar los métodos de un objeto. Tome este código, por ejemplo, de este CodePen :
class User { constructor(name) { this.name = name; } fn() { return 'fn'; } fn2() { return 'fn2'; } static staticFn() { return 'static fn' } } const joe = new User('Joe') console.log(joe) console.log(joe.fn) console.log(Object.getPrototypeOf(joe)) // the important part! Los métodos fn y fn2 deben registrarse al menos. Si copia el fragmento de código anterior y lo pega en la consola JS de Chrome, registra correctamente todo, en particular la parte importante (el registro final):
Sin embargo, pegue el mismo código en la consola JS de Safari y la parte importante se registra incorrectamente como solo User {} , sin mostrar los métodos del objeto:
Además, la parte importante de CodePen solo registra [object Object] {} :
Y VSCode solo registra {} .
Entonces, mi pregunta es ¿cómo puede registrar correctamente los métodos de un objeto en todos los entornos? Está causando una pesadilla al tratar de depurar cualquier cosa, ya que un código de nodo que tengo solo se ejecuta en un IDE, no disponible para un navegador.
Esto proviene de un error en el que estoy obteniendo un objeto de una base de datos mongo que extrañamente no parece tener ningún método a pesar de que el objeto tiene métodos antes de insertarse en la base de datos.
Cualquier consejo o sugerencia de depuración sería muy apreciada, gracias.
1 answers
Answer question0
La forma en que los diferentes entornos registran un objeto está definida por la implementación , por lo que, como ha visto, tiende a variar. Cuando crea una instancia de su clase de User , los métodos de ese objeto serán:
- Sobre el prototipo de las instancias
- no enumerable
En el caso de Chrome, registra el objeto no solo con sus propias propiedades, sino también con las propiedades enumerables y no enumerables en su prototipo.
En el caso de Safari, no muestra propiedades no enumerables en el prototipo del objeto a menos que expanda el objeto y vea su prototipo explícitamente. En mi opinión, las herramientas de desarrollo de Safari están desactualizadas y tienen algunas peculiaridades extrañas que hacen que la depuración no sea intuitiva, por lo que es mejor mantenerse alejado de ellas si puede.
Las consolas basadas en web, como la de CodePen, normalmente registran objetos mediante JSON.stringify() y luego agregan el texto en cadena a su propia consola DOM personalizada. Cuando los objetos se clasifican en cadenas, las propiedades no enumerables y cualquier propiedad en el prototipo se ignoran y no se incluyen en el resultado de la cadena. Es por eso que normalmente es mejor mirar la consola del navegador cuando se trata de ver el contenido de su objeto en lugar de una consola web personalizada.
Si desea registrar todos los métodos, puede usar Object.getOwnPropertyNames() y recorrer la cadena de prototipos de su objeto (consulte el fragmento a continuación, por ejemplo). Sin embargo, esto generalmente no es necesario y, en cambio, usar la consola o el depurador (que puede ingresar usando debugger ) en algo como Chrome, Firefox o VSCode le mostrará las propiedades correctas de su objeto, por ejemplo: 
class User { constructor(name) { this.name = name; } fn() { return 'fn'; } fn2() { return 'fn2'; } static staticFn() { return 'static fn' } } const joe = new User('Joe') const getMethods = (obj) => { let curr = obj; while(curr !== Object.prototype) { const names = Object.getOwnPropertyNames(curr); for(const key of names) if(typeof curr[key] === "function") console.log(key, curr[key]); curr = Object.getPrototypeOf(curr); } } getMethods(joe);