Entendendo o Prototype em JavaScript e seu Funcionamento

O que é o prototype e como ele funciona?

Em JavaScript, o conceito de prototype é fundamental para entender como a herança prototípica funciona. O prototype de um objeto é outro objeto do qual ele herda propriedades e métodos. Cada objeto em JavaScript tem uma referência interna a um prototype, e isso permite que você adicione métodos e propriedades compartilhadas entre diferentes instâncias de objetos sem precisar duplicá-los.

O que é prototype?

No JavaScript, prototype é um objeto especial associado a cada função e objeto. Ele serve como uma base para os objetos criados a partir de uma função construtora. Ou seja, objetos podem herdar métodos e propriedades do prototype de suas funções construtoras.

Por padrão, todos os objetos criados a partir de uma função construtora herdam as propriedades e métodos definidos no prototype dessa função construtora.

Exemplo básico de como funciona o prototype:

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

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

const carro1 = new Carro('Toyota', 'Corolla');
carro1.mostrarInformacoes();  // Carro: Toyota Corolla

O que o código está fazendo: No exemplo acima, a função construtora Carro define as propriedades marca e modelo para cada instância de um objeto Carro. O método mostrarInformacoes é adicionado ao prototype de Carro, o que permite que todas as instâncias de Carro herdem esse método.

A relação entre objetos e seus prototypes

Cada objeto em JavaScript tem uma referência para o seu prototype. Isso significa que, se você tentar acessar uma propriedade ou método de um objeto e ele não encontrar a propriedade diretamente, o JavaScript procurará essa propriedade no prototype do objeto.

Exemplo de como a busca por propriedades funciona:

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

O que o código está fazendo: O objeto cachorro é criado a partir do objeto animal, o que significa que cachorro herda as propriedades de animal, como a propriedade tipo. Quando cachorro é acessado, ele encontra a propriedade nome diretamente, mas para a propriedade tipo, ele a encontra no seu prototype (no objeto animal).

Como modificar o prototype em JavaScript?

Você pode modificar o prototype de um objeto diretamente, o que afetará todas as instâncias criadas a partir dessa função construtora. Isso é útil quando você precisa adicionar ou modificar métodos compartilhados por todas as instâncias de um tipo de objeto.

Exemplo de como modificar o prototype:

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

// Modificando o prototype de Carro para incluir um novo método
Carro.prototype.mostrarMarca = function() {
  console.log(`Marca do carro: ${this.marca}`);
};

const carro1 = new Carro('Toyota', 'Corolla');
carro1.mostrarMarca();  // Marca do carro: Toyota

O que o código está fazendo: A função construtora Carro tem um prototype modificado, adicionando o método mostrarMarca. Esse método pode agora ser chamado em qualquer instância de Carro, sem precisar ser reescrito em cada instância.

Usando o Object.create() para herança prototípica

Uma maneira de criar objetos que herdam diretamente de outro objeto é utilizando o método Object.create(). Esse método cria um novo objeto com o prototype especificado, permitindo herdar as propriedades e métodos desse objeto.

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 de animal)

O que o código está fazendo: O objeto cachorro é criado a partir de animal usando Object.create(), herdando a propriedade tipo de animal.

O conceito de herança prototípica

No JavaScript, a herança funciona por meio de protótipos. Cada objeto pode herdar propriedades e métodos de outro objeto. Isso significa que você pode criar uma hierarquia de objetos onde os objetos mais específicos herdam de objetos mais genéricos, tornando o código mais reutilizável e organizado.

Vantagens do uso de prototype

O uso de prototype e herança prototípica oferece várias vantagens:

• Reutilização de código: Métodos e propriedades podem ser compartilhados entre várias instâncias, evitando duplicação.
• Extensibilidade: Novos métodos e propriedades podem ser adicionados a objetos já existentes sem precisar modificá-los diretamente.
• Flexibilidade: Modificar o prototype de uma classe permite alterar o comportamento de todas as instâncias de uma vez.

Conclusão

O prototype é uma das características mais poderosas do JavaScript e está no cerne da herança prototípica. Ele permite que objetos compartilhem métodos e propriedades, facilitando a reutilização de código e a manutenção de grandes sistemas. Entender como funciona o prototype e como manipulá-lo corretamente é essencial para quem trabalha com JavaScript e deseja escrever código mais organizado, reutilizável e eficiente.

Como o prototype pode melhorar a herança em JavaScript e otimizar seu código

O conceito de prototype em JavaScript é fundamental para entender como funciona a herança prototípica. Ele permite a criação de objetos que compartilham métodos e propriedades, facilitando a reutilização de código e a manutenção de sistemas complexos.

Algumas aplicações:

• Criação de objetos com herança prototípica, permitindo que diferentes objetos compartilhem comportamentos comuns.
• Modificação do comportamento de classes existentes sem a necessidade de reescrever código, adicionando novos métodos e propriedades ao prototype.
• Utilização do prototype para criar bibliotecas e frameworks que aproveitam a herança para estender funcionalidades de objetos base.

Dicas para quem está começando

• Quando estiver começando, experimente a herança prototípica usando Object.create() e veja como os objetos podem herdar propriedades e métodos.
• Pratique adicionar métodos ao prototype de funções construtoras para entender como as instâncias podem compartilhar comportamentos.
• Entenda a diferença entre propriedades de instância e propriedades do prototype para evitar confusão ao acessar os dados de objetos.
• Lembre-se de que o prototype é uma ferramenta poderosa, mas deve ser usada com cuidado para evitar efeitos colaterais indesejados nas instâncias dos objetos.

Contribuições de

Ricardo Vasconcellos

Desenvolvedor full stack especialista em PHP, JavaScript, Node.js, Python e SQL.

Mais sobre o autor

Compartilhe este tutorial