Quiz

Explique como funciona a herança de protótipos

Topics
JavaScriptOOP
Edit on GitHub

Essa é uma pergunta extremamente comum em entrevistas de JavaScript. Todos os objetos JavaScript têm uma propriedade __proto__ com exceção de objetos criados com object.create(null), ou seja, uma referência a outro objeto, que é chamado de "protótipo" do objeto. Quando uma propriedade é acessada em um objeto e se a propriedade não é encontrada nesse objeto, o motor de JavaScript olha para o objeto __proto__, e o __proto__ do __proto__ e assim por diante, até que encontre a propriedade definida em um dos __proto__s ou até chegar ao final da cadeia de protótipos. Este comportamento simula a herança clássica, mas é realmente mais de delegação do que herança.

Exemplo de Herança de Protótipos

// Construtor de objeto pai.
function Animal(name) {
  this.name = name;
}


// Adiciona um método ao protótipo do objeto pai.
Animal.prototype.makeSound = function () {
  console.log('O ' + this.constructor.name + ' faz um som.');
};


// Construtor filho.
function Dog(name) {
  Animal.call(this, name); // Chama o construtor pai.
}


// Set the child object's prototype to be the parent's prototype.
Object.setPrototypeOf(Dog.prototype, Animal.prototype);


// Adiciona um método ao protótipo do objeto filho.
Dog.prototype.bark = function () {
  console.log('Woof!');
};


// Criar uma nova instância do Cachorro.
const bolt = new Dog('Bolt');


// Chama métodos no objeto filho.
console.log(bolt.name); // "Bolt"
bolt.makeSound(); // "O Dog faz um som."
bolt.bark(); // "Woof!"

As coisas a observar são:

  • .makeSound não está definido em Dog, então o navegador aumenta a cadeia de protótipos e encontra .makeSound para fora do Animal herdado.
  • Using Object.create to build the inheritance chain is no longer recommended. Use Object.setPrototypeOf instead.

Resources

Edit on GitHub