Objetos JavaScript

JavaScript es un lenguaje orientado a prototipos, una forma de implementar herencia similar a la orientación a objetos pero con matices. En JavaScript todos los tipos de datos provienen de Object. En la imagen siguiente podemos ver el modelo de objetos de JavaScript:

Modelo de Objetos de JavaScript

Una pimera aproximación a los objetos está en Trabajando con Objetos

Trabajando con prototipos

JavaScript es un lenguaje orientado a prototipos. Por ello es importante entender bien este enfoque. Podemos encontrar información sobre esta cuestión en Entendiendo los prototipos en JavaScript y Conceptos básicos en JavaScript: Herencia por prototipos

Una de las cuestiones que más confusión crea es la diferencia/relación entre __proto__ y prototype. En JavaScript: proto vs prototype

Object.create y New

Además de los métodos vistos hasta ahora para crear objetos, podemos utilizar el método Object.create.

Basándonos en el funcionamiento de Object.create, podemos plantear una metodología estructurada para declarar y definir nuevos objetos bastante en la linea de lenguajes como Java, donde tengamos atributos públicos, privados, constructores y métodos definidos usando notación literal. Podemos ver más sobre particular en Una aproximación actual a la creación de objetos en JavaScript

Propiedades enumerable, writable y configurable

Los atributos de objetos los objetos JavaScript poseen un comportamiento predefido en cuanto a escritura, a enumerabilidad, y a cambios en estas características. Se trata de las propiedades enumerable, writable y configurable. Podemos encontrar más detalles sobre esta cuestión en Propiedades de JavaScript: enumerable, writable y configurable

En ocasiones necesitamos recorrer los atributos de un objeto. En este caso tenemos que tener en cuenta si un cierto atributo es enumerable o no. En Reflexionando sobre la enumeración en objetos.

Para la enumeración, resulta conveniente conocer las funciones de iteración sobre arrays. Hay información interesante sobre este tema en Métodos de Repetición en Arrays. Estas funciones son:

  • filter
  • forEach
  • every
  • map
  • some

Con ellas vamos a poder recorrer los diferentes atributos de un objeto, ya sean enumerables, o no.

En Enumerabilidad y Pertenencia de las Propiedades se habla sobre enumerabilidad, y se da un enfoque más formal a la enumeración de propiedades propias y de la cadena de prototipos.

JSON (JavaScript Object Notation)

JSON tiene la misma funcionalidad que XML: almacenamiento e intercambio de información. JSON permite la serialización de objetos JavaScript de una forma muy intuitiva. Tenemos una descripción formal del formato de JSON en http://www.json.org/json-es.html.

Existe un paralelismo entre XML y JSON, dado que ambos comparten ciertas reglas básicas, como la existencia de un único elemento padre. Esto da pie a tratar de buscar las equivalencias entre JSON y XML. En http://respag.net/de-xml-a-json.aspx se muestra un ejemplo con equivalencias entre JSON y XML.

Paso de Objeto JavaScript a JSON (serialización) y de JSON a Objeto JavaScript (parseo)

JavaScript posee el objeto JSON que nos permite serializar y parsear cómodamente:

XML

JavaScript también tiene herramientas para trabajar con XML. Para pasar de XML a un árbol DOM, podemos consultar sobre el objeto DOMParser en https://developer.mozilla.org/es/docs/Web/API/DOMParser. El siguiente es un ejemplo de parseo de un documento XML y posterior consulta mediante XPATH:

txt = "<note>" + "<to>Tove</to>" + "<from>Jani</from>" + "<heading>Reminder</heading>" + "<body>Don't forget me this weekend!</body>" + "</note>"; var parser = new DOMParser(); var xmlDoc = parser.parseFromString(txt,"text/xml"); var to = xmlDoc.evaluate("//to",xmlDoc,null,XPathResult.ANY_TYPE,null); // to contiene un árbol DOM var to = res.iterateNext(); while (to){ console.log(to.textContent); // En la consulta podría haber usado //to/text() to = res.iterateNext(); }

Para la serialiación de un objeto DOM a XML, podemos usar el objeto XMLSerializer. En https://developer.mozilla.org/en-US/docs/Web/API/XMLSerializer hay información sobre este objeto. Supongamos que partimos del objeto xmlDoc del código anterior. Ahora, vamos a seguir el proceso contrario, es decir, vamos a pasar desde un objeto DOM a XML:

var serializador = new XMLSerializer(); var xmlSerializado = serializador.serializeToString(xmlDoc.documentElement); console.log(xmlSerializado); // <note><to>Tove</to><from>Jani</from><heading>Reminder</heading><body>Don't forget me this weekend!</body></note>

Actividad 1. Crea un juego con JavaScript con la siguiente temática:

Varios personajes luchan entre sí, y solo puede haber un vencedor.

El programa cuenta con los siguientes componentes:

  • Un formulario con los siguientes campos:
    • Nombre
    • Grito de guerra
    • Arma
  • Una caja, que hará las veces de sala de espera, donde aparecen los personajes conforme se van añadiendo.
  • Una caja, que hará las veces de cuadrilátero, donde se pueden añadir (mediante arrastre) a los personajes. Esta caja tiene un botón llamado "Luchar", que hace que los personajes se enfrenten. Sólo uno de ellos puede ganar.
  • Una caja, que hará las veces de zona de eliminados, donde se irán colocando los personajes derrotados.
  • Una caja, que hará las veces de narrador, donde ser irá describiendo el transcurso de la partida.

Dinámica de juego

Primero hay que añadir nuevos personajes que irán apareciendo en la sala de espera. El narrador irá contando a quién se ha añadido.

Cuando los personajes se han añadido, el jugador puede añadir a dos jugadores al cuadrilátero. El narrador contará este hecho.

El jugador presiona el botón luchar, y se produce una lucha entre ellos. El narrador cuenta la jugada.

Cuando un personaje pierde en una lucha, el cuadrilátero se queda vacío, y el perdedor pasa a la caja de derrotados.

Cuando el juego termina, un cartel anuncia al ganador.

Si no organizas el código mediante objetos, puedes volverte loco. Además, en esta actividad se valora exactamente su uso. Mi recomendación:

  • Un objeto para el formulario.
  • Un objeto para la sala de espera, con una lista de jugadores.
  • Un objeto para el cuadrilátero.
  • Un objeto para la sala de derrotados.
  • Un objeto para los personajes.

Entrega la actividad en un archivo llamado Act1-jsobjetos.zip