Herencia en JavaScript

Tenemos un constructor Cuenta que establece un atributo saldo y un método deposita:

   function Cuenta() { 
   this.balance = 0; 
    this.deposita = function(valor) { 
        this.balance += valor 
        };
}
var cuentaCorriente = new Cuenta();
cuentaCorriente.deposita(1000); 
cuentaCorriente.balance; //1000

¡Genial, funciona!

Ahora, nuestro cliente necesita una cuenta de ahorros: un tipo de cuenta que actualiza el saldo según un índice.

Es muy fácil de hacer: sólo hay que crear un constructor CuentaAhorros, copiar y pegar todo el código de Cuenta y definir un nuevo método actualiza:

function CuentaAhorros() { 
    //copia de la cuenta 
    this.balance = 0; this.deposita = function(valor) { this.balance += valor; };
    //método adicional... 
    this.actualiza = function(índice) { this.balance += this.balance * índice; }; }

var cuentaAhorros = new cuentaAhorros();
 cuentaAhorros.deposita(1000); 
 cuentaAhorros.balance; //1000 
 cuentaAhorros.actualiza(0.05); 
 cuentaAhorros.balance; //1050

Bueno, pero copiar y pegar es malo. Cada vez que cambiamos o ampliamos Cuenta, tenemos que acordarnos de copiarla en CuentaAhorros.

Lo ideal sería reutilizar el código de Cuenta, haciendo de CuentaAhorros un tipo especial de Cuenta, con todo lo que tiene Cuenta más el método actualiza.

En los lenguajes orientados a objetos, esta idea de crear un tipo especial basado en otro se llama Herencia. El JavaScript es un linguaje orientado a objetos y tiene soporte de herencia.

La mayoría de los lenguajes tienen clases, con alguna forma de extenderlas. Pero JavaScript no es un lenguaje "clásico" y la herencia en JavaScript es un poco diferente, basada en prototipos.

Primero, creo el constructor de CuentaAhorro sin las propiedades que quiero heredar, sólo con el método extra:

function CuentaAhorros() { 
    //no necesito copiar de Cuenta...
     this.actualiza = function(índice) { 
         this.balance += this.balance * índice
        };
    }

Entonces, utilizando el prototype de CuentaAhorros, digo que quiero copiar todo lo que hay en Cuenta en CuentaAhorros.

CuentaAhorros.prototype = new Cuenta();
CuentaAhorros.prototype.constructor = CuentaAhorros;

De hecho hay otras formas de copiar las propiedades de Cuenta en el prototype de CuentaAhorros. La forma anterior es la más común.

Por último, podemos crear una cuenta de ahorros y utilizar todo lo de una cuenta, más la actualización:

var cuentaAhorros = new CuentaAhorro();
cuentaAhorros.deposita(1000); 
cuentaAhorros.actualiza(0.05); 
cuentaAhorros.balance; //1050

En la última versión de JavaScript, EcmaScript 2018, se puede definir la herencia mediante la palabra clave extends, presente en muchos otros lenguajes:

class Cuenta { constructor() { 
    this.balance = 0; } 
    deposita(valor) { this.balance += valor; } 

class CuentaAhorros extends Cuenta { 
    actualiza(índice) { this.balance += this.balance * índice; }

El lenguaje Javascript tiene una gran cantidad de funciones potentes! Formación Front-end de Alura Latam.

Este articulo fue adecuado para Alura Latam por: Marianna Costa

Puedes leer también:

• ¿Qué es DOM?
• Como usar el terminal integrado de Visual Studio Code