Função construtora JavaScript

Resumo : neste tutorial, você aprenderá sobre a função construtora JavaScript e como usar a newpalavra-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 firstNamee 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 personobjeto.

Para fazer isso, você pode usar uma função construtora para definir um tipo personalizado e o newoperador 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 newoperador.

Observe que o ES6 introduz a classpalavra-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 newoperador:

let person = new Person('John','Doe');Linguagem de código:  JavaScript  ( javascript )

Basicamente, o newoperador faz o seguinte:

• Crie um novo objeto vazio e atribua-o à thisvariável.
• Atribua os argumentos 'John'e 'Doe'às propriedades firstNamee lastNamedo objeto.
• Retorne o thisvalor.

É 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 Personpermite 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 thispalavra-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 Personobjeto 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 thisesse conjunto para o objeto recém-criado. Mas se tiver uma returndeclaração, aqui estão as regras:

• Se returnfor chamado com um objeto, a função construtora retornará esse objeto em vez de this.
• Se returnfor chamado com um valor diferente de um objeto, ele será ignorado.

Chamando uma função construtora sem a newpalavra-chave

Tecnicamente, você pode chamar uma função construtora como uma função regular sem usar a newpalavra-chave como esta:

let person = Person('John','Doe');Linguagem de código:  JavaScript  ( javascript )

Nesse caso, o Personjust é executado como uma função normal. Portanto, o thisinterior da Personfunção não se liga à personvariável, mas ao objeto global .

Se você tentar acessar a propriedade firstNameou lastName, receberá um erro:

console.log(person.firstName);Linguagem de código:  CSS  ( css )

Erro:

TypeError: Cannot read property 'firstName' of undefinedLinguagem 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 undefinedLinguagem de código:  JavaScript  ( javascript )

Para evitar que uma função construtora seja invocada sem a newpalavra-chave, o ES6 introduziu a new.targetpropriedade.

Se uma função construtora for chamada com a newpalavra-chave, new.targetretornará uma referência da função. Caso contrário, ele retorna undefined.

O seguinte adiciona uma instrução à Personfunção para mostrar new.targetao 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 undefinedporque a Personfunção construtora é chamada como uma função regular:

let person = Person("John", "Doe");Linguagem de código:  JavaScript  ( javascript )

Saída:

undefinedLinguagem de código:  JavaScript  ( javascript )

No entanto, o seguinte retorna uma referência à Personfunção porque é chamada de newpalavra-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 newpalavra-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 Personobjeto se os usuários da função construtora não usarem a newpalavra-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.