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".
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
¿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.
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...