15

Qual a diferença entre:

Person.prototype.sayHello = function() {
    alert("Hello, I'm " + this.firstName);
};

e

Person.sayHello = function() {
    alert("Hello, I'm " + this.firstName);
};

?

2 Respostas 2

21

A diferença é melhor explicitada com um exemplo:

var Person = function(name) {
  this.name = name;
}

Person.sayHello = function() {
  console.log("Hello " + this.name);
}

Person.prototype.sayHi = function() {
  console.log("Hi "+ this.name);
}

var p1 = new Person("Fulano");

Person.sayHello(); // "Hello "
p1.sayHello();     // Erro: sayHello não está definido
p1.sayHi();        // "Hi Fulano"

Quando você adiciona alguma função ou atributo ao prototype, esta função (ou atributo) fica disponível a todas as instâncias da classe (criadas com o new).

Quando você altera sem o prototype, somente o objeto em questão possui a função/atributo. As instâncias não o possuem.

Note que é possível definir os métodos diretamente dentro da sua classe, usando o this:

var Person = function(name) {
  this.name = name;
  this.sayHi = function() {
    console.log("Hi " + this.name);
  }
}

var p1 = new Person("Fulano");
p1.sayHi();        // "Hi Fulano"

Como observado pelo @bfavaretto: "se você tiver várias instâncias do mesmo objeto, melhor colocar no prototype. Senão cada objeto terá sua própria cópia do método, geralmente é um desperdício de recursos".

5
  • No caso se eu definir os métodos dentro do objeto, não teria a necessidade de adicionar ao prototype, correto? Commented 21/08/2014 às 18:48
  • Se você criar os métodos com o this, não precisa. Commented 21/08/2014 às 18:50
  • Ahh certo, entendi, vlww! Commented 21/08/2014 às 18:54
  • 5
    Nota (sobre a última parte): se você tiver várias instâncias do mesmo objeto, melhor colocar no prototype. Senão cada objeto terá sua própria cópia do método, geralmente é um desperdício de recursos.
    – bfavaretto
    Commented 21/08/2014 às 19:06
  • Certo, neste caso será apenas 1 instancia do objeto mesmo, pois fiz um objeto com todas as funcionalidades, é um pequeno site. Mas vlw pela dica! Commented 21/08/2014 às 19:23
13

Ok, vamos a alguns pontos...

São apenas três grandes casos

Tudo se resume a três grandes casos:


1: Função do protótipo

A seguinte situação ilustra a declaração de um protótipo, com uma função de protótipo:

var Person = function(firstName){
    if(!firstName) this.firstName = "Fulano";
    else this.firstName = firstName;
}
Person.prototype.sayHello = function(){ alert("Hi, I'm " + this.firstName); };

Qualquer objeto declarado a partir deste protótipo (var a = new Person();) terá acesso à função. Mesmo que realizássemos nossa instância antes da própria declaração da função, ainda assim ela passaria a ter acesso tão logo a função fosse declarada:

var Person = function(firstName){
    if(!firstName) this.firstName = "Fulano";
    else this.firstName = firstName;
}
var a = new Person();

// Neste trecho, 'a' ainda não conhece a função, e uma chamada resultaria
// em um erro de execução.

Person.prototype.sayHello = function(){ alert("Hi, I'm " + this.firstName); };

// Já neste trecho, 'a' já conhece a função e poderia chamá-la.

2: Função da instância

As instâncias do protótipo, sendo objetos, podem conter atributos e métodos. O que você acha que aquele this faz?

// ...
if(!firstName) this.firstName = "Fulano";
else this.firstName = firstName;
// ...

Cada instância, caso especifique um parâmetro firstName quando da chamada à função Person, receberá seu próprio atributo chamado... firstName!!! (Mas poderia ser outro nome, sem alterar o nome do parâmetro da função!)

var Person = function(firstName){
    if(!firstName) this.nome = "Fulano";
    else this.nome = firstName;
}

Em resumo: o this declarará, dentro do objeto (instância), um atributo ou método (como no exemplo abaixo):

var Person = function(firstName){
    if(!firstName) this.firstName = "Fulano";
    else this.firstName = firstName;
    this.sayHello = function(){ alert("Hi, I'm " + this.firstName);
}

Cada instância deste protótipo Person sai "de fábrica" com seu próprio atributo firstName e sua própria função sayHello(). Como muito bem apontado pelo @bfavaretto, isto pode significar um grande desperdício de recursos, pois mesmo idênticas, as funções de cada objeto são declaradas de maneira independente; é como se, por trás dos panos, cada instância do protótipo (var a = new Person("Rui"); var b = new Person("Ricardo");) fosse declarada de uma maneira parecida com essa:

var c = {};
c.firstName = "Rui";
c.sayHello = function(){ alert("Hi, I'm " + this.firstName);

var d = {};
d.firstName = "Ricardo";
d.sayHello = function(){ alert("Hi, I'm " + this.firstName);

Obviamente, uma diferença crucial do exemplo acima para a instanciação é que de forma alguma 'c' e 'd' podem ser considerados instâncias de Person (c.constructor == "function Object() { [native code] }", enquanto que a.constructor == definição do protótipo Person).

Porém, fica bastante evidente, neste ponto, que cada instância está "livre para seguir seu próprio caminho", criando definições alternativas para sua própria função (suas próprias sayHello() customizadas), e, assim, anulando em seu escopo a definição original.

Isto posto, vale ressaltar que podemos tirar proveito do melhor dos dois mundos: economizar recursos, ao mesmo tempo em que permitimos definições próprias para cada instância. E como isto é feito? Obtendo vantagem a partir do fato de que as instâncias procuram, primeiro, atributos e métodos próprios e, depois, os do protótipo:

var Person = function(firstName){
    if(!firstName) this.firstName = "Fulano";
    else this.firstName = firstName;
}
Person.prototype.sayHello = function(){ alert("Hi, I'm " + this.firstName); };
var a = new Person("Evandro");
var b = new Person("Fabrício");

// Neste trecho, 'a' e 'b' conhecem apenas a definição original da função 'sayHello()'; por sinal, as definições NÃO FORAM duplicadas para dentro de cada instância do protótipo!

a.sayHello = function(){ alert("Viva la revolucion!"); }

// 'b' procura primeiramente a função `sayHello()` dentro de si, mas não encontra e acaba executando a função do protótipo:
b.sayHello();

// Já 'a' procura a função dentro de si e **ENCONTRA**, motivo pelo qual ela executa sua própria definição "particular" ao invés da do protótipo:
a.sayHello();

3: Função da função (a.k.a. "Madness? This is JavaScript!")

Até aqui, apresentei soluções válidas para o que você quer fazer. Veja que não falei sobre a opção:

Person.sayHello = function() {
    console.log("Hello " + this.name);
}

Por mais incrível que possa parecer para o pessoal que está começando, no JavaScript as funções nada mais são do que instâncias do protótipo chamado... Function!!

var Person = function(){};
console.log(Person.constructor); // function Function() { [native code] }

Então... o que nos impede de declararmos uma função nesta nossa (instância de) função? Na verdade, nada:

var Person = function(firstName){
    if(!firstName) this.firstName = "Fulano";
    else this.firstName = firstName;
}
Person.sayHello = function() {
    alert("Hello, I'm " + this.firstName);
};
Person.sayHello(); // Hello, I'm undefined
Person.firstName = "Função";
Person.sayHello(); // Hello, I'm Função

Conclusões

  1. Utilize a declaração no protótipo (Person.prototype.funcao = ...) para disponibilizar a definição da função para todas as instâncias; o mesmo serve para atributos.

  2. Você pode declarar definições particulares nas instâncias (a.funcao = ...), sempre que necessário.

  3. Definir funções dentro da declaração do protótipo (this.funcao = ...) pode parecer mais elegante, mas será uma armadilha na maior parte dos casos, pois resulta em duplicatas como as declaradas de maneira particular (a.funcao = ...), só que com conteúdo idêntico, o que é totalmente desnecessário e, portanto, contra-indicado.

  4. Definir funções na função construtora do protótipo (Person.funcao = ...) geralmente não terá utilidade; em termos de instâncias, pelo menos, com certeza não surte efeito algum.


JSFiddle

Fiz um JSFiddle com uma série de testes; quem quiser dar uma olhada, disponibilizo o link aqui.

Espero ter ajudado!

2
  • Definir instâncias no construtor equivale – mais ou menos – a criar métodos estáticos.
    – bfavaretto
    Commented 21/08/2014 às 21:53
  • 1
    Excelente resposta... sempre fiquei meio sem saber direito a diferença e o terceiro caso é só amor por JS
    – Daniel
    Commented 16/03/2017 às 2:03

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 .