Resumo : neste tutorial, você aprenderá sobre a função construtora JavaScript e como usar a new
palavra-chave para criar um objeto.
Introdução às funções construtoras JavaScript
No tutorial de objetos JavaScript , você aprendeu como usar a sintaxe literal do objeto para criar um novo objeto.
Por exemplo, o seguinte cria um novo objeto person com duas propriedades firstName
e lastName
:
let person = {
firstName: 'John',
lastName: 'Doe'
};
Linguagem de código: JavaScript ( javascript )
Na prática, muitas vezes você precisa criar muitos objetos semelhantes ao person
objeto.
Para fazer isso, você pode usar uma função construtora para definir um tipo personalizado e o new
operador para criar vários objetos desse tipo.
Tecnicamente falando, uma função construtora é uma função regular com a seguinte convenção:
- O nome de uma função construtora começa com uma letra maiúscula como
Person
,Document
, etc. - Uma função construtora deve ser chamada apenas com o
new
operador.
Observe que o ES6 introduz a class
palavra-chave que permite definir um tipo personalizado. As classes são apenas açúcar sintático sobre as funções do construtor com algumas melhorias.
O exemplo a seguir define uma função construtora chamada Person
:
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
Linguagem de código: JavaScript ( javascript )
Neste exemplo, Person
é igual a uma função regular, exceto que seu nome começa com letra maiúscula P
.
Para criar uma nova instância do Person
, você usa o new
operador:
let person = new Person('John','Doe');
Linguagem de código: JavaScript ( javascript )
Basicamente, o new
operador faz o seguinte:
- Crie um novo objeto vazio e atribua-o à
this
variável. - Atribua os argumentos
'John'
e'Doe'
às propriedadesfirstName
elastName
do objeto. - Retorne o
this
valor.
É funcionalmente equivalente ao seguinte:
function Person(firstName, lastName) {
// this = {};
// add properties to this
this.firstName = firstName;
this.lastName = lastName;
// return this;
}
Linguagem de código: JavaScript ( javascript )
Portanto, a seguinte afirmação:
let person = new Person('John','Doe');
Linguagem de código: JavaScript ( javascript )
… retorna o mesmo resultado da seguinte instrução:
let person = {
firstName: 'John',
lastName: 'Doe'
};
Linguagem de código: JavaScript ( javascript )
No entanto, a função construtora Person
permite criar vários objetos semelhantes. Por exemplo:
let person1 = new Person('Jane','Doe')
let person2 = new Person('James','Smith')
Linguagem de código: JavaScript ( javascript )
Adicionando métodos às funções do construtor JavaScript
Um objeto pode ter métodos que manipulam seus dados. Para adicionar um método a um objeto criado por meio da função construtora, você pode usar a this
palavra-chave. Por exemplo:
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
this.getFullName = function () {
return this.firstName + " " + this.lastName;
};
}
Linguagem de código: JavaScript ( javascript )
Agora você pode criar um novo Person
objeto e invocar o getFullName()
método:
let person = new Person("John", "Doe");
console.log(person.getFullName());
Linguagem de código: JavaScript ( javascript )
Saída:
John Doe
O problema com a função construtora é que quando você cria várias instâncias de Person
, o this.getFullName()
é duplicado em todas as instâncias, o que não é eficiente em termos de memória.
Para resolver isso, você pode usar o protótipo para que todas as instâncias de um tipo personalizado possam compartilhar os mesmos métodos.
Retornando de funções construtoras
Normalmente, uma função construtora retorna implicitamente this
esse conjunto para o objeto recém-criado. Mas se tiver uma return
declaração, aqui estão as regras:
- Se
return
for chamado com um objeto, a função construtora retornará esse objeto em vez dethis
. - Se
return
for chamado com um valor diferente de um objeto, ele será ignorado.
Chamando uma função construtora sem a new
palavra-chave
Tecnicamente, você pode chamar uma função construtora como uma função regular sem usar a new
palavra-chave como esta:
let person = Person('John','Doe');
Linguagem de código: JavaScript ( javascript )
Nesse caso, o Person
just é executado como uma função normal. Portanto, o this
interior da Person
função não se liga à person
variável, mas ao objeto global .
Se você tentar acessar a propriedade firstName
ou lastName
, receberá um erro:
console.log(person.firstName);
Linguagem de código: CSS ( css )
Erro:
TypeError: Cannot read property 'firstName' of undefined
Linguagem de código: JavaScript ( javascript )
Da mesma forma, você não pode acessar o getFullName()
método, pois ele está vinculado ao objeto global.
person.getFullName();
Linguagem de código: CSS ( css )
Erro:
TypeError: Cannot read property 'getFullName' of undefined
Linguagem de código: JavaScript ( javascript )
Para evitar que uma função construtora seja invocada sem a new
palavra-chave, o ES6 introduziu a new.target
propriedade.
Se uma função construtora for chamada com a new
palavra-chave, new.target
retornará uma referência da função. Caso contrário, ele retorna undefined
.
O seguinte adiciona uma instrução à Person
função para mostrar new.target
ao console:
function Person(firstName, lastName) {
console.log(new.target);
this.firstName = firstName;
this.lastName = lastName;
this.getFullName = function () {
return this.firstName + " " + this.lastName;
};
}
Linguagem de código: JavaScript ( javascript )
O seguinte retorna undefined
porque a Person
função construtora é chamada como uma função regular:
let person = Person("John", "Doe");
Linguagem de código: JavaScript ( javascript )
Saída:
undefined
Linguagem de código: JavaScript ( javascript )
No entanto, o seguinte retorna uma referência à Person
função porque é chamada de new
palavra-chave:
let person = new Person("John", "Doe");
Linguagem de código: JavaScript ( javascript )
Saída:
[Function: Person]
Linguagem de código: JSON/JSON com comentários ( json )
Usando o new.target
, você pode forçar os chamadores da função construtora a usar a new
palavra-chave. Caso contrário, você pode gerar um erro como este:
function Person(firstName, lastName) {
if (!new.target) {
throw Error("Cannot be called without the new keyword");
}
this.firstName = firstName;
this.lastName = lastName;
}
Linguagem de código: JavaScript ( javascript )
Alternativamente, você pode tornar a sintaxe mais flexível criando um novo Person
objeto se os usuários da função construtora não usarem a new
palavra-chave:
function Person(firstName, lastName) {
if (!new.target) {
return new Person(firstName, lastName);
}
this.firstName = firstName;
this.lastName = lastName;
}
let person = Person("John", "Doe");
console.log(person.firstName);
Linguagem de código: JavaScript ( javascript )
Esse padrão é frequentemente usado em bibliotecas e estruturas JavaScript para tornar a sintaxe mais flexível.
Resumo
- A função construtora JavaScript é uma função regular usada para criar vários objetos semelhantes.