Explique como funciona a herança de protótipos

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

• Inheritance and the prototype chain | MDN