50 lines
2.0 KiB
Plaintext
50 lines
2.0 KiB
Plaintext
---
|
|
title: 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](https://davidwalsh.name/javascript-objects).
|
|
|
|
## Exemplo de Herança de Protótipos
|
|
|
|
```js
|
|
// 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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)
|