Herencia en Javascript

A diferencia de C++,  C#  y Java el lenguaje Javascript es un lenguaje basado en prototipos, esto significa que puedo reusar comportamientos clonando objetos existentes que sirven como un prototipo para las nuevos objetos.

Un prototipo define un conjundo de funciones y atributos que un objeto puede usar y cada objeto esta relacionado con un prototipo. No existen las clases como tal, cada objeto es un prototipo que cualquier otro objeto lo puede usar como su prototipo base.

Este concepto es muy flexible y lo podemos usar para simular conceptos de POO.

Ejemplo de implementacion de herencia

 

 Creacion de clase A

var ClassA = function() {

    this.name = "class A";
}

Ahora la podemos instanciar usando la palabra reservada new

var a = new ClassA();

ClassA.prototype.print = function() {
    console.log(this.name);
}

Ahora ejecutemos el metodo imprimir:

a.print();

Ahora creamos una funcion para crear un objeto hijo a partir del prototipo del objeto padre:

var inheritsFrom = function (child, parent) {
    child.prototype = Object.create(parent.prototype);
};

Aqui es donde ocurre la magia, en este punto todo el prototipo del objeto padre es transferido al objeto hijo.

Ahora podemos crear otro objeto que herede de nuestro objeto A.

var ClassB = function() {

    this.name = "class B";
    this.surname = "I'm the child";
}

inheritsFrom(ClassB, ClassA);

Probamos la funcion print en el objeto de la clase B

var b = new ClassB();

b.print();

En la consola veran que se imprime "class B"

Ahora podemos sobreescribir la funcion print en la clase B para llamar a su funcion heredada y adicionar otro atributo a la salida por consola.

ClassB.prototype.print = function() {

    ClassA.prototype.print.call(this);
    console.log(this.surname);
}

b.print();

Ahora creemos la clase C

var ClassC = function () {
    this.name = "class C";
    this.surname = "I'm the grandchild";
}

Aplicamos la herencia de la claseC sobre la de la clase B

inheritsFrom(ClassC, ClassB);

Creemos una funcion adicional para la clase C

ClassC.prototype.foo = function() {
    console.log("foo function");
}

Sobreescribimos la funcion print

ClassC.prototype.print = function () {

    ClassB.prototype.print.call(this);
    console.log("Sounds like this is working!");
}

Probamos el codigo

var c = new ClassC();
c.print();

c.foo(); 

Conclusion:

Como podemos ver la herencia en Javascript es muy diferente a la de los  lenguajes convencionales orientados a objetos, simplemente son diferentes filosofias que todo programador web debe aprender.

Enlace al codigo en Plunker.

http://plnkr.co/edit/Ifhnyhxq584nfm9cL7y2

Referencias:

Simple JavaScript Inheritance: What You Need to Know - David Catuhe