Entendendo a herança baseada em protótipos em JavaScript

Aprenda como a herança baseada em protótipos em JavaScript permite que objetos herdem propriedades e métodos de outros objetos, facilitando a reutilização de código.

Como funciona a herança baseada em protótipos em JavaScript?

A herança baseada em protótipos é um dos conceitos fundamentais do JavaScript e difere da herança baseada em classes, como encontramos em outras linguagens orientadas a objetos. Em JavaScript, os objetos herdam propriedades e métodos de outros objetos através de uma cadeia chamada de cadeia de protótipos (prototype chain). Essa cadeia é criada quando um objeto é criado a partir de outro, permitindo que ele acesse os métodos e propriedades do seu prototype.

O que é a cadeia de protótipos?

A cadeia de protótipos é uma série de links entre objetos e seus protótipos. Quando você tenta acessar uma propriedade ou método de um objeto, o JavaScript procura por essa propriedade no próprio objeto primeiro. Se a propriedade não for encontrada, o JavaScript a procura no prototype desse objeto. Se não a encontrar no prototype, o JavaScript continua a busca na cadeia de protótipos até encontrar a propriedade ou chegar no prototype nulo (o topo da cadeia).

Como funciona a herança com Object.create()?

O método Object.create() é uma maneira de criar um novo objeto que herda as propriedades de um objeto existente. Ele é frequentemente usado para estabelecer uma relação de herança entre dois objetos.

Exemplo de herança com Object.create():

const animal = { tipo: 'mamífero' };
const cachorro = Object.create(animal);
cachorro.nome = 'Rex';
console.log(cachorro.tipo);  // mamífero (herdado do prototype)
console.log(cachorro.nome);  // Rex

O que o código está fazendo: No exemplo, cachorro é criado a partir de animal usando Object.create(), o que faz com que cachorro herde a propriedade tipo de animal. Além disso, cachorro pode ter suas próprias propriedades, como nome.

Herança prototípica com funções construtoras

Uma das maneiras mais comuns de herdar funcionalidades em JavaScript é usando funções construtoras. As funções construtoras permitem criar novos objetos que herdam propriedades e métodos do prototype da função construtora. Esse tipo de herança é fundamental para criar estruturas mais complexas e reutilizáveis.

Exemplo de herança com funções construtoras:

function Animal(tipo) {
  this.tipo = tipo;
}

Animal.prototype.falar = function() {
  console.log('Som de animal');
};

function Cachorro(nome) {
  Animal.call(this, 'mamífero');  // Chama o construtor da classe Animal
  this.nome = nome;
}

Cachorro.prototype = Object.create(Animal.prototype);  // Herda os métodos de Animal
Cachorro.prototype.constructor = Cachorro;  // Ajusta o constructor para Cachorro

const cachorro1 = new Cachorro('Rex');
cachorro1.falar();  // Som de animal
console.log(cachorro1.tipo);  // mamífero

O que o código está fazendo: A função construtora Cachorro herda de Animal. A linha Cachorro.prototype = Object.create(Animal.prototype); faz com que Cachorro tenha os métodos e propriedades de Animal, criando uma cadeia de protótipos entre Cachorro e Animal. Assim, cachorro1 pode acessar o método falar de Animal e também tem a propriedade tipo herdada.

Como modificar o prototype de uma função construtora?

Você pode modificar o prototype de uma função construtora para adicionar métodos e propriedades que serão compartilhados por todas as instâncias criadas a partir dessa função.

Exemplo de modificação do prototype:

function Carro(marca, modelo) {
  this.marca = marca;
  this.modelo = modelo;
}

Carro.prototype.mostrarMarca = function() {
  console.log(`Marca: ${this.marca}`);
};

const carro1 = new Carro('Toyota', 'Corolla');
const carro2 = new Carro('Honda', 'Civic');
carro1.mostrarMarca();  // Marca: Toyota
carro2.mostrarMarca();  // Marca: Honda

O que o código está fazendo: O método mostrarMarca é adicionado ao prototype de Carro, fazendo com que todas as instâncias de Carro possam usar esse método. Isso é uma forma de herança, onde todas as instâncias compartilham o mesmo comportamento.

Vantagens da herança baseada em protótipos

A herança prototípica oferece várias vantagens no desenvolvimento de sistemas JavaScript:

  • Eficiência: Métodos e propriedades são compartilhados entre objetos, evitando a duplicação de código.
  • Flexibilidade: A herança prototípica permite que você altere o comportamento de todas as instâncias de um objeto modificando seu prototype.
  • Simplicidade: JavaScript utiliza uma estrutura simples de herança, sem a necessidade de complexos mecanismos de herança de classes, como em outras linguagens orientadas a objetos.

Conclusão

A herança baseada em protótipos é uma das características mais poderosas do JavaScript, permitindo que objetos compartilhem propriedades e métodos através de sua cadeia de protótipos. Ao entender como modificar o prototype e criar relações entre objetos, você pode escrever código mais modular, reutilizável e eficiente. A herança prototípica simplifica a criação de sistemas com comportamento compartilhado, facilitando a manutenção e extensão do seu código.

A herança baseada em protótipos em JavaScript é um conceito que permite que objetos herdem comportamentos de outros objetos, sem a necessidade de uma estrutura de classes complexa. A cadeia de protótipos é fundamental para criar sistemas mais reutilizáveis e eficientes.

Algumas aplicações:

  • Criação de objetos que compartilham propriedades e métodos com outros objetos através da herança prototípica.
  • Uso do Object.create() para estender objetos sem modificar o objeto original.
  • Adição de novos comportamentos a todas as instâncias de uma classe modificando o prototype.

Dicas para quem está começando

  • Comece a explorar a herança prototípica usando Object.create() e criando objetos simples para entender como os protótipos funcionam.
  • Pratique a modificação do prototype de funções construtoras para adicionar métodos e propriedades a todos os objetos criados por essas funções.
  • Entenda a diferença entre herança baseada em classes e herança prototípica, e como o JavaScript usa essa última para criar objetos e compartilhar comportamentos.
  • Estude como a cadeia de protótipos permite que os objetos acessem métodos e propriedades de outros objetos sem a necessidade de duplicação de código.

Contribuições de João Gutierrez

Compartilhe este tutorial: Como funciona a herança baseada em protótipos em JavaScript?

Compartilhe este tutorial

Continue aprendendo:

Como modificar um prototype em JavaScript?

Entenda como modificar o prototype em JavaScript para adicionar ou alterar propriedades e métodos de objetos de forma eficiente e reutilizável.

Tutorial anterior

Qual a diferença entre métodos de instância e métodos estáticos?

Entenda a diferença entre métodos de instância e métodos estáticos em JavaScript, e quando e como utilizá-los corretamente em sua aplicação.

Próximo tutorial