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 un concepto fundamental 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 tanto variables como 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.ruedas = 4;
	this.maximoPasajeros = 4;
	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 a este objeto, 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 un objeto que ya tiene propiedades y métodos y, por lo tanto, estamos también añadiendo automáticamente todas sus propiedades a la nueva clase.

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-2017 Locualo v1.0. Política de privacidad [www.locualo.net]