Objetos en JavaScript

9. November 2011 19:51 by Oscar.SS in Desarrollo Web  //  Tags:   //   Comments (0)

Los desarrolladores que venimos de lenguajes OO podemos encontrarnos con algunos detalles desconcertantes a la hora de trabajar con objetos JavaScript, dado que estos objetos difieren bastante de los conceptos que estamos acostumbrados a tratar. En primer lugar vamos a dar una definición más o menos formal y después veremos algunos ejemplos que explicarán mejor esta definición.

"Los objetos de JavaScript son colecciones de propiedades cada una con un nombre y un valor. Este valor puede ser otro objeto, por lo tanto, podemos decir también que los objetos JavaScript son contenedores para otros objetos JavaScript".

 

Crear objetos

En JavaScript no disponemos del concepto de clases, como tal, que nos permitan crear un contenedor o firma para nuestros objetos. En JavaScript los objetos se crean dinámicamente bajo demanda. Veamos unos ejemplos.

//Creamos un objeto Cliente
var cliente = new Object();

//Le creamos dínamicamente sus propiedades y le asignamos valores
cliente.nombre "Pedro García";
cliente.direccion "Calle San Juan, 3, 5º B";
cliente.fechaNacimiento = new Date(1975323);
cliente.empleoActual "Soldador";

Como podemos observar, en primer lugar creamos una instancia de Object y a continuación creamos sus propiedades asignándoles un valor. El añadir propiedades a un objeto se puede hacer en cualquier punto de nuestro código siempre que lo necesitemos. Es decir, un objeto JavaScript no tiene un conjunto de propiedades y método predefinidos como si lo tienen gracias a las clases los lenguajes OO. Esta elasticidad es muy potente dándonos plena libertad sobre las características de nuestros objetos.

Mencionar también que no disponemos de un compilador que nos avise de errores por lo que es muy importante escribir bien el nombre de las propiedades. Por ejemplo, supongamos que en algún punto de nuestro código necesitamos cambiar el domicilio de nuestro cliente.

cliente.dirección "Plaza Castilla, 4, 12º Izq";

Fijaros bien en que el nombre de la propiedad ahora tiene un acento. Lo que hemos conseguido con este error es que se creen dos propiedades con valores diferentes en nuestro objeto Cliente, una propiedad "direccion" y otra propiedad "dirección". Esto nos puede volver locos cuando tratemos de recoger el valor de la propiedad y descubramos que no se ha cambiado y en su lugar se han creado dos propiedades parecidas...¡mucho cuidado!

 

Objetos como contenedores de otros objetos

Cuando dimos la definición de un objeto JavaScript dijimos que se comportaban como contenedores de otros objetos. ¿En el ejemplo anterior de nuestro Cliente esto no ha sido así?. Desde luego que si, realmente hemos creado un objeto Cliente que contiene 3 instancias de String y una instancia de Date. Quizás lo veamos más claro con un ejemplo de código.

//Creamos un objeto para almacenar los valores de la dirección de nuestro cliente
var direcClient = new Object();
direcClient.calle "Castillo de Candanchú";
direcClient.numero "23";
direcClient.piso "5º B";

//Creamos un nuevo cliente y le asignamos el objeto direcClient a la propiedad direccion
var cliente = new Object();
cliente.nombre "Sergio Rodriguez";
cliente.direccion direcClient;
cliente.fechaNacimiento = new Date(1975323);
cliente.empleoActual "Progamador de los buenos";

//Accedemos a los valores de la dirección
var suCalle cliente.direccion.calle;

De hecho, si realmente los objetos son colecciones, ¿que nos impide recorrer el objeto como si de un Array se tratara?. No nos lo impide nada en absoluto. Veamos.

            for (var item in cliente) {
                
alert("Propiedad: " + item + "\nValor: " + cliente[item]);
            
}

La variable item en cada iteración mantiene una referencia al nombre de cada propiedad del objeto. O dicho de otro modo, en cada iteración la variable almacena una cadena de texto con el nombre de la propiedad. Veamos un par de resultados de ejecutar el código anterior.

Creo que ahora queda más claro eso de que los objetos son colecciones de propiedades que contienen otros objetos. Es importante comentar dos aspectos de esta característica.

En primer lugar, el nivel de anidamiento de objetos no tiene límites, podremos anidar tantos objetos como necesitemos para representar nuestro modelo. Y en segundo lugar, comentar que las funciones de JavaScript también son objetos y por lo tanto también pueden estar contenidas dentro de las propiedades de otros objetos. Pero esto lo veremos más adelante con detenimiento.

 

Expresiones como nombres de propiedades

Hasta ahora hemos visto que los nombres de las propiedades de nuestros objetos JavaScript son identificadores normales y corrientes. ¿Pero qué sucede si necesitamos identificadores más complejos?. Como por ejemplo "Empleo Actual", o "empleo.Actual", o "El empleo de este cliente", etc.

En este caso podemos utilizar una expresión como una propiedad del objeto de la siguiente forma.
 
nombreObjeto[expresión] = valor de la propiedad;
 
Esto es muy útil cuando a priori no conocemos el nombre de la propiedad, por ejemplo porque será suministrado por el usuario en un campo de texto. Veamos un ejemplo.
 
//Definimos unas cadenas que representarán nuestros nombres de propiedades
var nombrePropiedad "Empleo" "actual" "del" "cliente!!";

function 
GetNombrePropiedad() {
    
return "Nombre del cliente";
}

//Creamos la propiedades en el objeto y le asignamos valores.
var cliente = new Object();
cliente[GetNombrePropiedad()] "Raquel Gutierrez";
cliente[nombrePropiedad] "Doctora";

//Desde otro código accedemos a los valores de las propiedades
var nombreCliente cliente[GetNombrePropiedad()];
var 
empleoCliente cliente[nombrePropiedad];

 

Notación JSON para definir objetos

La sintaxis que hemos utilizado hasta ahora para definir objetos y asignar valores a las propiedades es muy familiar para los programadores de cualquiera de los lenguajes de la familia .NET y especialmente para los de C#. Pero JavaScript va mucho más allá y nos permite definir objetos con la sintaxis JSON a modo de literales de objetos.

var cliente =
    
{
        nombre: 
"Nuria Perez",
        fechaNacimiento: 
new Date(19731213),
        empleoActual: 
"Ingeniera",
        direccion: 
            {
                calle: 
"San Pascual",
                numero: 
23,
                piso: 
"3 C"
            
}
    }
;

 Esta es una forma mucho más compacta de escribir y definir código de objetos y desde luego también es más intuitiva sobre todo, si como en el ejemplo, tenemos objetos anidados.

 

El objeto window

El objeto window es el objeto más alto en la jerarquía del navegador, todos los demás objetos, ya sean nativos de JavaScript o creados por nosotros, cuelgan del objeto window, el cual será único para cada ventana o pestaña del navegador.

Cuando en JavaScript definimos una variable fuera del cuerpo de cualquier función, solemos decir que es una variable global. Pues bien, en realidad lo que estamos haciendo es crear una propiedad en el objeto window y asignarle un valor.

De hecho, a mí personalmente me gusta mucho más la notación que se aprecia en la imagen a la hora de recoger el valor de la variable o propiedad del objeto window. En funciones con muchas líneas de código, si hacemos referencia al objeto window, queda más claro que variables son de ámbito de la función y cuales son globales.

Por cierto, fijaros bien en el intellisense de la imagen anterior, en la declaración de la función sucede exactamente lo mismo. Lo que estamos haciendo en realidad al definir un método o función es asignárselo al objeto window. ¡Todo cuelga del objeto window!

 

Recent Comments

Comment RSS

Month List