Entendendo Funções Construtoras em JavaScript

Faaala, dev! Hoje vamos explorar o conceito de funções construtoras no JavaScript. A partir de pequenos passos entenderemos como organizar dados e criar objetos de forma eficiente. E para isso, vamos usar o exemplo bem comum de uma pessoa, com propriedades como nome e idade, e uma funcionalidade de andar.

Object Literal

Primeiro passo, criar um objeto literal. Um objeto literal é uma maneira simples de organizar dados em JavaScript. Veja o exemplo:


const pessoa1 = {
    nome: 'Goth',
    idade: 17,
    andar: function() {
        console.log('Pessoa está andando');
    }
};

const pessoa2 = {
    nome: 'Gomes',
    idade: 18,
    andar: function() {
        console.log('Pessoa está andando');
    }
};

// Usando os objetos
pessoa1.andar(); // Pessoa está andando
pessoa2.andar(); // Pessoa está andando

Aqui, criamos dois objetos pessoa1 e pessoa2 usando a notação literal de objeto. Cada um tem propriedades nome, idade e um método andar. No entanto, essa abordagem não é eficiente se precisarmos criar muitas pessoas, pois teríamos que repetir a estrutura para cada novo objeto.

Factory Function

Para resolver essa repetição, podemos usar uma Factory Function, que é uma função que retorna um objeto. Vamos ver como fazer isso:


function criarPessoa(nome, idade) {
    return {
        nome: nome,
        idade: idade,
        andar: function() {
            console.log(`${nome} está andando`);
        }
    };
}

const pessoa1 = criarPessoa('Goth', 17);
const pessoa2 = criarPessoa('Gomes', 18);

// Usando os objetos criados pela função fábrica
pessoa1.andar(); // Goth está andando
pessoa2.andar(); // Gomes está andando

Aqui, criamos uma função criarPessoa que retorna um objeto com as propriedades e métodos necessários. Isso permite criar novas pessoas sem repetir o código, apenas chamando a função com os parâmetros desejados.

Constructor Function(Função Construtora)

Agora, vamos ver como usar uma função construtora, que é uma maneira mais formal de criar objetos em JavaScript usando a palavra-chave new. A diferença principal é o uso da palavra-chave this dentro da função construtora para referir-se ao objeto que está sendo criado:


function Pessoa(nome, idade) {
    this.nome = nome;
    this.idade = idade;
    this.andar = function() {
        console.log(`${this.nome} está andando`);
    };
}

const pessoa1 = new Pessoa('Goth', 17);
const pessoa2 = new Pessoa('Gomes', 18);

// Usando os objetos criados pela função construtora
pessoa1.andar(); // Goth está andando
pessoa2.andar(); // Gomes está andando

Aqui, Pessoa é uma função construtora. Quando usamos new Pessoa('Goth', 17), um novo objeto é criado e this dentro da função construtora refere-se a esse novo objeto. Isso permite definir propriedades e métodos para o novo objeto.

Comparação entre Factory Function e Constructor Function

A principal diferença entre uma Factory Function e uma Function Constructor é o uso da palavra-chave new e this. Vamos comparar:

Factory Function:

Simples função que retorna um objeto.

Não usa this.

Não é instanciada com new.

Function Constructor:

Utiliza this para definir propriedades e métodos.

Deve ser chamada com new para criar um novo objeto.

Cria uma instância do objeto.

Vamos ver um exemplo comparativo com uma Factory Function e uma Constructor Function para animais:


// Factory Function
function criarAnimal(nome, classe) {
    return {
        nome: nome,
        classe: classe,
        andar: function() {
            console.log(`${nome} está andando`);
        }
    };
}

const animal1 = criarAnimal('Doguin', 'Cachorro');
animal1.andar(); // Doguin está andando

// Função Construtora
function Animal(nome, classe) {
    this.nome = nome;
    this.classe = classe;
    this.andar = function() {
        console.log(`${this.nome} está andando`);
    };
}

const animal2 = new Animal('Gatinho', 'Gato');
animal2.andar(); // Gatinho está andando

No exemplo acima, criarAnimal é uma Factory Function que retorna um objeto, enquanto Animal é uma Função Construtora que utiliza this e é instanciada com new.

Entender a diferença entre Factory Functions e Constructor Functions é essencial para escrever código JavaScript eficiente e organizado. Factory Functions são simples e diretas, mas Construtor Functions oferecem mais formalidade e o uso do this para criar instâncias de objetos. Pratique ambos os métodos e veja qual se adapta melhor às suas necessidades de desenvolvimento.

Já tem graduação? Dê seu próximo passo...

Última chance do ano de garantir sua matrícula de pós-graduação pelo preço atual antes do reajuste!

Dê seu próximo passo...