Padrão de construtor/protótipo JavaScript

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 Personque tenha:

• Duas propriedades firstNamee lastName.
• 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 Personfunção indicada pelo círculo e um objeto anônimo indicado pelo quadrado.

A Personfunção possui a prototypepropriedade que faz referência a um objeto anônimo. O objeto anônimo possui uma constructorpropriedade que faz referência à Personfunção:

Segundo, defina o getFullName()método no prototypeobjeto da Personfunção:

Person.prototype.getFullName = function () {
  return this.firstName + ' ' + this.lastName;
};Linguagem de código:  JavaScript  ( javascript )

JavaScript define o getFullName()método no Person.prototypeobjeto assim:

Terceiro, crie várias instâncias do Persontipo:

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 p1e p2. Esses objetos são vinculados ao Person.prototypeobjeto por meio da [[Prototype]]ligação:

Cada objeto tem suas próprias propriedades firstNamee lastName. No entanto, eles compartilham o mesmo getFullName()método.

Quando você chama o getFullName()método no objeto p1ou 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.prototypeobjeto.

Como o Person.prototypeobjeto 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 classpalavra-chave para definir o mesmo Persontipo:

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, classmove a inicialização da propriedade para o constructormétodo. Ele também empacota o getFullName()método no mesmo lugar que a constructorfunçã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.