62

Parece-me que o conceito de protótipo é fundamental em JavaScript e inclusive em vários lugares tenho lido que é um de seus pontos fortes. Entretanto, esse não parece um conceito tão simples de entender para quem vem de outras linguagens.

Assim, pergunto: como funcionam protótipos em JavaScript?

1 Resposta 1

57

A cadeia de protótipos

É bem simples na verdade. Cada objeto possui uma referência a um protótipo, que é sempre outro objeto, ou null. Esse objeto, por sua vez, também possui um protótipo. Forma-se então uma cadeia de protótipos.

E para que serve isso? O funcionamento é semelhante ao conceito de herança. Considere o seguinte exemplo: você tem um objeto que representa um veículo, vamos chamá-lo de veiculo. Suponha ainda outros dois outros objetos, carro e onibus, que tenham veiculo como protótipo. E suponha que veiculo possua um método buzinar. A cadeia de protótipos torna possível invocar esse método em carro e onibus:

carro.buzinar();
onibus.buzinar();

E como isso funciona? Ao invocar o método, o interpretador verifica se o objeto em questão (carro ou onibus) possui um método com esse nome. Neste caso, os objetos não possuem esse método. Então o interpretador verifica se o protótipo de cada objeto possui o método, e neste caso ele encontra e invoca o método buzinar. Caso o método não fosse encontrado, o interpretador continuaria a verificação subindo na cadeia de protótipos, até encontrar o método ou propriedade desejado, ou até chegar a um objeto que possua null como protótipo.

É importante saber que essa invocação funciona como se o método pertencesse ao próprio objeto; ou seja, qualquer referência a this dentro do método buzinar irá apontar para carro ou onibus neste exemplo.

Atribuição de protótipo

A linguagem não oferece nenhuma maneira oficial de se trocar o protótipo de um objeto on-the-fly. O protótipo é atribuído somente no momento da criação do objeto, e isso pode ser feito de duas maneiras.

1. Atribuição via construtor

Toda função possui uma proprieade chamada prototype (funções são objetos em JavaScript, portanto podem possuir propriedades). Quando uma função é invocada como construtor, é criado um novo objeto cujo protótipo é o valor da propriedade prototype da função. Por exemplo:

function Veiculo() {}
Veiculo.prototype.buzinar = function() {
    alert('Fom');
}
var carro = new Veiculo(); // invocação como construtor
carro.buzinar();           // dispara o alert

2. Atribuição direta

A partir do ECMAScript 5, a linguagem oferece outra maneira de se criar um objeto com determinado protótipo, a função Object.create. Repare que ela é um método do construtor Object, portanto pode ser considerada um método estático. O que essa função faz é criar um novo objeto cujo protótipo é o que tiver sido passado como primeiro argumento:

var veiculo = {
    buzinar: function() {
        alert('Fom');
    }
};
var carro = Object.create(veiculo); // veiculo será o protótipo de carro
carro.buzinar();                    // dispara o alert

3. Atribuição on-the-fly

Oficialmente, JavaScript não permite alterar o protótipo de objetos já existentes, porém as principais implementações (incluindo todos os browsers que eu conheço) permitem isso por meio da propriedade não-padrão __proto__. Usando essa propriedade é possível fazer algo assim:

var veiculo = {
    buzinar: function() {
        alert('Fom');
    }
};
var carro = {};             // carro ganha protótipo padrão (Object.prototype)
carro.__proto__ = veiculo;  // troca protótipo
carro.buzinar();            // dispara o alert

Notas sobre a especificação

A explicação acima é bem informal, e similar ao que a especificação da linguagem descreve, também informalmente. Porém a descrição contida na especificação pode parecer um pouco confusa, pois há duas coisas chamadas "prototype": a propriedade prototype dos objetos do tipo função, e o [[Prototype]], que é o nome oficial da propriedade interna dos objetos. Quando a especificação usa o termo prototype sem formatação de código nem colchetes, refere-se geralmente ao [[Prototype]], da mesma maneira que usei o termo protótipo na descrição acima.

No que diz respeito ao acesso à cadeia de protótipos, o ponto crucial na especificação é a função interna [[GetProperty]], invocada quando você tenta acessar uma propriedade de um objeto. Trata-se de uma função recursiva, que retorna a propriedade solicitada de determinado objeto, esteja ela no próprio objeto ou em um dos membros de sua cadeia de protótipos.

7
  • Com o ES6, o prototype tornou-se obsoleto? Commented 5/10/2015 às 16:12
  • 5
    Não, de maneira alguma! A nova sintaxe com class é açúcar sintático, o protótipo é que continua fazendo tudo funcionar.
    – bfavaretto
    Commented 5/10/2015 às 16:24
  • 1
    @felipecardozo Sim, os métodos compartilhados pertencem ao protótipo e podem ser utilizados por qualquer objeto que faça parte da cadeia de protótipos.
    – bfavaretto
    Commented 15/04/2020 às 19:48
  • 1
    Em relação a este trecho: "[...] não permite alterar o protótipo de objetos já existentes [...]", acho que convém alterar, uma vez que (relativamente) recentemente foram introduzidos os métodos Object.setPrototypeOf e Reflect.setPrototypeOf. A operação [[Set]] em __proto__ também já foi estandardizada no anexo B da especificação. Eu até ia editar, mas acabei achando melhor comentar mesmo. :P (pode apagar este comentário depois) Commented 23/02/2021 às 18:52
  • 1
    Obrigado @LuizFelipe. Já pensei várias vezes em atualizar esta resposta, mas ando sem tempo. Por enquanto fica o seu comentário rs.
    – bfavaretto
    Commented 24/02/2021 às 1:01

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .