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.