Hierarquia dos membros de um objeto com prototype §

---

Ao acessar um membro de um objeto, primeiro o motor do JavaScript tenta encontrar este membro na seguinte ordem:

1. Próprio objeto
2. Cadeia de prototype
3. …
4. null (topo da hierarquia)

Exemplo §

Método do objeto sobrescrevendo o do prototype §

function Pessoa(nome, sobrenome) {
this.nome = nome;
this.sobrenome = sobrenome;
this.nomeCompleto = () => `OBJETO ${this.nome} ${this.sobrenome}`;
}
 
Pessoa.prototype.nomeCompleto = () => `PROTOTYPE ${this.nome} ${this.sobrenome}`;
 
const pessoa = new Pessoa("Luiz", "Otávio");
 
console.log(pessoa.nomeCompleto()); // OBJETO Luiz Otávio

Utilização do prototype (mais performático) §

function Pessoa(nome, sobrenome) {
this.nome = nome;
this.sobrenome = sobrenome;
}
 
Pessoa.prototype.nomeCompleto = function() {
return `PROTOTYPE ${this.nome} ${this.sobrenome}`;
}
 
const pessoa = new Pessoa("Luiz", "Otávio");
 
console.log(pessoa.nomeCompleto()); // PROTOTYPE Luiz Otávio

Cadeia de prototypes §

Objeto Date §

data (nome da instância de Date) -> Date.prototype -> Object.prototype

Objeto Pessoa §

  function Pessoa(nome, sobrenome) {
  this.nome = nome;
  this.sobrenome = sobrenome;
}
 
Pessoa.prototype.nomeCompleto = function() {
  return `PROTOTYPE ${this.nome} ${this.sobrenome}`;
}
 
const pessoa = new Pessoa("Luiz", "Otávio");

pessoa (nome da instância de Pessoa) -> Pessoa.prototype -> Object.prototype

Nota

Object é o “pai” de todos os objetos do JavaScript

Referências §

---

• Curso de JavaScript e TypeScript do básico ao avançado