Artigos de Tecnologia e Negócios > Front-end

Construtores em JavaScript

alexandre-aquiles
alexandre-aquiles

Criar um objeto em JavaScript é bem tranquilo:


var produto1 = { 
    nome: "Blusa", 
    preco: 120, 
    calculaDesconto: function(){ 
                        //10% de desconto
                        return this.preco * 0.1; 
                        } 
}; 
produto1.calculaDesconto(); //12

Como faríamos pra ter um segundo produto, com o mesmo cálculo de desconto? Assim:


var produto1 = { 
    nome: "Blusa",
     preco: 120, calculaDesconto: function(){ 
         //10% de desconto
         return this.preco * 0.1;  
         } 
};

var produto2 = { 
    nome: "Calça", 
    preco: 300, 
    calculaDesconto: function(){ 
        //10% de desconto
        return this.preco * 0.1;
        } 
}; 
produto1.calculaDesconto(); //12 
produto2.calculaDesconto(); //30

Puxa... Perceba que repetimos exatamente o mesmo código no método calculaDesconto para os dois produtos. Além disso, repetimos o nome dos outros atributos, correndo o risco de digitá-los errados.

Como resolver isso? E se pegassemos a estrutura comum dos produtos (ter nome, preço e poder calcular desconto) e colocássemos em uma função criaProduto? Algo como:


function criaProduto(paramNome, paramPreco){ 
    return { nome: paramNome,
             preco: paramPreco,
             calculaDesconto: function(){ 
                 //10% de desconto
                 return this.preco \* 0.1;
                } 
            }; 
} 
var produto1 = criaProduto("Blusa", 120);
var produto2 = criaProduto("Calça", 300); 
produto1.calculaDesconto(); //12 
produto2.calculaDesconto(); //30

Perceba que na função criaProduto retornamos um objeto que terá sempre os nomes de atributos. Além disso, não repetimos o código da função de desconto :)

Interessante! E o mais bacana é que o JavaScript já vem com uma sintaxe para definir a estrutura comum entre os objetos:


function Produto(paramNome, paramPreco){ 
    this.nome = paramNome; 
    this.preco = paramPreco; 
    this.calculaDesconto = function(){ 
        //10% de desconto 
        return this.preco * 0.1; 
        }; 
} 
var produto1 = new Produto("Blusa", 120);
var produto2 = new Produto("Calça", 300); 
produto1.calculaDesconto(); //12 
produto2.calculaDesconto(); //30

Observe que:

A sintaxe anterior é a maneira correta de definir a estrutura para seus objetos e é chamada de construtor. Essa estrutura comum dos objetos muitas vezes é chamada de classe.

Na nova versão da linguagem JavaScript, o EcmaScript 2015, há uma outra maneira de criar um construtor (e a classe):


class Produto { 
    constructor(paramNome, paramPreco){
         this.nome = paramNome; 
         this.preco = paramPreco;     
    } calculaDesconto() { 
        return this.preco * 0.1; 
        } 
} 
var produto1 = new Produto("Blusa", 120);
var produto2 = new Produto("Calça", 300);
produto1.calculaDesconto(); //12 
produto2.calculaDesconto(); //30

Repare que:

A linguagem Javascript tem vários recursos poderosos. Nossos cursos de Javascript da Alura e a Formação Front-End da Caelum podem te ajudar a aprofundar nessa linguagem :)

Leia também:

Artigos de Tecnologia e Negócios > Front-end

Cursos profissionais de Front-end é na Alura, comece agora!

  • 1184 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1184 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1184 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1184 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Procurando planos para empresas?
Acesso por 1 ano
Estude 24h/dia onde e quando quiser
Novos cursos toda semana