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);
};
?
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".
Ok, vamos a alguns pontos...
Tudo se resume a três grandes casos:
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.
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();
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
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.
Você pode declarar definições particulares nas instâncias (a.funcao = ...
), sempre que necessário.
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.
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.
Fiz um JSFiddle com uma série de testes; quem quiser dar uma olhada, disponibilizo o link aqui.
Espero ter ajudado!