...estou aprendendo classes em JavaScript e estou quase perdendo a
cabeça com uma coisa que parece ser bem simples na Programação
Orientada a Objetos...
Caso o leitor tenha dúvidas a respeito de JavaScript ser ou não uma Linguagem de Paradigma Orientado a Objetos, ou ainda não tenha esse conceito bem sedimentado, ou ainda algum conceito explicado abaixo pareça estranho sugiro a leitura:
...toda função tem um prototype com uma propriedade constructor que
aponta diretamente para a função e se eu criar um prototype por fora
eu irei sobrescrever o prototype da função e deixar ela sem a
propriedade constructor, por isso eu adicionei esta propriedade
diretamente no prototype criado manualmente...
Deve ser esclarecido que o valor da propriedade prototype
de uma instancia de um objeto Function é utilizada quando a função é usada como um constructor com o operador new
, o valor dessa propriedade prototype
se tornará o protótipo de objeto instanciado.
Protótipo é o mecanismo pelo qual os objetos JavaScript herdam recursos uns dos outros e a propriedade de um objeto que aponta para seu protótipo não é chamada prototype
.
Não existe uma propriedade padrão para acessar protótipos, por enquanto na prática todos os navegadores utilizam a propriedade __proto__
. Porém segundo o padrão ECMA a propriedade __proto__
tornou-se obsoleta e deve ser evitada.
Veja tabela de compatibilidade da propriedade __proto__
que no momento em que escrevo essa resposta o engine JS Deno já não suporta mais a propriedade __proto__
.
A forma padrão de acessar o protótipo de um objeto é:
- fazer a leitura do protótipo com o método estático
Object.getPrototypeOf()
.
- fazer a sobrescrição do protótipo com o método
Object.setPrototypeOf()
.
Atenção: alterar o protótipo dessa forma pode sobrescrever otimizações que engines JS produzem, podendo trazer prejuízos quanto ao tempo de acesso as propriedades do objeto cujo protótipo foi modificado.
Quando a função é chamada como um constructor junto da da palavra chave new
acontecerá a seguinte sequencia de ações:
- Cria um objeto JavaScript simples e em branco. Por conveniência, chamaremos de
newInstance
, e aqui propriedade interna que aponta para o protótipo dum objeto que somente aqui na explicação será chamada [[protótipo]]
.
- Aponta o
[[protótipo]]
de newInstance
para a propriedade prototype
da função construtora, se prototype
for um Object
. Caso contrário, no caso de um tipo primitivo, newInstance
permanece como um objeto simples com Object.prototype
com seu [[protótipo]]
.
- Executa a função construtora com os argumentos fornecidos, vinculando
this
ao contexto de newInstance
fazendo todas as referências a this
na função construtora agora se referem a newInstance
.
4.Se a função construtora retornar um valor não primitivo , esse valor de retorno se tornará o resultado de toda a expressão new
. Caso contrário, se a função construtora não retornar nada ou retornar um primitivo, será retornado newInstance
.
Normalmente, os construtores não retornam um valor, mas podem optar por fazê-lo para substituir o processo normal de criação de objetos.
Tendo isso esclarecido, voltando a questão
...se eu criar um prototype por fora eu irei sobrescrever o prototype da função e deixar ela sem a propriedade constructor?
NÃO! Como já foi explicado, no processo de instanciação de objetos com a palavra chave new
, a propriedade prototype
da função construtora só será adicionada a cadeia de protótipos do objeto instanciado após esse ter sido criado, e portanto, o constructor usado será a própria função construtora e NESSE CASO o constructor fornecido com o protótipo, "criado por fora", não será utilizado. Veja o exemplo:
function Person(name) {
this.name = name;
}
const p1 = Object.getPrototypeOf(Person);
Person.prototype = {
constructor: Person,
sayName: function() {
console.log(this.name);
},
toString: function() {
return "[Person" + this.name + "]";
}
}
const p2 = Object.getPrototypeOf(Person);
console.log(p1 === p2); ///true - a propriedade Function.prototype só será usada na cadeia de prótótipos da instância apósa instanciação.
const p3 = Object.getPrototypeOf(new Person("Augusto"));
console.log(p1 === p3); ///false - A função Person() continua com sua cadeia cadeia de protótipos inalterada enquanto as instancias de Person() receberão Person.prototype em sua cadeia de protótipos
O que já fornece embasamento para pergunta principal.
Qual a diferença da função sem a propriedade constructor, pois aparentemente os dois códigos funcionaram de forma semelhante?
Sim, aparentemente os dois códigos funcionaram de forma semelhante. Mas avaliar as coisas de forma aparente nem sempre é suficiente.
A principal diferença é maneira como será conferido valor a propriedade Object.prototype.constructor
, propriedade essa que retorna uma referência à função construtora que "criou" a instância.
No exemplo apresentado na pergunta fica pouco evidente porém no exemplo abaixo é possível deixar mais claro. Serão criados alguns objetos:
- Duas funções verbosas
Foo()
e Bar()
, que se anunciam no console quando chamadas, que serão usadas como funções construtoras.
foo
que é instância de Foo()
.
foo2
que também é instância de Foo()
, porém é criado após alteração no protótipo de Foo()
alterando constructor para Bar()
.
- Usando a expressão
new foo.constructor();
serão criado dois objetos por derivação de foo
, lembrando que javascript não tem realmente o conceito de classe é só açúcar sintático da linguagem para as heranças baseadas nos protótipos.
- Através da expressão
new foo2.constructor();
será criado um objeto por derivação de foo2
.
function Foo() {
console.log("Sou Foo");
}
function Bar() {
console.log("Sou Bar");
}
const foo = new Foo() /// Sou Foo
new foo.constructor(); /// Sou Foo
Foo.prototype = {
constructor: Bar
}
new foo.constructor(); /// Sou Foo
const foo2 = new Foo() /// Sou Foo - não há substituição do constructor.
new foo2.constructor(); /// Sou Bar - Aqui há substituição do constructor.
Veja que no exemplo acima que a definição do constructor no protótipo irá afetar a propriedade Object.prototype.constructor
Também serão afetados o funcionamento do operador instanceof
que testa se a a função construtora aparece em algum lugar na cadeia de protótipos de um objeto.
function Foo() {
console.log("Sou Foo");
}
function Bar() {
console.log("Sou Bar");
}
const foo1 = new Foo() /// Sou Foo
Foo.prototype = {
constructor: Bar
}
const foo2 = new Foo(); /// Sou Foo
const foo3= new foo1.constructor(); /// Sou Foo
const foo4= new foo2.constructor(); /// Sou Bar
console.log(foo1 instanceof Foo); // false
console.log(foo2 instanceof Foo); // true
console.log(foo3 instanceof Foo); // true
console.log(foo4 instanceof Foo); // false
console.log(foo1 instanceof Bar); // false
console.log(foo2 instanceof Bar); // false
console.log(foo3 instanceof Bar); // false
console.log(foo4 instanceof Bar); // true
O mesmo se dá com código reflexivo:
function Foo() {
console.log("Sou Foo");
}
function Bar() {
console.log("Sou Bar");
}
Foo.prototype = {
constructor: Bar
}
const foo1 = new Foo(); /// Sou Foo
const foo2 = Reflect.construct(foo1.constructor, []); /// Sou Bar
const foo3 = Object.create(Foo.prototype); ///
console.log(foo1 instanceof Foo); // true
console.log(foo2 instanceof Foo); // false
console.log(foo3 instanceof Foo); // true
console.log(foo1 instanceof Bar); // false
console.log(foo2 instanceof Bar); // true
console.log(foo3 instanceof Bar); // false
Material de consulta: