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! Prepare-se para sua carreira de Desenvolvedor Javascript com os cursos de Front-End da Alura.

Artigos de Tecnologia e Negócios > Front-end