24

Vejo em varios instanciamentos de objetos nativos um '.protoype' no meio antes de um método ou atributo mas não sei o que são EXATAMENTE.

A unica coisa que sei é que é a forma do JavaScript de formar heranças sem classes, só que eu não consigo entender esse conceito e nem usar.

Ja li essa resposta > Como funcionam protótipos em JavaScript?

So que não consegui entender 100%. Poderiam me explicar de um ponto de vista + fácil?

2
  • @MuriloHLAd, eu só sei JS até agora, to aprendendo.
    – ropbla9
    Commented 5/12/2014 às 3:37
  • Amigo, eu também não domino JavaScript, talvez alguns conceitos de POO (Programação Orientada a Objetos) te ajude. Observe que uma função em JavaScript não pode ser repetida novamente, com o uso de protótipos você pode fazer com que o 'Carro' e uma 'Pessoa' tenha a função 'Andar()' de maneiras diferentes (retornos diferentes e formas diferentes de trabalhar).
    – Corvo
    Commented 5/12/2014 às 3:49

2 Respostas 2

25

Se você já leu a parte técnica e continua com dúvidas (e pelo que entendi não tem experiência com programação além de JS), eu vou descer lááá nos fundamentos. Vou tentar ser breve e não 100% preciso, tocando apenas nos pontos relevantes pra você entender o protótipo. Ok?

(o que não significa que a resposta vá ficar curta, apesar dos meus melhores esforços...)

Extendendo objetos

Uma estrutura de dados (que aqui chamarei simplesmente de "objeto") representando uma entidade da vida real - ou apenas seus aspectos relevantes ao domínio de aplicação - precisa ser definida. Seus campos têm de ser nomeados e dependendo da linguagem tipados. As operações aplicáveis à mesma precisam ser definidas. Tudo isso é muito trabalhoso e com frequência é desejável se reutilizar código de um objeto no outro.

Reutilizar às vezes significa compor - se você tem um objeto "motor", você pode usá-lo dentro de um objeto "carro" e dentro de um objeto "moto", por exemplo. Tanto conceitualmente quanto pragmaticamente faz sentido dizer que "um carro contém um motor".

Outras vezes, reutilizar significa extender - se você tem um objeto "monstro" representando um monstro genérico, com seus atributos, comportamento, etc, e quer criar um objeto "zumbi" com algumas características a mais (ou simplesmente diferentes) e outro objeto "vampiro", faz pouco sentido conceitualmente (mas talvez faça na prática) que alguns campos e métodos venham de um objeto e outros de outro (ex.: vampiro.morder() vs vampiro.monstro.andar()). Deseja-se que você possa tratar os objetos derivados (ou filhos) como se possuíssem tudo o que o objeto base (ou pai) possui - mas sem ter que repetir a definição toda de novo.

Existem várias maneiras de se extender um objeto, e cada linguagem faz isso de uma forma. A mais comum é o subtipo - em que o tipo derivado possui uma cópia implícita de todos os campos do tipo base, e todas as operações do tipo base também são aplicáveis ao tipo derivado. Outra é o mixin, em que tudo é copiado (campos e métodos). E outra é o protótipo, em que nada é copiado, as coisas são somente delegadas. Talvez existam outras, não me recordo, o importante é que em toda extensão o objeto filho se comporta como se tivesse tudo o que o pai tem, e mais algumas coisas de si próprio.

Exemplo de prototipagem

Antes de entrar no suporte da linguagem ao conceito, deixe-me explicar o conceito em si. Em primeiro lugar, vamos definir o objeto que será o protótipo de outros objetos:

var monstro {
    tipo:"GameObject",
    movel:true,
    controlavel:false,
    hostil:true,
    x:0, y:0,
    andar:function(dx,dy) { this.x += dx; this.y += dy }
}

Note que monstro é um objeto, mas dificilmente nós vamos querer ter um único monstro no cenário, certo? Nós poderíamos querer ter N monstros, mas todos eles teriam todas as características em comum exceto pela posição na cena. Vamos então criar um segundo monstro - também genérico - usando o método da cópia:

var monstro2 = { x:10, y:-10 };
for ( var p in monstro )
    if ( monstro2[p] === undefined )
        monstro2[p] = monstro[p];

monstro2.hostil; // true
monstro2.andar(5, 5); // monstro2.x = 15, monstro2.y = -5

Isso faz com que um segundo monstro seja criado, idêntico ao primeiro, onde somente sua posição é diferente. Entretanto, isso só ocorre no momento da cópia (além de gastar memória à toa). Como mostrarei adiante, JavaScript permite que isso seja feito de forma válida para toda a execução do programa.

O mesmo método poderia ser usado para criar um monstro diferente, mais "especializado":

var zumbi = { x:100, y:0,
    fala:"braaaains",
    morder:function() { ... }
}
for ( var p in monstro ) ...

zumbi.hostil; // true
zumbi.andar(1,3);
zumbi.morder();

Etc. O ponto chave é que o protótipo serve de "molde" para a criação de outros objetos, de forma que no final cada objeto seja (ou pelo menos pareça ser) independente do seu protótipo - semelhante, sim, mas um objeto à parte, sem relação alguma com o pai. Sua interface, ou API, é que tem coisas em comum (mais, talvez, mas de preferência nunca menos).

Para esse exemplo, eu usei uma simples cópia logo após a criação. Mas quando se usa o recurso de prototipagem da linguagem, pode-se manter essa relação entre os objetos pai e filho durante toda a execução do programa, e sem fazer nenhuma cópia. O efeito final é o mesmo (o objeto filho herda a API do pai), mas ele se atualiza e se mantém, além de ser mais eficiente.


Na sua pergunta você também menciona o .prototype, e de fato ele é um dos aspectos mais confusos de JavaScript. Para entendê-lo, é necessário primeiro olhar um pouco "por debaixo dos panos":

Campos "especiais"

Em uma linguagem de programação "primitiva", ou "crua", um objeto não sabe nada sobre si mesmo. Ele possui apenas dados e mais nada:

struct MeuStruct {
    int a;
    float b;
    char* c;
}

void* objeto = malloc(sizeof(MeuStruct)); // Apenas para exemplo, ninguém programa assim
  • Como descobrir o tipo do objeto? Você não descobre...
  • Como acessar os campos dele por nome? Você não acessa...
  • Como "herdar" desse objeto? Você não herda...

Apenas se você sabe que um objeto é de um determinado tipo é que você pode em tempo de compilação ter algumas informações a mais sobre ele:

MeuStruct* objeto = (MeuStruct*)malloc(sizeof(MeuStruct));
objeto.a = 10;
objeto.b = "teste"; // Erro de compilação - o compilador sabe que o tipo de b é float

Se você quer mais "reflexividade" - a capacidade de inspecionar um objeto em tempo de execução e descobrir sua estrutura - você precisa no mínimo de um campo a mais, contendo uma representação abstrata desse tipo:

struct Tipo {
    char* nome;
    char** nomesCampos;
    Tipo** tiposCampos;
    ...
}

struct MeuStruct {
    Tipo* minhaClasse;
    int a;
    float b;
    char* c;
}

As linguagens de programação orientadas por objeto precisam necessariamente implementar algo assim em todos os tipos de dado complexos. Normalmente, elas escondem isso do programador, para não "confundir" o que é do programa e o que é da linguagem em si (no exemplo acima, a, b e c são campos definidos pelo programador, e minhaClasse só é acessível ao ambiente de execução). De modo que o programador apenas consegue acessar esse campo especial indiretamente, através de outros métodos da própria linguagem:

var x = 10; // O objeto 10 tem uma referência para [uma representação abstrata de] seu tipo
alert(typeof x); // "number" - o nome de seu tipo

var y = { a:1, b:0.1, c:"teste" }; // idem
alert(typeof y); // "object"

for ( var p in y ) { // O tipo de y possui uma lista com os nomes de todos os seus campos
    alert(y[p]); // Ele também consegue em tempo de execução acessar um campo por nome
}                // (usando a informação do tipo para chegar no endereço de memória correto)

Esses campos que eu chamei de "especiais" são comumente chamados de "internos" - pois eles não estão "fora da caixa" (ex.: os botões de um controle remoto, que você pode pressionar), e sim "dentro" (ex.: os circuitos que compõem o mesmo, que você não pode mexer). Eles existem, estão lá na memória, mas você não pode mexer.

Herança e Protótipos

E quanto à herança? Linguagens que usam a orientação por objetos clássica permitem apenas que "tipos herdem de tipos": um objeto não pode herdar diretamente de outro objeto, de modo que nenhum outro campo especial é necessário além do minhaClasse. O compilador/runtime dá seu jeito para que os objetos sejam criados com memória suficiente para guardar todos os campos de seu próprio tipo e do(s) seu(s) supertipo(s), se algum. Ele pode fazer alguma "mágica" adicional para que os campos tenham valores padrão, funções construtoras sejam chamadas na ordem certa, etc, mas no fim das contas um objeto do subtipo não tem relação alguma com qualquer objeto do seu supertipo.

JavaScript implementa a orientação por objetos prototípica - ainda existem tipos (ex.: objeto, número, string, boolean), mas a maneira usual de se "herdar estrutura e funcionalidade" é fazendo com que um objeto herde de outro objeto. Mais especificamente, o objeto filho ao ser consultado por uma propriedade que ele não possui (incluindo funções) em vez de "desistir" ele busca essa propriedade no objeto pai. Enfatizando, ele não possui uma cópia da propriedade do pai, ele realmente usa a propriedade contida na região de memória do pai. Para ser capaz disso, naturalmente, ele precisa de uma referência explícita para saber quem é o objeto pai.

Esse objeto pai é chamado de "protótipo". Não cabe aqui uma explicação teórica sobre o conceito (se tiver interesse, sugiro essa seção desse artigo do Steve Yegge [em inglês]) nem vou descrever as especificidades do protótipo na linguagem JavaScript (a pergunta linkada já cobre isso muito bem), apenas quero que o seguinte ponto fique bem claro:

O protótipo é um campo interno, por isso ele não se mistura com os campos normais definidos pelo programador.

Você não pode acessar o protótipo de um objeto diretamente. A especificação ECMAScript se refere a ele como [[Prototype]], mas isso não significa que você possa fazer:

objeto["[[Prototype]]"]

e ganhar acesso a ele (seja de leitura ou escrita). Não, esse campo é interno ao motor JavaScript, e ainda que algumas implementações decidam expô-lo (e não necessariamente com o mesmo nome - vide o __proto__) elas não têm obrigação de fazê-lo. Apenas assuma que o protótipo está lá, que cada objeto sabe quem é seu protótipo, sabe delegar a ele corretamente a consulta a propriedades ausentes, e que a única maneira "correta" de se acessar o protótipo programaticamente (reflexão) é através de funções especiais da própria linguagem (Object.getPrototypeOf).

Sintaxe

Se não se pode acessar o protótipo diretamente, o que é o prototype? Em primeiro lugar, é uma propriedade "normal", você poderia colocá-la em qualquer objeto e ainda assim ela não seria o protótipo desse objeto:

var x = { a:10 };
var y = { b:20, prototype:x };
alert(y.a); // undefined - y não herda de x

A maneira "prototípica" de se criar um objeto que herda de outro em JavaScript é via atribuição direta (item 2 da resposta à pergunta linkada):

var x = Object.create(null); // O [[Prototype]] de x é nulo...
x.a = 10;                    // ...e ele possui uma propriedade "a" valendo 10
var y = Object.create(x);    // O [[Prototype]] de y é x...
y.b = 20;                    // ...e ele possui uma propriedade "b" valendo 20

alert(y.a); // 10
Object.getPrototypeOf(y) == x; // true

Se JavaScript tivesse sido bem projetada</rant> essa seria a única maneira. Entretanto, por razões históricas (razões estas também responsáveis pelo nome "JavaScript" - a linguagem originalmente se chamaria "LiveScript", poupando todos nós de ter que explicar pra um monte de gente que "JavaScript é diferente de Java", dentre muitos outros aborrecimentos<agorasim/rant>) foi exigido do seu autor que sua sintaxe "se assemelhasse à de Java" - incluindo a aparente herança clássica e o uso de construtores e a palavra-chave new:

function ClasseDeX() { // Desnecessário...
    this.a = 10;
}
var x = new ClasseDeX(); // idem...

E quanto à herança? Algum tipo de ClasseDeY extends ClasseDeX era necessário, mas a semântica de JavaScript continuava prototípica, o que obrigava que cada objeto tivesse um protótipo. Não dava para "o tipo de y" herdar de "o tipo de x", era mandatório que o próprio y herdasse de um objeto específico (e não da classe em geral). Por razões que nem faço ideia se decidiu que isso seria feito dizendo ao construtor qual objeto ele deveria usar como protótipo de todos os seus objetos, através da propriedade prototype:

function ClasseDeY() {
    this.b = 20;
}
ClasseDeY.prototype = x; // Aqui estou instruindo o construtor a usar x como protótipo de
                         // todo objeto criado via "new ClasseDeY()"

var y = new ClasseDeY(); // O campo especial [[Prototype]] de y agora contém referência pra x

alert(y.a); // 10
Object.getPrototypeOf(y) == x; // true

Confuso? Nem me fale...

Por fim, uma nota sobre os literais para objeto: se você não precisa de herança, não tem razão para se criar um objeto que é protótipo de outro objeto, o uso de literais pode economizar bastante teclado:

// Isso:
var obj = Object.create(null);
obj.a = 1;
obj.b = 0.1;
obj.c = "teste";

// É equivalente a isso:
var obj = { a:1, b:0.1, c:"teste" };

Agora, quando se quer ou precisa que um objeto tenha um protótipo (por exemplo, se seu objeto possui dezenas de métodos, e você não quer desperdiçar memória fazendo com que cada instância possua uma referência explícita para todos esses métodos) um literal não é uma opção (infelizmente...). Outro meio é necessário. O mais "limpo" seria via Object.create, mas ele possui um pequeno porém...

var x = { a:10 };
//var y = Object.create(x, { b:20 });         // Errado
var y = Object.create(x, { b:{ value:20 } }); // Certo

Infelizmente o segundo argumento para Object.create (o primeiro é o objeto a ser usado como protótipo) não é um simples objeto: é um "descritor de propriedades". Associado a cada nome deve estar não um simples valor, mas uma série de dados descrevendo o que aquela propriedade deve ter, como por exemplo:

  • Seu valor inicial (value);
  • Se ela é "configurável" ou não (se suas características podem mudar em tempo de execução);
  • Se ela é enumerável ou não (se aparece em um for ... in);
  • Se ela é somente-leitura ou não;
  • getter e setter para ela (a semântica precisa dos mesmos, não tenho conhecimento).

Isso torna, na minha opinião, bem menos conveniente de se usar dessa maneira, de modo que muitos preferem o método "pseudo-clássico" mesmo apesar da sintaxe confusa (muitos "decoram" a forma de fazer e não pensam muito no assunto - eu próprio por exemplo, por anos...). No protótipo, entretanto, pode-se usar um literal (quando não se quer herdar de nada) ou uma instância de outro objeto:

function MinhaClasse(a, b, c) {
    this.a = a;
    this.b = b;
    this.c = c;
}
MinhaClasse.prototype = {
    funcao1:function() { ... },
    funcao2:function() { ... },
    ...
    funcaoN:function() { ... }
};

var obj = new MinhaClasse(1, 0.1, "teste"); // Só gasta memória com seus próprios campos;
                                            // As funções são herdadas do protótipo

Com o tempo as pessoas foram desenvolvendo diversos padrões para tornar a programação mais fácil, o que não cabe enumerar aqui. O importante é você saber que a sintaxe acima é essencialmente equivalente ao uso de uma função normal, não construtora:

function MinhaClasse(a, b, c) {
    var self = Object.create(MinhaClasse.prototype);
    self.a = a;
    self.b = b;
    self.c = c;
    return self;
}
MinhaClasse.prototype = {
    funcao1:function() { ... },
    funcao2:function() { ... },
    ...
    funcaoN:function() { ... }
};

var obj = MinhaClasse(1, 0.1, "teste"); // Repare a ausência do "new"

Desse jeito o efeito é o mesmo, e sem a "mágica" do prototype que faz parecer que ele é um campo especial, quando na verdade ele é um campo normal como qualquer outro (repare que no exemplo acima eu poderia ter usado qualquer outra variável para guardar o MinhaClasse.prototype, desde que o objeto em si fosse único).

Qual é "mais certo"? Não dá pra responder isso, certo é aquele que você e sua equipe entendem bem o suficiente para não cometer nenhum erro, e comunicar de forma clara uns aos outros o que é que aquele código faz. Em relação à performance, eu notei que no V8 (Chrome, node.js) usar ou não construtores e o new dá uma diferença gritante, nos outros browsers, nem tanto. Mas a menos que você esteja enfrentando problemas reais de desempenho, deixe as micro-otimizações de lado e foque na clareza do seu código.

5
  • @mgibsonbr resumindo: prototipo é um objeto dentro de outro?
    – ropbla9
    Commented 6/12/2014 às 0:57
  • 1
    @ropbla9 Eu não chamaria de "dentro". Em x = { y:{ a:10 } } o objeto y está dentro de de x, ele é um componente de x. Se você quiser o valor de a você tem que fazer x.y.a. Já o protótipo é uma base a partir do qual você especifica o outro. Imagine uma bola de futebol. Ela é redonda, você pode chutar, etc. Uma bola de futebol americano é como uma bola de futebol, só que é oval. Esse "só que é oval" é específico dela. Mas você continua podendo chutar (nisso ela ainda se parece com seu protótipo). Um objeto se parece com seu protótipo em tudo o que não é específico dele.
    – mgibsonbr
    Commented 6/12/2014 às 1:47
  • 1
    Para um exemplo mais completo, imagine uma cadeira: ela tem um assento (plano, chato, na horizontal) sustentado por 4 pernas, numa altura de uns 0.5m, e em um dos lados ela tem um encosto. Suponha que isso está representado por um objeto. Se eu quiser descrever uma mesa, eu poderia descrevê-la completamente, como fiz com a cadeira. Mas eu poderia também dizer que uma mesa "é como uma cadeira", só que não tem encosto e sua altura é de uns 0.8m. Ela continua tendo um "assento", plano, chato, na horizontal e sustentado por 4 pernas, mas eu não tive que dizer isso explicitamente. Ela herdou isso.
    – mgibsonbr
    Commented 6/12/2014 às 2:11
  • @ropbla9 Acrescentei duas seções no início da resposta com um pouco mais de informações. Espero que ajude (e não que te confunda ainda mais rsrs).
    – mgibsonbr
    Commented 7/12/2014 às 9:49
  • Excelente explicação! Depois de ler vários textos e artigos, finalmente consegui entender o que é e o que faz o prototype em javascript! :)
    – alan
    Commented 21/12/2016 às 13:01
4

Os protótipos podem ser entendidos facilmente trazendo coisas da vida real para a programação.

Veja um exemplo, tenho a função Pessoa em JavaScript, que pode ser entendida nesse contexto como um objeto:

function Pessoa() { /* perceba que ela não faz nada */ }
var Diego = new Pessoa();
var Maria = new Pessoa();
var Joao = new Pessoa();

Onde criei Diego, Maria e João para ilustrar esse exemplo, eles são objetos instanciados da função Pessoa, mas não fazem nada. Vamos supor que eu queira criar um protótipo e permitir que eles emitam um som:

function Pessoa() {}
 Pessoa.prototype.Falar = function () {
    /* Emitir som */
 }

Agora toda vez que eu executar Maria.Falar(); a Maria estará emitindo um som, assim como acontece com os demais. Também posso estar fazendo com que as pessoas realizem outras funções, como correr, andar, dormir, calcular, etc.

 Pessoa.prototype.Correr = function() {
   /* Fazer o objeto se movimentar muito rápido na tela */
 }

 Pessoa.prototype.Andar = function() {
   /* Fazer o objeto se movimentar normalmente na tela */
 }

Pessoa.prototype.Calcular = function() {
   /* Fazer um cálculo */
}

Pessoa.prototype.Dormir = function() {
   /* Aparecer um Zzz... no objeto */
}

E para executar os métodos e permitir que essas pessoas falem, corram, andem e durmam:

Maria.Falar();
Maria.Dormir();
Maria.Correr();
Maria.Andar();
Diego.Falar();
Diego.Dormir();
Diego.Andar();
Diego.Correr();
5
  • acontece que eu não conheço essa forma de criar objetos com funções. Eu só sei criar com construtor e literal. Isso é o que me confunde também =/
    – ropbla9
    Commented 5/12/2014 às 3:36
  • @ropbla9 Não domino JavaScript, mas encontrei um artigo interessante no tableless tableless.com.br/dominando-o-uso-de-prototype-em-javascript não sei se te ajuda.
    – Corvo
    Commented 5/12/2014 às 3:39
  • então mas esse artigo é explicado com funções. Vou procurar entender essa sintaxe antes de tudo. A lógica do prototipo eu entendo mais ou menos.
    – ropbla9
    Commented 5/12/2014 às 3:55
  • Existem tabelas de POO que mostram o funcionamento de protótipos, isso ajuda muito a entender a sintaxe.
    – Corvo
    Commented 5/12/2014 às 4:06
  • 1
    @ropbla9 No JavaScript, qualquer função atua como construtor se for chamada com new.
    – bfavaretto
    Commented 6/12/2014 às 0:57

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 .