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.

Lote Final da Black Friday 2024

Encerramento das ofertas de Black Friday! Transforme sua carreira hoje mesmo!

Lote Final da Black Friday 2024

Última chance da Black Friday.

Object Literal

Factory Function

Constructor Function(Função Construtora)

Comparação entre Factory Function e Constructor Function

Lote Final da Black Friday 2024

Lote Final da Black Friday 2024

Aprenda programação do zero e DE GRAÇA