Herança em JavaScript

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.