6

Eu aprendi que ao criar uma função com métodos inseridos diretamente dentro dela vai criar um acúmulo desnecessário de memória, pois toda vez que a classe for instanciada cada instância teria seu próprio método ocupando um espaço diferente na memória.

Para resolver isso poderíamos acessar a propriedade prototype da função e colocar os métodos diretamente lá; contudo de forma automática 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.

A minha pergunta é qual a diferença da função sem a propriedade constructor, pois aparentemente os dois códigos funcionaram de forma semelhante?

Fonte do código: O Programador Objetivo.

Código com constructor:

function Person(name) {
    this.name = name;
}
Person.prototype = {
    constructor: Person,
    sayName: function (){
        console.log(this.name);
    },
    toString: function(){
        return "[Person" + this.name + "]";
    }
}

Código sem constructor:

function Person2(name) {
    this.name = name;
}
Person2.prototype = {
    sayName: function (){
        console.log(this.name);
    },
    toString: function(){
        return "[Person" + this.name + "]";
    }
}
0

1 Resposta 1

3

...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:

  1. 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]].
  2. 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]].
  3. 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:

2
  • 1
    +1...lá se foi o almoço... Commented 5/09/2023 às 22:40
  • 1
    @CmteCardeal. Acabei de comer um espetinho que valeu pelo almoço e lanche da tarde. :D Commented 5/09/2023 às 22:46

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 .