Esta página utiliza 'XHTML 1.0 Transitional' válido Esta página utiliza CSS válido
Búsqueda personalizada

Programación orientada a objetos en Javascript (II). Herencia

En el artículo anterior aprendíamos a crear nuestra primera clase en Javascript y veíamos cómo crear sus métodos y propiedades de objeto. Sin embargo, no comentamos nada sobre uno de los conceptos fundamentales en todos los lenguajes de programación orientada a objetos: la herencia.

Existe más de una forma de implementar la herencia en Javascript. Aquí veremos sólo una de ellas que a mi entender, es la más extendida y también la más correcta. Para ello tenemos ver primero qué es el objeto prototype y cómo se utiliza.

El objeto prototype

Todo constructor en Javascript tiene una propiedad llamada prototype, que permite añadir propiedades y métodos a todos los objetos que han sido creados de una misma clase y a todos los que se creen después. Veamos primero un ejemplo:

function Cuadrado() { //La función constructor
}
var obj = new Cuadrado();
Cuadrado.prototype.lado = 8;
var obj2 = new Cuadrado();
alert(obj.lado); // Este alert muestra 8
alert(obj2.lado); // Este alert muestra 8

Como se puede ver en el ejemplo, lo que hace el objeto prototype es añadir la propiedad "lado" a todos los objetos de la clase "Cuadrado" que ya han sido creados y también a los que todavía no han sido creados.

Como ya hemos visto, prototype es una propiedad y por lo tanto podemos asignarle desde variables a objetos o funciones. Esta funcionalidad es la que vamos a provechar para implementar la herencia en Javascript.

Cómo implementar herencia en Javascript

Para ver cómo se implementa vamos a ver primero un ejemplo muy sencillo y después veremos cómo programarlo utilizando herencia en Javascript.

function Vehiculo(color) {
	this.ruedas = 4;
	this.maximoPasajeros = 4;
	this.color = color;
}

function Coche(color) {
	this.ruedas = 4;
	this.maximoPasajeros = 4;
	this.color = color;
	this.tienePuertas = true;
}

function Moto(color) {
	this.ruedas = 2;
	this.maximoPasajeros = 4;
	this.color = color;
	this.tienePuertas = false;
}

Como se puede ver, tenemos un objeto "Vehiculo" (la clase base) y dos clases más que comparten todas las propiedades de la clase base y añaden una más. Veamos cómo implementar este ejemplo, también en Javascript, pero utilizando herencia.

//En la clase base definimos todas las propiedades
function Vehiculo(color) {
	this.ruedas = 4;
	this.maximoPasajeros = 4;
	this.color = color;
}
//En las clases que heredan cambiamos el valor a las variables que lo precisen
function Coche(color) { 
	this.color = color;
	this.tienePuertas = true;
}
//Reemplazamos el objeto prototype por un objeto Vehiculo para que la
//clase coche adquiera todos sus métodos y propiedades
Coche.prototype = new Vehiculo();

//Ahora hacemos lo mismo con la otra clase que hereda de la clase Vehiculo
function Moto(color) {
	this.ruedas = 2;
	this.maximoPasajeros = 2;
	this.color = color;
	this.tienePuertas = false;
}
Moto.prototype = new Vehiculo();

En un principio, la propiedad prototype no contiene propiedades ni métodos. Cuando añadimos propiedades o métodos al objeto prototype, automáticamente los estamos añadiendo a todas las instancias de objetos de esa clase.

En el ejemplo, en lugar de asignar propiedades o métodos a la propiedad prototype estamos reemplazando dicho objeto por otro que ya tiene propiedades y métodos (un objeto de la clase "Vehiculo") y, por lo tanto, estamos también añadiendo automáticamente todas sus propiedades a todas las instancias de la nueva clase.

Además este método de implementar herencia tiene una ventaja sobre otros métodos ya que se consigue que el operador instanceof funcione como es debido. El operador instanceof nos permite averiguar si una instancia de un objeto pertenece a una clase determinada.

var obj = new Moto("rojo");
alert(obj instanceof Moto); //Muestra true
alert(obj instanceof Coche); //Muestra false
alert(obj instanceof Vehiculo); //También muestra true

Como se puede ver, obtenemos que el objeto que se crea es de la clase "Moto" pero también es de la clase "Vehiculo", tal y como cabría esperar en cualquier otro lenguaje de programación orientada a objetos.

Fecha de publicación: 27/09/2007
Etiquetas: javascript , objetos
Prohibida la reproducción total o parcial de los textos o imágenes aquí expuestos salvo autorización expresa y por escrito del autor de los mismos. © 2007-2013 Locualo v1.0. Política de privacidad [www.locualo.net]