Herencia en JavaScript

24 octubre, 2012

La herencia y encapsulación es un elemento esencial en el tema de la programación orientada a objetos. JavaScript hace las cosas un poco diferente a la mayoría de los lenguajes de programación, vamos a repasar las diferencias en este post. En este articulo se supone que ya tiene una base sobre JS OO, si no, recomiendo antes leer este articulo para cubrir lo básico.

Clases

JavaScript técnicamente no tiene clases, pero tiene constructores. Los constructores actúan como contenedores de las variables y métodos, al igual que la declaración de clases en otros idiomas. Vamos a empezar por la creación de una función constructora.

function Person() {};

Como podemos ver es una función vacía. Vamos a crear una variable de instancia y un método que pueda acceder a esa instancia de variable. Para ello vamos a utilizar prototype (para más información puedes ver los post de Yehuda Katz o Croll Angus).

Person.prototype.name = "Pepe";

Person.prototype.sayName = function()
{
      console.log("Mi nombre es " + this.name);
}

var me = new Person();
me.sayName(); // "Mi nombre es Pepe"

 

Ampliación de una clase

Ahora vamos a crear una clase hija llamada “Man” que amplía nuestra clase “Person”. Esto significa que se tienen todas las propiedades y métodos disponibles de la clase “Person”.

function Man() {}; // Nueva Clase

Man.prototype = new Person(); // Hereda de Person
var juan = new Man();
juan.name = "Juan";
juan.sayName(); // "Mi nombre es Juan"

Nuestra clase de “Man” es hija de la clase “Person”. Heredó la propiedad name de la clase, y el método sayName también. Esto se conoce como la reutilización de comportamiento, en un lenguaje basado en clases sería la creación de la herencia.

Ahora podríamos añadir variables de instancia a nuestra clase hija. La variable de instancia sólo estará disponible para la clase hija.

Man.prototype.sex = "Hombre";
juan.sex / / "Hombre"
Person.sex / / Undefined

También podemos añadir un método a nuestra clase padre, y que estará disponible para nuestra clase hija.

Person.prototype.sayHello = function() 
{
    console.log("Hola!");
}

Man.sayHello(); // "Hola!"
juan.sayHello(); // "Hola!"

 

Conclusion

Con esto podemos estructurar nuestras clases para poder generar una estructura de programación más limpia y escalable. Recomiendo leer el articulo sobre encapsulación para poder continuar generando una clases mas potentes.