Herança de objetos é um princípio de orientação a objetos e fornece a habilidade de acessar métodos e propriedades de outro objeto (pai) a partir de um objeto derivado (filho). Herança em javascript é possível através do prototype ou seja herança de protótipo.
O javascript disponibiliza a palavra chave class - a palavra-chave class foi introduzida no ES2015, mas é syntax sugar, o JavaScript permanece baseado em prototype - para declarar classes e extends para fazer herança. Nesse post irei usar a abordagem function e prototype para detalhar o processo de herança e prototype chain.
Prototype chain(Processo de pesquisa nos prototype)
No javascript quando vamos acessar uma propriedade de um objeto o motor do javascript vai verificar se existe essa propriedade no objeto e caso não encontre i*rá procurar no prototype do objeto* e se também não encontrar irá procurar no prototype do prototype e assim por diante passando por todas as instâncias que foram herdadas até chegar ao último prototype. Caso não encontre o JS irá retornar undefined.
Para acessar as informações do prototype utilizamos __proto__ e com ele podemos acessar informações de outros prototypes acima (mais genéricos).
Vejamos o seguinte exemplo onde temos três objetos em que a classe mais baixa Diretor herda características de Professor e Funcionário:
function Funcionario() {}
Funcionario.prototype.salario = () => 'R$ 10000'
function Professor() {}
Professor.prototype = Object.create(Funcionario.prototype)
Professor.prototype.horaExtra = () => 'R$ 500'
function Diretor() {}
Diretor.prototype = Object.create(Professor.prototype)
Diretor.prototype.bonus = () => 'R$ 2000'
Agora vamos inicializar o objeto Diretor e acessar o método salario() que foi herdado:
const diretor = new Diretor();
console.log(diretor.salario()); //output => 'R$ 10000'
Isso foi possível porque quando chamamos o método salario() o motor do javascript verificou se esse método existia no prototype de Diretor e como não encontrou foi "subindo" passando de prototype em prototype até encontar o método no prototype de Funcionario.
Utilize __proto__ e veja a cadeia de prototype (prototype chain) através instância mais baixa que é Diretor:
console.log(diretor.__proto__) //output => prototype Diretor
console.log(diretor.__proto__.__proto__) //output => prototype Professor
console.log(diretor.__proto__.__proto__.__proto__) //output => prototype Funcionario
Conclusão
É muito importante entender bem "herança de protótipo" no javascript para escrever códigos complexos. Evite que sua cadeia de protótipos seja grande e quebre a cadeia caso necessário para evitar problemas de performance.
Top comments (0)