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:
this
=
ao invés de :
para atribuir;
new
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:
class
, e não mais uma function
constructor
calculaDesconto
fica a parte, sem o this
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:
Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.
Certificado de que assistiu o curso e finalizou as atividades
Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets
Cursos de introdução a tecnologia através de games, apps e ciência
Reforço online de inglês e espanhol para aprimorar seu conhecimento
Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.
Certificado de que assistiu o curso e finalizou as atividades
Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets
Cursos de introdução a tecnologia através de games, apps e ciência
Reforço online de inglês e espanhol para aprimorar seu conhecimento
Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.
Certificado de que assistiu o curso e finalizou as atividades
Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets
Cursos de introdução a tecnologia através de games, apps e ciência
Reforço online de inglês e espanhol para aprimorar seu conhecimento
Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.
Certificado de que assistiu o curso e finalizou as atividades
Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets
Cursos de introdução a tecnologia através de games, apps e ciência
Reforço online de inglês e espanhol para aprimorar seu conhecimento
Acesso completo
durante 1 ano
Estude 24h/dia
onde e quando quiser
Novos cursos
todas as semanas