Resumo : neste tutorial, você aprenderá como funciona a herança prototípica do JavaScript.
Introdução à herança prototípica de JavaScript
Se você já trabalhou com outras linguagens de programação orientadas a objetos, como Java ou C++, está familiarizado com o conceito de herança.
Neste paradigma de programação, uma classe é um modelo para a criação de objetos. Se quiser que uma nova classe reutilize a funcionalidade de uma classe existente, você poderá criar uma nova classe que estenda a classe existente. Isso é chamado de herança clássica .
JavaScript não usa herança clássica . Em vez disso, ele usa herança prototípica .
Na herança prototípica, um objeto “herda” propriedades de outro objeto por meio da ligação de protótipo .
Herança prototípica de JavaScript e __proto__
Vamos dar um exemplo para deixar o conceito claro.
O seguinte define um personobjeto:
let person = {
name: "John Doe",
greet: function () {
return "Hi, I'm " + this.name;
}
};Linguagem de código: JavaScript ( javascript )Neste exemplo, o personobjeto possui uma propriedade e um método:
nameé uma propriedade que armazena o nome da pessoa.greeté um método que retorna uma saudação como uma string.
Por padrão, o mecanismo JavaScript fornece uma função integrada Object()e um objeto anônimo que pode ser referenciado por Object.prototype:
Observe que o círculo representa uma função enquanto o quadrado representa um objeto.
O objeto person possui um link para o objeto anônimo referenciado pela Object()função. O [[Prototype]]representa a ligação:
Isso significa que o personobjeto pode chamar qualquer método definido no objeto anônimo referenciado pelo Object.prototype.
Por exemplo, o seguinte mostra como chamar o toString()método através do personobjeto:
console.log(person.toString());Linguagem de código: JavaScript ( javascript )Saída:
[object Object]Linguagem de código: JavaScript ( javascript )A [object Object]é a representação de string padrão de um objeto.
Quando você chama toString()o método via person, o mecanismo JavaScript não consegue encontrá-lo no personobjeto. Portanto, ele segue a cadeia de protótipos e busca o método no Object.prototypeobjeto.
Como o mecanismo JavaScript pode encontrar o toString()método no Object.prototypeobjeto, ele executa o toString()método.
Para acessar o protótipo do personobjeto, você pode usar a __proto__propriedade da seguinte forma
console.log(person.__proto__);Linguagem de código: JavaScript ( javascript )Observe que você nunca deve usar a __proto__propriedade no código de produção. Por favor, use-o apenas para fins de demonstração.
O seguinte mostra person.__proto__e Object.prototypefaz referência ao mesmo objeto:
console.log(person.__proto__ === Object.prototype); // trueLinguagem de código: JavaScript ( javascript )O seguinte define o teacherobjeto que possui o teach()método:
let teacher = {
teach: function (subject) {
return "I can teach " + subject;
}
};Linguagem de código: JavaScript ( javascript )Assim como o personobjeto, as teacher.__proto__referências são Object.prototypeconforme ilustrado na imagem a seguir:
Se você deseja que o teacherobjeto acesse todos os métodos e propriedades do personobjeto, você pode definir o protótipo do teacherobjeto para o personobjeto assim:
teacher.__proto__ = person;Linguagem de código: JavaScript ( javascript )
Agora, o teacherobjeto pode acessar a namepropriedade e greet()o método do personobjeto por meio da cadeia de protótipos:
console.log(teacher.name);
console.log(teacher.greet());Linguagem de código: JavaScript ( javascript )Saída:
John Doe
Hi, I'm John DoeLinguagem de código: JavaScript ( javascript )Quando você chama o greet()método no teacherobjeto, o mecanismo JavaScript o encontra primeiro no teacherobjeto.
Como o mecanismo JavaScript não consegue encontrar o método no teacherobjeto, ele segue a cadeia de protótipos e procura o método no personobjeto. Como o mecanismo JavaScript pode encontrar o greet()método no personobjeto, ele executa o método.
Em JavaScript, dizemos que o teacherobjeto herda os métodos e propriedades do personobjeto. Esse tipo de herança é chamado de herança prototípica .
Uma maneira padrão de implementar herança prototípica no ES5
ES5 forneceu uma maneira padrão de trabalhar com herança prototípica usando o Object.create()método.
Observe que agora você deve usar o ES6 mais recente classe extendspalavras-chave para implementar herança . É muito mais simples.
O Object.create()método cria um novo objeto e usa um objeto existente como protótipo do novo objeto:
Object.create(proto, [propertiesObject])Linguagem de código: JavaScript ( javascript )O Object.create()método aceita dois argumentos:
- O primeiro argumento (
proto) é um objeto usado como protótipo para o novo objeto. - O segundo argumento (
propertiesObject), se fornecido, é um objeto opcional que define propriedades adicionais para o novo objeto.
Suponha que você tenha um personobjeto:
let person = {
name: "John Doe",
greet: function () {
return "Hi, I'm " + this.name;
}
};Linguagem de código: JavaScript ( javascript )O seguinte cria um teacherobjeto vazio com o __proto__do personobjeto:
let teacher = Object.create(person);Linguagem de código: JavaScript ( javascript )Depois disso, você pode definir propriedades para o teacherobjeto:
teacher.name = 'Jane Doe';
teacher.teach = function (subject) {
return "I can teach " + subject;
}Linguagem de código: JavaScript ( javascript )Ou você pode executar todas essas etapas em uma instrução da seguinte maneira:
let teacher = Object.create(person, {
name: { value: 'John Doe' } ,
teach: { value: function(subject) {
return "I can teach " + subject;
}}
});Linguagem de código: JavaScript ( javascript )ES5 também introduziu o Object.getPrototypeOf()método que retorna o protótipo de um objeto. Por exemplo:
console.log(Object.getPrototypeOf(teacher) === person);Linguagem de código: JavaScript ( javascript )Saída:
trueLinguagem de código: JavaScript ( javascript )Resumo
- A herança permite que um objeto use as propriedades e métodos de outro objeto sem duplicar o código.
- JavaScript usa a herança prototípica.
