Artigos de Tecnologia e Negócios > Front-end

Herança em JavaScript

alexandre-aquiles
alexandre-aquiles

Temos um construtor Conta que define um atributo saldo e um método deposita:


function Conta() { 
    this.saldo = 0; 
    this.deposita = function(valor) { 
        this.saldo += valor; 
        };
}

var contaCorrente = new Conta();
contaCorrente.deposita(1000); 
contaCorrente.saldo; //1000

Legal, funciona!

Agora, nosso cliente precisa de uma conta poupança: um tipo de conta que atualiza o saldo de acordo com um índice.

Fácil: basta criarmos um construtor ContaPoupanca, copiar e colar todo o código de Conta e definir um novo método atualiza:


function ContaPoupanca() { 
    //copiando da Conta... 
    this.saldo = 0; this.deposita = function(valor) { this.saldo += valor; };
    //o método a mais... 
    this.atualiza = function(indice) { this.saldo += this.saldo * indice; }; }

var contaPoupanca = new ContaPoupanca();
 contaPoupanca.deposita(1000); 
 contaPoupanca.saldo; //1000 
 contaPoupanca.atualiza(0.05); 
 contaPoupanca.saldo; //1050

Poxa, mas copiar e colar é ruim. Toda vez que mudarmos ou ampliarmos Conta, temos que lembrar de copiar para ContaPoupanca.

O ideal é reutilizar o código de Conta, fazendo com que ContaPoupanca seja um tipo especial de Conta, com tudo o que Conta tem mais o método atualiza.

Em linguagens orientadas a objetos, essa ideia de criar um tipo especial baseado em outro é chamada de Herança. A linguagem JavaScript é orientada a objetos e tem suporte a herança.

A maioria das linguagens tem classes, com alguma maneira de estendê-las. Mas o JavaScript não é uma linguagem "clássica" e herança em JavaScript é um pouco diferente, baseada em protótipos.

Primeiro, crio o construtor ContaPoupanca sem as propriedades que quero herdar, apenas com o método a mais:


function ContaPoupanca() { 
    //não preciso copiar de Conta...
     this.atualiza = function(indice) { 
         this.saldo += this.saldo * indice;
        };
    }

Então, usando o prototype de ContaPoupanca, digo que quero copiar tudo o que há em Conta para dentro de ContaPoupanca.


ContaPoupanca.prototype = new Conta();
ContaPoupanca.prototype.constructor = ContaPoupanca;

Na verdade, existem outras maneiras de copiar as propriedade de Conta para o prototype de ContaPoupanca. A maneira acima é a mais comum.

Finalmente, podemos criar uma conta poupança e usar tudo de uma conta, além de atualizar:


var contaPoupanca = new ContaPoupanca();
contaPoupanca.deposita(1000); 
contaPoupanca.atualiza(0.05); 
contaPoupanca.saldo; //1050

Na última versão do JavaScript, o EcmaScript 2015, você pode definir herança usando a palavra-chave extends, presente em muitas outras linguagens:


class Conta { constructor() { 
    this.saldo = 0; } 
    deposita(valor) { this.saldo += valor; } } 

class ContaPoupanca extends Conta { 
    atualiza(indice) { this.saldo += this.saldo * indice; } }

A linguagem Javascript tem vários recursos poderosos! Formação Front-End da Alura.

Leia também:

Artigos de Tecnologia e Negócios > Front-end

Cursos profissionais de Front-end é na Alura, comece agora!

  • 971 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 971 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 971 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 971 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Procurando planos para empresas?
Acesso por 1 ano
Estude 24h/dia onde e quando quiser
Novos cursos toda semana