Herança no JavaScript: Compreendendo o Protótipo e a Cadeia de Protótipos

Herança é um conceito fundamental em muitas linguagens de programação, incluindo JavaScript. No entanto, em JavaScript, a herança é baseada em protótipos, o que pode ser diferente de outras linguagens orientadas a objetos. Vamos explorar o conceito de herança em JavaScript, entender como funciona o sistema de protótipos e como criar hierarquias de objetos.

Protótipo em JavaScript

Em JavaScript, cada objeto tem uma propriedade interna chamada [[Prototype]] (também acessível por __proto__). Essa propriedade é uma referência a outro objeto, chamado de "protótipo". Quando você acessa uma propriedade de um objeto, o motor do JavaScript procura essa propriedade no próprio objeto. Se não encontrar, ele busca no protótipo e continua subindo na cadeia de protótipos até encontrar ou atingir o topo, onde o protótipo é null.

Vamos criar um exemplo simples para entender isso:

// Objeto pai (protótipo)
const animal = {
barulho: 'Faz algum som',
fazerBarulho() {
  console.log(this.barulho);
}
};

// Objeto filho
const cachorro = {
raca: 'Labrador'
};

// Estabelecendo a relação de protótipo
cachorro.__proto__ = animal;

// Acessando propriedades
console.log(cachorro.raca); // Labrador
cachorro.fazerBarulho(); // Faz algum som

Aqui, cachorro é um objeto que herda do animal. Se não encontrar a propriedade no objeto cachorro, ele a busca no animal.

Função Construtora e new

Além de estabelecer a relação de protótipo manualmente, podemos usar funções construtoras e a palavra-chave new para criar objetos com protótipos.

// Função construtora
function Animal(barulho) {
this.barulho = barulho;
}

// Adicionando método ao protótipo
Animal.prototype.fazerBarulho = function () {
console.log(this.barulho);
};

// Criando um objeto
const gato = new Animal('Miau');

// Acessando propriedades
console.log(gato.barulho); // Miau
gato.fazerBarulho(); // Miau

Ao usar new Animal('Miau'), criamos um novo objeto gato com o protótipo Animal.

Herança com Classes (ES6+)

Com o advento do ECMAScript 2015 (ES6), foram introduzidas classes em JavaScript, simplificando a criação de objetos e herança.

// Classe pai
class Animal {
constructor(barulho) {
  this.barulho = barulho;
}


fazerBarulho() {
  console.log(this.barulho);
}
}


// Classe filha
class Gato extends Animal {
constructor(raca) {
  super('Miau'); // Chamando o construtor da classe pai
  this.raca = raca;
}
}


// Criando um objeto
const meuGato = new Gato('Persa');


// Acessando propriedades
console.log(meuGato.barulho); // Miau
meuGato.fazerBarulho(); // Miau
console.log(meuGato.raca); // Persa

Neste exemplo, Gato estende (extends) Animal, herdando suas propriedades e métodos. A palavra-chave super é usada para chamar o construtor da classe pai.

Conclusão

Em JavaScript, a herança é alcançada por meio de protótipos. Seja por estabelecer manualmente a cadeia de protótipos ou usando classes, entender o sistema de protótipos é crucial. Essa abordagem flexível permite a criação de hierarquias de objetos de maneira poderosa e eficiente.