Resumo : neste tutorial, você aprenderá como usar o padrão construtor/protótipo JavaScript para definir um tipo personalizado no ES5.
Introdução ao padrão Construtor/Protótipo JavaScript
A combinação dos padrões construtor e protótipo é a forma mais comum de definir tipos customizados no ES5. Neste padrão:
- O padrão construtor define as propriedades do objeto.
- O padrão de protótipo define os métodos do objeto.
Ao utilizar este padrão, todos os objetos do tipo customizado compartilham os métodos definidos no protótipo. Além disso, cada objeto possui suas próprias propriedades.
Este padrão construtor/protótipo pega as melhores partes dos padrões construtor e protótipo.
Exemplo de construtor/protótipo JavaScript
Suponha que você queira definir um tipo personalizado chamado Person
que tenha:
- Duas propriedades
firstName
elastName
. - Um método
getFullName()
.
Primeiro, use a função construtora para inicializar as propriedades:
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
Linguagem de código: JavaScript ( javascript )
Nos bastidores, o mecanismo JavaScript define uma Person
função indicada pelo círculo e um objeto anônimo indicado pelo quadrado.
A Person
função possui a prototype
propriedade que faz referência a um objeto anônimo. O objeto anônimo possui uma constructor
propriedade que faz referência à Person
função:
Segundo, defina o getFullName()
método no prototype
objeto da Person
função:
Person.prototype.getFullName = function () {
return this.firstName + ' ' + this.lastName;
};
Linguagem de código: JavaScript ( javascript )
JavaScript define o getFullName()
método no Person.prototype
objeto assim:
Terceiro, crie várias instâncias do Person
tipo:
let p1 = new Person("John", "Doe");
let p2 = new Person("Jane", "Doe");
console.log(p1.getFullName());
console.log(p2.getFullName());
Linguagem de código: JavaScript ( javascript )
Saída:
'John Doe'
'Jane Doe'
Linguagem de código: JavaScript ( javascript )
Javascript cria dois objetos p1
e p2
. Esses objetos são vinculados ao Person.prototype
objeto por meio da [[Prototype]]
ligação:
Cada objeto tem suas próprias propriedades firstName
e lastName
. No entanto, eles compartilham o mesmo getFullName()
método.
Quando você chama o getFullName()
método no objeto p1
ou p2
, o mecanismo JavaScript procura o método nesses objetos. Como o mecanismo JavaScript não encontra o método ali, ele segue a ligação do protótipo e procura o método no Person.prototype
objeto.
Como o Person.prototype
objeto possui o getFullName()
método, o JavaScript para de pesquisar e executa o método.
Junte tudo:
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
Person.prototype.getFullName = function () {
return this.firstName + ' ' + this.lastName;
};
let p1 = new Person('John', 'Doe');
let p2 = new Person('Jane', 'Doe');
console.log(p1.getFullName());
console.log(p2.getFullName());
Linguagem de código: JavaScript ( javascript )
Aulas em ES6
ES6 introduz a palavra-chave class que torna o padrão construtor/protótipo mais fácil de usar. Por exemplo, o seguinte usa a class
palavra-chave para definir o mesmo Person
tipo:
class Person {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
getFullName() {
return this.firstName + " " + this.lastName;
}
}
let p1 = new Person('John', 'Doe');
let p2 = new Person('Jane', 'Doe');
console.log(p1.getFullName());
console.log(p2.getFullName());
Linguagem de código: JavaScript ( javascript )
Nesta sintaxe, class
move a inicialização da propriedade para o constructor
método. Ele também empacota o getFullName()
método no mesmo lugar que a constructor
função.
A sintaxe da classe parece mais limpa e menos detalhada. No entanto, é um açúcar sintático sobre o padrão construtor/protótipo com algumas melhorias.
Para obter mais informações sobre as classes, confira o tutorial da classe JavaScript .
Resumo
- Use o construtor/protótipo JavaScript para definir um tipo personalizado no ES5.
- Inicialize as propriedades do objeto na função construtora e defina métodos e propriedades que podem ser compartilhados por todas as instâncias no objeto protótipo.