Cuando se está comenzando a aprender JavaScript se suele adquirir la mala costumbre de crear funciones e ir copiando el mismo código fuente en archivos de otros proyectos nuevos. El problema es que a medida que el número de proyectos y funciones va creciendo y es necesario modificar éstas, hay que realizar dicha modificación en todos los proyectos.
Una forma de evitarlo, es guardar todas las funciones del mismo tipo (por ejemplo, referentes a fechas) en un archivo y copiarlo a otros proyectos.
Pero aún mejor es crear un Objeto en JavaScript con dichas funciones encapsuladas dentro del mismo (pasarían a denominarse métodos), teniendo así nuestro código fuente mejor estructurado y controlado.
Si bien JavaScript dispone de Objetos internos (como Date() o String() por ejemplo), al tratarse de un lenguaje de Programación Orientado a Objetos (POO) tenemos la posibilidad de crear Objetos nuevos que se adapten a nuestras necesidades, permitiendo una mayor estructuración y depuración del código fuente.
Aunque JavaScript es un lenguaje de Programación Orientado a Objetos su implementación es muy limitada en varios aspectos.
Para crear un Objeto en JavaScript, como sucede en todo Lenguaje de Programación Orientado a Objetos es preciso crear su constructor (digamos que sería la función principal), propiedades (o variables internas del Objeto) y métodos (las funciones internas del mismo):
// Propiedades:
Vehiculo.prototype.fabricante = null;
Vehiculo.prototype.modelo = null;
Vehiculo.prototype.tipo = 0;
// Propiedades (Constantes):
Vehiculo.NO_ESPECIFICADO = 0;
Vehiculo.COCHE = 1;
Vehiculo.CAMION = 2;
Vehiculo.MOTO = 3;
// ------------------ CONSTRUCTORES -----------------------
// Constructor vacío
function Vehiculo() {
}
// Constructor
function Vehiculo( fabricante, modelo, tipo )
{
this.fabricante = fabricante;
this.modelo = modelo;
this.tipo = tipo;
}
// --------------------- MÉTODOS --------------------------
Vehiculo.prototype.setFabricante = function( fabricante ) {
this.fabricante = fabricante;
}
Vehiculo.prototype.getFabricante = function() {
return this.fabricante;
}
Vehiculo.prototype.setModelo = function( modelo ) {
this.modelo = modelo;
}
Vehiculo.prototype.getModelo = function() {
return this.modelo;
}
Vehiculo.prototype.setTipo = function( tipo ) {
this.tipo = tipo;
}
Vehiculo.prototype.getTipo = function() {
return this.tipo;
}
Posteriormente, para acceder al objeto que hemos creado sería:
// Crear un Objeto de tipo Vehiculo
var objVehiculo1 = new Vehiculo( "Toyota", "Corolla", Vehiculo.CAMION );
// Obtener el valor de una propiedad a través del Método del correspondiente:
alert( "Fabricante del vehículo 1: [" + objVehiculo1.getFabricante() + "]" );
alert( "Tipo del vehículo 1: [" + objVehiculo1.getTipo() + "]" );
// Otra forma, accediendo directamente a la Propiedad del Objeto (no recomendado):
alert( "Modelo del vehículo 1: [" + objVehiculo1.modelo + "]" );
// Crear otro Objeto de tipo Vehiculo
var objVehiculo2 = new Vehiculo();
objVehiculo2.setFabricante("SEAT");
objVehiculo2.setModelo( "Panda" ) ;
alert( "Vehículo 2: [" + objVehiculo2.getFabricante() + "] y es de tipo [" + objVehiculo2.getModelo() + "]" );
Observa que para añadir propiedades y métodos a un Objeto en JavaScript se usa prototype.
Fíjate también en que para acceder a las propiedades internas (así como para los métodos en caso necesario) desde dentro del mismo Objeto se usa this (como en todos los lenguajes de Programación Orientado a Objetos).
Para acceder a las constantes tanto desde fuera del Objeto como desde dentro de él se hace del modo mostrado en el ejemplo (pero no se puede usar this desde dentro del propio Objeto).
Según el ejemplo, al crear un Objeto usando el constructor vacío sus propiedades quedarían con valor null, por lo que debemos usar los métodos setxxx() para asignarles valores.
En la programación orientada a objetos no debe poder accederse directamente a las propiedades de un Objeto desde fuera de él, aunque en JavaScript no es posible impedirlo.
Si usamos varios constructores, debemos definir el constructor vacío en primer lugar.
Existen otras formas de crear Objetos en JavaScript, si bien la que te hemos mostrado es una de las más similares a la Programación Orientada a Objetos.
Si en un determinado caso se nos presenta la necesidad de disponer de un Objeto, otra opción es crearlo dinámicamente (aunque si lo vamos a reutilizar es preferible crearlo como te hemos mostrado en la sección anterior, y guardarlo en un archivo aparte).
Para ver cómo crear un Objeto de forma dinámica observa el siguiente ejemplo:
var miObjeto = { id: 1, nombre: "RAFAEL PEREZ", edad: 23, activo: true };
document.write( "id: " + miObjeto.id + "<br />" );
document.write( "nombre: " + miObjeto.nombre + "<br />" );
document.write( "edad: " + miObjeto.edad + "<br />" );
document.write( "activo: " + miObjeto.activo + "<br />" );
Asimismo, es posible crear un array de Objetos y acceder a ellos del siguiente modo:
var miArray = [];
miArray[0] = { id: 1, nombre: "RAFAEL PEREZ", edad: 23, activo: true };
miArray[1] = { id: 2, nombre: "MARTA MARRERO", edad: 32, activo: false };
document.write( "id: " + miArray[1].id + "<br />" );
document.write( "nombre: " + miArray[1].nombre + "<br />" );
document.write( "edad: " + miArray[1].edad + "<br />" );
document.write( "activo: " + miArray[1].activo + "<br />" );
Observa que para acceder a un Objeto en el array indicamos su índice o posición, y a continuación la propiedad a la que deseamos asignar un valor, o bien obtener el que contiene.
Es posible añadir propiedades y métodos a cualquier Objeto en JavaScript, tanto para los que hayamos creado nosotros como para los Objetos internos de dicho lenguaje de programación.
En el siguiente ejemplo creamos un nuevo método para la clase Date() llamado 'getCadenaFecha()', que nos devuelve la fecha en una cadena de texto en formato dd/mm/yyyy:
Date.prototype.getFecha = function()
{
var dia = String( this.getDate() );
var mes = String( this.getMonth() );
var anio = this.getFullYear();
if( dia.length == 1 ) {
dia = "0" + dia;
}
if( mes.length == 1 ) {
mes = "0" + mes;
}
return dia + "/" + mes + "/" + anio;
}
Lo usaríamos del siguiente modo:
// Ten en cuenta que el mes '4' es 'mayo' (comienzan desde cero):
var objFecha = new Date( 2011, 4, 3 );
alert("La fecha es: [" + objFecha.getFecha() + "]" );
Así pues, en caso de que la longitud del día y el mes fueran de un sólo dígito, los devolveríamos con un cero a la izquierda.
Veamos otro ejemplo, en el que añadimos un método al Objeto Date() que devuelva la fecha en una cadena de texto:
Date.prototype.getFechaTexto = function()
{
var aDias = new Array( "Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado" );
var aMeses = new Array( "Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre" );
var numDia = this.getDate();
var dia = aDias[ this.getDay() ];
var mes = aMeses[ this.getMonth() ];
var anio = this.getFullYear();
return dia + ", " + numDia + " de " + mes + " del " + anio;
}
Para llamar a dicho método:
// Ten en cuenta que el mes '4' es 'mayo' (comienzan desde cero):
var objFecha = new Date( 2011, 4, 3 );
alert("La fecha es: [" + objFecha.getFechaTexto() + "]" );
Usando un bucle repetitivo for ... in podremos recorrer las propiedades y métodos de un Objeto en JavaScript:
var miObjeto = { id: 1, nombre: "RAFAEL PEREZ", edad: 23, activo: true };
for( propiedad in miObjeto ) {
document.write( propiedad + " = " + miObjeto[propiedad] + "<br />");
}
