Javascript para novatos 16º

Herencia y prototipos

En Javascript se denomina herencia a la capacidad de un objeto para recibir (heredar) propiedades y métodos de otro objeto. Gracias a ello podemos crear nuevos objetos (instancias) basándonos en otros objetos ya existentes.

En Javascript la herencia se logra a través de prototipos.

Cada objeto tiene un prototipo. Cuando se crea un objeto este obtiene su propio prototipo automáticamente.

Javascript nos permite crear objetos basados en prototipos de otros objetos. Con lo que obtienen (heredan) las propiedades y métodos del prototipo.

Se puede crear un objeto a partir de otro que a su vez está basado en otro y  así indefinidamente, creando lo que se denomina una «cadena de prototipos».

Si modificamos un prototipo los cambios afectarán a los objetos basados en él, modificándose todos los objetos de su «cadena de prototipos» hacia abajo.

En el caso que vimos en el capítulo 14 de los objetos creados a partir de un constructor, todos ellos compartirán prototipo.

La propiedad “prototype”

Prototype es una propiedad global que está disponible en casi todos los objetos.

En el caso que deseemos añadir propiedades o métodos a todas las instancias provinientes de un mismo constructor, deberemos hacer los cambios a la propiedad «prototype» del constructor. Pensemos en «prototype» como en la propiedad encargada de guardar los métodos y propiedades del constructor.

function Persona (){
       this.escribir = function (){
              alert("Tiene " + this.edad);
       };   
}; 

var cliente1 = new Persona();  // Creamos instancia

Persona.prototype.edad = 45;  // Añadimos una propiedad al prototipo del constructor

cliente1.escribir();  //  Invocamos instancia

En este sencillo ejemplo hemos añadido una propiedad llamada «edad» al constructor «Persona». Aun habiéndola añadido después de crear la instancia, estará disponible al llamar a la instancia.

A partir de ahora cada nueva instancia de «Persona» poseerá la propiedad «edad».

Método create()

Una nueva forma que trata de simplificar el sistema de herencia por prototipos, es la que utiliza el método create().

Pertenece a un objeto nativo llamado «object», y nos permite usar un objeto existente como prototipo para crear uno nuevo.

Para ello necesitamos proporcionarle al método el nombre del objeto que servirá de prototipo, de esta manera el método nos devolverá el nuevo objeto que recogeremos en una variable.

Aunque lo más facil es ver un ejemplo.

var vehiculo = {
       fuerza: "motor",
       sistema: "ruedas"
};

var coche = Object.create(vehiculo);  // Creamos nuevo objeto utilizando el objeto "vehiculo" como prototipo.

coche.nombre = "coche";
coche.numeroRuedas = 4;  // Añadimos propiedades al nuevo objeto.

alert(coche.nombre + ", " + coche.numeroRuedas + " " + coche.sistema);

Lo que hemos hecho primero es crear un objeto llamado «vehiculo».

 Después gracias al método «create()» hemos creado otro nuevo objeto llamado «coche» utilizando como prototipo al objeto «vehiculo». De esta manera «coche» tiene las mismas propiedades que «vehiculo».

A continuación hemos añadido dos propiedades nuevas a «coche», llamadas «nombre» y «numeroRuedas».

Por supuesto,  con «create()» también podemos trabajar con métodos, tan solo deberemos utilizar la palabra clave «this» para referenciar al objeto con el que estemos trabajando, ya que su nombre será diferente en cada nuevo objeto.

var vehiculo = {
       fuerza: "motor",
       sistema: "ruedas",
       escribir: function(){
                    alert("Soy un " + this.nombre)
       }
};  // Creamos objeto

var coche = Object.create(vehiculo);  // Creamos nuevo objeto basado en "vehiculo"

coche.nombre = "Coche";  // Añadimos una propiedad a "coche"

coche.escribir();  // Invocamos al método "escribir"

En este ejemplo hemos utilizado «this» para acceder a la propiedad «nombre» desde dentro del objeto.

Cadena de prototipos

Con “create” podemos formar una cadena de objetos, creando un objeto basado en otro, que a su vez está basado en otro y así sucesivamente. Cuando hagamos un cambio a alguno de los objetos, los que le siguen hacia abajo en la cadena también serán modificados.

Douglas Crockford (corckford.com) nos propone el siguiente código para simular «create()» en navegadores antiguos:

if (typeof Object.create !== "function") {
       Object.create  = function (o) {
             function F() {}
             F.prototype = o;
             return new F();
       };
}

Y como recordatorio, aquí abajo tenemos un pequeño esquema sobre las diferentes maneras de crear un objeto y de cómo se pueden modificar las instancias.

Con esto acabamos el tercer capítulo dedicado a la Programación Orientada a Objetos, en el siguiente, que será el cuarto y último sobre este tema, veremos una técnica llamada «closure».

 

---

Ir a Javascript para novatos 17ª parte