> Manuales > Manual de JavaScript

Cómo podemos crear objetos en Javascript a partir de un literal, operaciones típicas que puedes realizar con esos objetos.

Voy a comenzar una serie de artículos que me sirven como apuntes de programación orientada a objetos en Javascript. Este lenguaje es bastante particular en este sentido y en ocasiones te permite hacer cosas que en otros lenguajes serían impensables. También al contrario, algunas cosas básicas de lenguajes tradicionales en Programación Orientada a Objetos no existen en Javascript.

Javascript no tiene clases como tal, por lo menos hasta que llegue la nueva actualización Ecma6 prevista para 2015, pero sí que tiene objetos. Además tiene algo que no todos los lenguajes poseen, un mecanismo para la creación de objetos a partir de lo que conocemos como "literal".

Nota: Para los que no conozcan el término "literal", cabe decir que es una palabra que indica algo escrito de manera "literal". Aunque sea muy feo usar la misma palabra para definir algo, me lo vas a permitir porque es la mejor que existe. Un literal es algo extremadamente sencillo de entender con un ejemplo.
var x = "hola";

En esa línea de código "hola" es un literal. En concreto decimos que es un "literal de cadena". Ahora mira esta otra línea:
y +=5;

Cuando ves un número escrito tal cual en tu código decimos que es un literal numérico.

Podemos crear un objeto en Javascript asignando un valor literal de objeto en una variable. Eso se consigue colocando dicho literal entre llaves y dentro de ellas tantas propiedades o métodos con pares "clave/valor", por medio de una sintaxis como esta:

var dimensiones = {
    altura: 34,
    anchura: 455
}

Como estás viendo, tenemos una variable dimensiones. Al asignarle un literal objeto estamos realmente asignando una referencia a un objeto en la memoria creado con las propiedades que acabamos de asignar.

Las propiedades se separan por comas y se coloca siempre el nombre de la propiedad, el caracter ":" y luego el valor de la propiedad.

Por supuesto, también podremos asignar métodos a nuestros objetos literales.

var dimensiones = {
    altura: 34,
    anchura: 455,
    area: function(){
	  return this.altura * this.anchura;
    }
}

Como ves, los métodos en Javascript simplemente son propiedades a los que les asignas una función. Dentro del código de tus métodos puedes acceder a las propiedades del objeto a través de la variable this.

Una vez creado ese objeto, puedes usar la notación punto para acceder a sus propiedades (o métodos).

dimensiones.altura = 90 //accede a la propiedad altura y le asigna el valor 90
Nota: Los literales de objeto no son la única manera de crear objetos en Javascript. Además existe un manera de definir algo parecido a una clase, pero no es exactamente lo que conocemos en la programación orientada a objetos tradicional y no podríamos llegar a considerarla tal. En lugar de ello podemos crear funciones que, al invocarlas con la palabra "new" te crean nuevos objetos inicializados con esa función. Técnicamente, en vez de definir clases, en Javascript definimos funciones constructoras de objetos. En definitiva, una implementación muy particular que a veces nos puede liar si estamos familiarizados con lenguajes de enfoque más tradicional (en lo que respecta a OOP "Object Oriented Programing") como Java o PHP. Esta es una discusión interesante, que podrías complementar con el artículo dedicado a crear clases en Javascript, pero que no es la que nos ocupa en esta ocasión.

¿Esto no es JSON?

El formato de intercambio de datos JSON se ha popularizado mucho y quizás lo conozcas antes de conocer estos detalles sobre los literales de objeto Javascript. En ese caso puede que te hayas dado cuenta que los literales de objeto Javascript no son más que estructuras JSON. Si es así permíteme apuntar que realmente tendríamos que darle la vuelta a esa frase y decir que la notación JSON utiliza la sintaxis de los literales de objeto Javascript como formato.

Así pues, lo que conozcas de JSON lo puedes aplicar al mundo de Javascript inmediatamente. De hecho, si has tenido ocasión de trabajar con este formato desde Javascript, habrás comprobado que en la mayoría de los casos puedes volcar un objeto JSON en una variable Javascript e inmediatamente trabajar con él como si fuera un objeto que tienes en la memoria.

Nota: Puedes saber más de JSON en el artículo Qué es JSON.

Crear nuevas propiedades y métodos sobre objetos creados

Javascript es muy permisivo y nos deja hacer cosas que producirían errores en otros lenguajes. Es el caso de la asignación de valores a propiedades que no han sido creadas previamente.

Tengo mi objeto coche:

var coche = {
	   color: "rojo",
	   marca: "Opel"
}

Ahora podría crear nuevas propiedades en ese objeto asignando valores a las propiedades que no existían previamente.

coche.anoFabricacion = 2014;

Los métodos los creas asignando funciones:

coche.arrancar = function(){
	  alert("rum rum");
}

Los métodos y funciones que acabamos de crear son tan válidos como los que ya estuvieran en mi objeto cuando fue definido por medio de su literal. Podré acceder a sus elementos con la notación punto, que ya conoces.

console.log(coche.color);
console.log(coche.anoFabricacion);
coche.arrancar();

Ejemplo para practicar con literales de objeto

En el siguiente código ponemos en marcha los nuevos conocimientos que has adquirido sobre literales de objeto en Javascript.

var miObjeto = {
    propiedad1: "Algo",
    propiedad2: "Otra cosa",
    propiedad3: true,
    propiedad4: 344,

    metodo1: function(){
          alert("Ejecutaste metodo1");
    },
    metodo2: funcionMetodo2
}

function funcionMetodo2(){
    //puedo usar la variable this para acceder a mis propias propiedades o métodos
    this.propiedad2 = "Esto lo he modificado desde el método metodo2";
}

//Veamos el valor de esas propiedades
console.log(miObjeto.propiedad1);
console.log(miObjeto.propiedad2);

//ejecutemos algún método
miObjeto.metodo1();
miObjeto.metodo2();

//creamos nuevas propiedades
miObjeto.otraPropiedad = "Esto está creado a posteriori";

//creamos nuevos métodos
miObjeto.otroMetodo = function(){
    console.log("ejecutaste otro método");
}

//veamos el contenido de todo el objeto
console.log(miObjeto);

Eso es todo por el momento, espero que te hayamos aclarado algo.

Miguel Angel Alvarez

Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...

Manual