Artículos de Tecnología > Front End

Herencia en JavaScript

alexandre-aquiles
alexandre-aquiles

herencia de 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:

Artículos de Tecnología > Front End

En Alura encontrarás variados cursos sobre Front End. ¡Comienza ahora!

  • 137 cursos

    Cursos de Programación, Front End, Data Science, Innovación y Gestión.

  • Videos y actividades 100% en Español
  • Certificado de participación
  • Estudia las 24 horas, los 7 días de la semana
  • Foro para resolver tus dudas
  • Acceso completo a la plataforma por 3 meses
  • Descuento de lanzamiento de 30%

Trimestral

Descuento de lanzamiento de 30%
  • 137 cursos

    Cursos de Programación, Front End, Data Science, Innovación y Gestión.

  • Videos y actividades 100% en Español
  • Certificado de participación
  • Estudia las 24 horas, los 7 días de la semana
  • Foro para resolver tus dudas
  • Acceso completo a la plataforma por 3 meses
US$19,90
un pago de US$29,90 US$19,90
¡Quiero empezar a estudiar!

Paga en moneda local en los siguientes países

Semestral

Descuento de lanzamiento de 30%
  • 137 cursos

    Cursos de Programación, Front End, Data Science, Innovación y Gestión.

  • Videos y actividades 100% en Español
  • Certificado de participación
  • Estudia las 24 horas, los 7 días de la semana
  • Foro para resolver tus dudas
  • Acceso completo a la plataforma por 6 meses
US$33,90
un pago de US$49,90 US$33,90
¡Quiero empezar a estudiar!

Paga en moneda local en los siguientes países

Acceso a todos los cursos
Estudia las 24 horas, dónde y cuándo quieras
Nuevos cursos cada semana