Clases con javascript: la propiedad prototype

27 de Junio de 2011. Categorías: Javascript

Dentro de las múltiples posibilidades que nos ofrece Javascript, se encuentra la de crear objetos y clases al estilo tradicional. Aunque no es una de las características más conocidas ni utilizadas de este lenguaje, cuyas funciones más habituales son la manipulación del DOM, validaciones y peticiones AJAX, la posibilidad de programar utilizado el paradigma POO se vuelve cada vez más útil y necesario, sobre todo desde la llegada del estándar HTML5, que abre un nuevo abanico de posibilidades al mundo Javascript.

A pesar de que todo lo que se puede hacer con clases y objetos en Javascript, se puede hacer sin ellas, no cabe duda que la programación orientada a objetos nos ofrece una serie de ventajas y "comodidades" que cuanto menos, son dignas de mencionarse.

Comenzamos:

Javascript es un lenguaje orientado a prototipos, por lo tanto, la sintaxis que se utiliza para la creación de clases es ligeramente diferente a lo que estamos acostumbrados en otros lenguajes más tradicionales.

Nota: Existen multitud de formas de crear objetos y clases en Javascript, pero en este tutorial solamente se va a explicar una de ellas.

Constructor:

	function Persona()
	{
	}
	var juan = new Persona();
	var pepe = new Persona();

Y así de fácil hemos creado una clase en Javascript. Esto es así porque como hemos dicho anteriormente, estamos tratando con un lenguaje basado en prototipos, y cada función sirve como constructor de un objeto.

Propiedades o atributos:

Las propiedades o variables de clase, son los atributos que definen cada objeto instanciado. Una clase puede tener o no atributos, y en Javascript, como en muchos otros lenguajes se referencian utilizando la palabra reservada this seguido de un punto y el nombre de la propiedad.

function Persona(nombre)
{
	this.nombre = nombre;
	alert('Me llamo '+this.nombre);
}
var juan = new Persona('Juan');
var pepe = new Persona('Pepe');

En el ejemplo anterior, hemos creado la clase Persona, a la que le hemos de pasar el atributo nombre para almacenarlo como propiedad del objeto.

Podemos acceder o modificar los valores de los atributos muy fácilmente , ya que tan solo tenemos que seguir la sintaxis: nombre_del_objeto.atributo, lo vemos mejor en el siguiente ejemplo:

function Persona(nombre)
{
	this.nombre = nombre;
}
var juan = new Persona('Juan');
alert('me llamo '+juan.nombre);
juan.nombre = 'Juan Perez';
alert('ahora me llamo '+juan.nombre);

Métodos

Los métodos son las acciones que puede realizar el objeto y con ellos puede interactuar con sus atributos o variables externas.

Llegados a este punto, es hora de conocer la propiedad prototype, que nos permite agregar atributos o métodos a un objeto o clase. También veremos la posibilidad que nos ofrece Javascript para igualar variables a funciones, que dota de una increíble flexibilidad a este lenguaje. Quién haya programado en algún lenguaje orientado a objetos como Java o C++ ,verá aquí las principales diferencias de sintaxis que se han mencionado anteriormente.

function Persona(nombre)
{
	this.nombre = nombre;
}
//Aquí creamos el método de la clase:
Persona.prototype.decirNombre =  function()
{	
	alert(this.nombre);
};
var juan = new Persona('Juan');
juan.decirNombre();

Como vemos, la forma para crear métodos de clase dista bastante de otros lenguajes, pero por suerte siempre se sigue el mismo patrón: Nombre_de_la_clase.prototype.nombre_del_metodo = function(parametros){ ...código del método...}

Vamos a ver ahora un ejemplo un poco más completo con un método con parámetros:

function Persona(nombre)
{
	this.nombre = nombre;
}
//Método con parámetros:
Persona.prototype.addDatosPersona = function(apellidos,edad)
{
	this.apellidos = apellidos;
	this.edad = edad;
}
Persona.prototype.decirDatos=  function()
{	
	alert('Nombre completo: '+this.nombre+' '\
	+this.apellidos+', edad: '+this.edad);
};
var juan = new Persona('Juan');
juan.addDatosPersona('Perez Martín', 34);
juan.decirDatos();

Hemos añadido el método addDatosPersona, que requiere los parámetros apellidos y edad. Para llamarlo juan.addDatosPersona('Perez Martín', 34);.

Herencia:

//Clase padre
function Vehiculo(marca,color,velocidad)
{
	this.marca = marca;
	this.color = color;
	this.velocidad = velocidad;
}
Vehiculo.prototype.decirVelocidad = function()
{
	alert('El vehículo tiene una velocidad de  '+this.velocidad+' km/h');
}
Vehiculo.prototype.caracteristicas = function{};

Ya tenemos nuestra clase base, que consta de los parámetros marca, color y velocidad, además de los métodos avanzar() y caracteristicas(). El método avanzar nos dirá la velocidad del vehículo, mientras que el método características está vacío, para poder ver la capacidad de las clases hijas de sobreescribir los métodos de la clase padre.

//Clase hija coche
function Coche(marca,color,velocidad ,puertas)
{
	//Llamamos al constructor  de la clase padre y le pasamos
// los parámetros correspondientes
	Vehiculo.call(this, marca,color,velocidad);
	this.puertas = puertas;
}
//Aquí hacemos que la clase coche herede de la clase Vehiculo:
Coche.prototype = new Vehiculo();
//sobreescribir el método caracteristicas()
Coche.prototype.caracteristicas = function()
{
	alert('Marca:'+this.marca+',color:'+this.color+',velocidad:'\
+this.velocidad+'Puertas:'this.puertas);
};
Coche.prototype = new Coche();
var citroen = new Coche('Citroen','Rojo',100,5);
citroen.decirVelocidad();
citroen.caracteristicas();

Del último ejemplo cabe descatar la sentencia : Vehiculo.call(this, marca,color,velocidad); , que llama al constructor de la clase padre. También hay que destacar la sentencia: Coche.prototype = new Vehiculo();, que se encarga de hacer que los objetos de la clase coche sean instancias de la clase Vehiculo. Además, el método decirVelocidad() de la clase coche sobreescribe al método de la clase padre.

persona -> coche -> vehículo mmm tienes pensado hacer el próximo mclaren mp26 en javascript !