Saltar al contenido

Comprensión de los objetos de Javascript y su funcionalidad

Una forma sencilla de analizar lo que es un objeto dentro del código JavaScript es comparar un objeto con lo que vemos a nuestro alrededor en el mundo real. Echemos un vistazo a una manzana, por ejemplo, ya que es un objeto que podemos ver todos los días a nuestro alrededor y que probablemente podamos encontrar ahora mismo en nuestras cocinas. Una manzana es un objeto con varias propiedades que describen sus características. Siempre tiene verdaderas propiedades, como el hecho de ser redonda, así como diferentes propiedades según el tipo de manzana, como el color (pueden ser rojas, verdes o amarillas), con o sin tallo en un extremo, y una ligera concavidad en el otro extremo.

El DOM, o objeto modelo de documento, es un modelo de objeto importante de JavaScript, a veces llamado el objeto más importante dentro de JavaScript. Sin embargo, es más un plano que un objeto individual en sí mismo. Cuando se carga una página, el navegador crea un DOM de la página en ese sitio web en particular. Un modelo DOM HTML se crea como un árbol de varios objetos de la página. Incluyen aspectos tales como Documento –> Elemento Raíz –> Elementos de la Cabeza y el Cuerpo.

Comprensión de los objetos de Javascript y su funcionalidad
Comprensión de los objetos de Javascript y su funcionalidad

Acceso a propiedades y más para depurar o imprimir

Cuando se utiliza el comando de alerta, o alert(object), la salida típicamente mostrará [Objeto]. Por lo tanto, los parámetros de contenido de un objeto no se mostrarán para su depuración o impresión (mostrándose en la pantalla de la consola). Sin embargo, hay formas de evitar esto al acceder al contenido de un objeto o a los elementos dentro de él para depurar o imprimir.

La mayoría de los navegadores, si no todos, también tienen sus propias herramientas de depuración incorporadas que vale la pena aprovechar. Por ejemplo, Firefox tiene las Herramientas de Desarrollo de Firefox que reemplazaron a Firebug, mientras que Chrome tiene Chrome DevTools. A continuación se presentan algunos comandos generales que también deberían funcionar. Para propósitos de depuración simple, esta función de alerta debería funcionar en general:

1Alerta de JavaScript (Object.toSouce())

En nuestro ejemplo a continuación, utilicemos la fruta como el objeto que queremos examinar ya que tiene más variables que el ejemplo de la manzana que usamos arriba. Podemos entonces utilizar la manzana como un tipo de fruta, o una propiedad de la fruta en general, siendo las otras frutas propiedades separadas. Recuerda, podemos nombrar los objetos como queramos y almacenar el código JavaScript dentro de su ubicación.

1Alerta de JavaScript (fruit.toSouce());

El método toSource() significa un objeto de código fuente fetch. Los navegadores recientes también permiten que este comando vuelque el contenido del objeto a una consola de depuración. También se puede usar una herramienta de inspección DOM. A continuación hay dos métodos de acceso, el primero va al directorio y el segundo al modo de depuración para acceder al contenido:

1JavaScript Console.dir(fruta)
1JavaScript Console.debug(fruit);

Además del uso de depuradores, otra forma efectiva de acceder a los elementos de un objeto es utilizar un bucle de foreach dentro de una función printObject que mostrará un cuadro de diálogo de texto en la pantalla llamado función alert(), mostrando las propiedades y valores del objeto. La función alert() también puede imprimir un objeto en la pantalla haciendo esto:

1Alerta Javascript("miObjeto es " + fruit.toSource());

El método toSource() devuelve una cadena de texto que representa el código fuente del objeto. Para la notación de objetos en JavaScript (JSON), se puede usar el método alert() a continuación con fruit, de nuevo, como el ejemplo de objeto en nuestro caso:

1Alerta de Javascript( JSON.stringify(fruta) );o:alert(JSON.parse(fruta). );