Javascript / Objetos

Bienvenidos sean a este post, si bien en este post hablamos de modelo de objetos, de las caracteristicas y algunas nociones basicas de como son los objetos en Javascript.

En el post de hoy nos centraremos en como trabajar con ellos y crear nuestros propios objetos para tener una mejor organizacion interna de nuestros programas, primero veamos como es la declaracion de los mismos.

Al igual que vimos en el post anterior para declarar un objeto se utiliza una variable, su sintaxis es la siguiente:

var nombreObjeto = {
	propiedad1: valor,
	propiedad2: "valor",
        ....
	propiedadN: valor
};

En este caso el nombre del objeto sera el de la variable abrimos una llave y luego agregamos las propiedades, estas deben tener un nombre acorde a la que corresponda pero no deben coincidir con las palabras reservadas del lenguaje como vimos en este post, luego llevara los dos puntos (:) como separador y el valor asociado a esa propiedad por ultimo la coma delimitara que esa es la propiedad con el identificador y el valor despues podremos agregar siempre que utilicemos la misma sintaxis se pueden agregar todos los que uno necesite y una vez agregado el ultimo no le ponen coma y cierran la llave, veamos un ejemplo:

var blogger = {
	nombre : "Martin",
	apellido : "Miranda",
	twitter : "@tinchicus",
	facebook : "@tinchicus",
	profesion : "Programador"
};

Como podemos ver es algo bien simple donde el objeto es blogger, despues son todas propiedades del mismo, por ejemplo si queremos usar una de las propiedades lo haremos de las siguientes formas:

blogger.twitter;
blogger["nombre"];

En este caso las dos sintaxis son validas para acceder a las variables del objeto, ya sea como un array, la comilla doble es necesaria para que no lo interprete como una variable sino como una propiedad del objeto, o como propiedad de un objeto, una particularidad de los objetos en Javascript es que tenes varias formas de declarar sus propiedades, otra posibilidad es la siguiente:

var persona = {
	nombre : "Martin",
	'mi edad' : 43
};

Donde podemos usar comillas simples para usar un nombre con espacio, sin las comillas nos devolveria un error, y para llamarlo deberiamos usar la siguiente sintaxis:

persona['mi edad'];

Recuerden que al usarlo asi deben respetar la comilla simple porque es como lo declararon, otra particularidad de los objetos en Javascript es que podemos agregar propiedades dinamicamente sin necesidad de haberlas declarado en el mismo, veamos el siguiente ejemplo:

var persona = {
	nombre : "Martin",
	'mi edad' : 43
};
persona.profesion="Programador";

Siguiendo con el ejemplo anterior si nosotros tomamos el objeto creado y le agregamos una nueva propiedad (profesion) y a su vez le asignamos un nuevo valor, el lenguaje automaticamente le creara la nueva propiedad con el nuevo valor sin necesidad de haberlo declarado o definido en el mismo, por ultimo los objetos pueden tener a su vez otros objetos con su respectiva informacion, analicemos el siguiente ejemplo:

var persona = {
	nombre : "Martin",
	'mi edad' : 43
	motocicleta: {
		marca: "Yamaha",
		fecha: 2010
	}
};

En este caso tenemos el objeto persona y dentro del mismo creamos el objeto motocicleta, el cual a su vez tendra dos propiedades como son marca y fecha de esta, si nosotros necesitamos obtener la marca de la motocicleta debemos hacerlo de la siguiente manera:

persona.motocicleta.marca;

Recuerden que siempre es del objeto mas externo al interno, con esto hemos cubierto todo lo relacionado a las propiedades de un objeto pasemos a ver como son los metodos de un objeto.

Trabaja de forma muy similar a la funcion anonima porque utilizamos una variable (propiedad) para envolver a la funcion (metodo), veamos su sintaxis:

var objeto = {
	propiedad : valor,
	funcion : function(){
		... instrucciones ...
	},
	otraFuncion: function(< argumento >){
		... instrucciones ...
	}
};

Al igual que comentamos antes es similar a funciones anonimas, tambien por medio de la coma podemos crear todas las funciones que sean necesarias para nuestro objeto, tambien estas aceptan argumentos como si fueran una funcion comun.

Para redondear el concepto de objeto vamos a hacer el siguiente ejemplo para visualizar mejor todos los conceptos:

objetos.html

<html>
<script language="javascript">
<!--

document.title="Objetos";
var persona;
persona = {
	nombre: "Martin",
	apellido: "Miranda",
	alias: "tinchicus",
	mostrar: function(){
		document.write("Propiedad nombre: " + persona.nombre + "<br>");
		document.write("Propiedad apellido: " + persona.apellido + "<br>");
		document.write("Propiedad alias: " + persona.alias + "<br>");
	},
	cambiar: function(nombre,apellido,alias){
		persona.nombre = nombre;
		persona.apellido = apellido;
		persona.alias = alias;
	}
};

//-->
</script>
<body>
	<script language="javascript">
	<!--
		persona.mostrar();
		persona.cambiar("Enzo","Tortore","el Gary");
		document.write("<br>Despues de cambiada la persona<br><br>");
		persona.mostrar();
	//-->
	</script>
</body>
</html>

Este caso es muy simple, tenemos un tag SCRIPT donde crearemos un objeto llamado persona, en este caso tendra tres propiedades (nombre, apellido y alias) y dos metodos (mostrar y cambiar), las tres propiedades las iniciaremos con sus respectivos datos, luego en la funcion mostrar se encargara de imprimir en pantalla los tres valores que contienen las propiedades, y la funcion cambiar tendra la posibilidad de recibir tres argumentos y ubicarlos en las propiedades que corresponda, reemplazando los valores anteriores, con esto terminamos de ver nuestro objeto persona, pasemos al otro tag SCRIPT, en este caso primero llamaremos a mostrar, donde nos mostrara los datos actuales, despues invocaremos a cambiar para modificar las propiedades de persona, luego mostraremos un mensaje notificando el cambio y por ultimo volvemos a llamar a mostrar el valor de las propiedades de persona, probemos el programa para ver su salida

Vean como primero nos trajo los valores iniciales del objeto y como luego nos trajo los datos modificados, como pueden ver funciono correctamente tanto el objeto como los metodos relacionados a ellos.

En resumen, hoy hemos visto como crear objeto en Javascript, como es internamente, que son las propiedades, que son los metodos, que alcances tiene y hasta donde podemos utilizarlo, espero les haya sido util sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.

Tengo un Patreon donde podes acceder de manera exclusiva a material para este blog antes de ser publicado, sigue los pasos del link para saber como.