JavaScript Prototypal Inheritance

Sumário: neste tutorial, você aprenderá como funciona o JavaScript Prototypal Inheritance.

Introdução ao JavaScript prototypal inheritance

Se você já trabalhou com outras linguagens de programação orientadas a objetos como Java ou C++, você já está familiarizado com o conceito de herança.

Neste paradigma de programação, uma classe é um plano para criar objetos. Se você quiser que uma nova classe reutilize a funcionalidade de uma classe existente, você pode criar uma nova classe que estenda a classe existente. Isto é chamado herança clássica.

JavaScript não usa herança clássica. Em vez disso, ele usa prototypal inheritance.

Em prototypal inheritance, um objeto “herda” propriedades de outro objeto através do link do protótipo.

JavaScript prototypal inheritance e __proto__

Vamos dar um exemplo para tornar o conceito mais claro.

O seguinte define um person objecto:

Code language: JavaScript (javascript)

O objecto person tem duas propriedades:

• name que detém um valor de string.
• greet que detém um valor que por acaso é uma função. O greet é conhecido como um método do person objeto.

Por padrão, o JavaScript fornece uma função Object() e um objeto protótipo que pode ser acessado através da propriedade prototype do objeto Object() função:

Quando você usa a sintaxe literal do objeto para definir um objeto, o objeto é uma instância do objeto Object. Portanto, a expressão person instanceof Object retorna true:

Code language: JavaScript (javascript)

Output:

Code language: JavaScript (javascript)

O objeto person também se liga ao objeto Object.prototype através do objeto ] linkage.

Em outras palavras, você pode acessar qualquer propriedade do objeto Object.prototype através do objeto person. Por exemplo:

Code language: JavaScript (javascript)

Output:

Code language: JavaScript (javascript)

O é a conversão padrão de um objeto para string.

Quando você chama o método toString() no objeto person, o JavaScript não consegue encontrá-lo. Então o JavaScript segue a cadeia de protótipos e procura o método no objecto Object.prototype. JavaScript pode encontrar o método toString() no objeto Object.prototype e o executa.

Para acessar o protótipo do objeto person, você pode usar seu método __proto__ propriedade:

Code language: JavaScript (javascript)

Resultado:

Code language: JavaScript (javascript)

O seguinte define outro objeto chamado teacher. O objeto teacher tem o método teach():

Code language: JavaScript (javascript)

Se você quiser que o objeto teacher acesse todas as propriedades do objeto person, você pode definir o protótipo do objeto teacher para o objeto person:

Code language: JavaScript (javascript)

Nota que você nunca deve usar o __proto__ no código de produção. Isto é apenas para fins de aprendizagem e compreensão.

Agora, o objecto teacher pode aceder ao método name propriedade e greet() a partir do objecto person através do protótipo chain:

Code language: JavaScript (javascript)

Output:

Code language: JavaScript (javascript)

Quando chama o método greet() no objecto teacher, o JavaScript encontra-o primeiro no objecto teacher.

Desde que o JavaScript não encontra o método no objecto teacher, segue a cadeia de protótipos e procura o método no objecto person. Desta vez, o JavaScript pode encontrar o método no objecto person e executa o objecto greet() method.

Em JavaScript, dizemos que o objecto teacher herda as propriedades do objecto person. E isto é prototypal inheritance.

Uma maneira padrão de implementar prototypal inheritance em ES5

ES5 forneceu uma maneira padrão de trabalhar com prototypal inheritance usando o método Object.create().

Nota que agora você deve usar o mais novo ES6 class e extends palavras-chave para implementar inheritance. É muito mais simples.

O método Object.create() cria um novo objecto e usa um objecto existente como protótipo do novo objecto:

Code language: JavaScript (javascript)

O método Object.create() aceita dois argumentos:

• O primeiro argumento (proto) é um objecto usado como protótipo para o novo objecto.
• O segundo argumento (propertiesObject), se fornecido, é um objeto opcional que define propriedades adicionais para o novo objeto.

Suponha que você tenha um person objeto:

Code language: JavaScript (javascript)

O seguinte cria um objeto vazio teacher com o __proto__ do person objeto:

Code language: JavaScript (javascript)

A seguir, você pode definir propriedades para o objeto teacher:

Code language: JavaScript (javascript)

Or você pode fazer todos estes passos em uma declaração como segue:

Code language: JavaScript (javascript)

ES5 também introduziu o método Object.getPrototypeOf() que retorna o protótipo de um objeto. Por exemplo:

Code language: JavaScript (javascript)

Output:

Code language: JavaScript (javascript)

Sumário

• Inheritance permite que um objeto use as propriedades e métodos de outro objeto.
• JavaScript usa a herança protótipo obtida através do link do protótipo.