Classes JavaScript
Classes oferecem uma sintaxe para definir objetos com construtor e métodos. new cria uma instância; a demonstração termina com tea / regular / mint.
Definir uma classe e seu construtor
O construtor é executado ao criar uma instância e inicializa seus campos.
class Drink {
constructor(name, size) {
this.name = name;
this.size = size;
}
}
const order = new Drink("tea", "regular");
O construtor guarda os valores no novo objeto. this representa a instância atual, e new Drink(...) cria a instância e executa o construtor.
Adicionar um método de instância
Métodos descrevem ações que as instâncias podem realizar.
class Drink {
constructor(name, size) { this.name = name; this.size = size; }
label() { return this.name + " / " + this.size; }
}
const order = new Drink("tea", "regular");
console.log(order.label());
order.label() retorna tea / regular. Os métodos da classe ficam no protótipo e são compartilhados pelas instâncias.
Estender uma classe
extends cria a herança, super(...) chama o construtor pai e super.label() usa o método herdado.
class SpecialDrink extends Drink {
constructor(name, size, extra) { super(name, size); this.extra = extra; }
fullLabel() { return super.label() + " / " + this.extra; }
}
const special = new SpecialDrink("tea", "regular", "mint");
console.log(special.fullLabel());
SpecialDrink herda label() e adiciona extra e fullLabel(). A saída é tea / regular / mint. Um construtor derivado deve chamar super(...) antes de usar this.
Métodos estáticos e campos privados
Um método estático pertence à classe, não às instâncias. Um campo como #secret só pode ser lido dentro da classe.
class Drink {
static kind() { return "drink"; }
#secret = "recipe";
reveal() { return this.#secret; }
}
console.log(Drink.kind());
console.log(new Drink().reveal());
Chame o método estático como Drink.kind(), não como new Drink().kind(). Fora da classe, drink.#secret não pode ser acessado.
Ver classes em uma página
Esta demonstração escreve o resultado de uma instância especial no documento.
<p id="result"></p>
<script>
class Drink { constructor(name,size){this.name=name;this.size=size;} label(){return this.name+" / "+this.size;} }
class SpecialDrink extends Drink { constructor(name,size,extra){super(name,size);this.extra=extra;} fullLabel(){return super.label()+" / "+this.extra;} }
const order=new SpecialDrink("tea","regular","mint");
document.querySelector("#result").textContent=order.fullLabel();
</script>
A página mostra exatamente tea / regular / mint. Uma declaração de classe não pode ser usada antes dela; isso é a temporal dead zone, não uma afirmação de hoisting.
Classes organizam a criação e o comportamento de objetos. Elas diferem de módulos, que organizam arquivos, e de um método escrito diretamente em um objeto.
📊 Recursos das classes
| Sintaxe | Objetivo | Exemplo |
|---|---|---|
constructor(...) |
Inicializar uma instância | constructor(name, size) |
this |
Referir-se à instância atual | this.name = name |
extends e super |
Reutilizar o comportamento pai | class SpecialDrink extends Drink |
static |
Definir método da classe | Drink.kind() |
A tabela resume a sintaxe essencial de classes usada nesta lição.
Exercício prático
Crie Drink com name, size e label(). Depois crie SpecialDrink com extends, adicione extra e faça fullLabel() mostrar tea / regular / mint. Chame também Drink.kind().
Erros comuns
Não chame método de instância na classe, não esqueça super(...) no construtor derivado e não use this antes dele.
Ponto principal
O construtor inicializa campos, os métodos são compartilhados pelo protótipo e a herança reutiliza comportamento.
🧠 Teste Seu Conhecimento
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo