JavaScript: Classes e Módulos em JavaScript

Última atualização: 2026-10-13

Conforme os projetos crescem, você precisa de mais do que funções e variáveis espalhadas — precisa de estrutura organizada de código. Classes fornecem padrões orientados a objetos, e Módulos fornecem isolamento de código no nível de arquivo. Juntos, formam a base de projetos JS modernos.

Declarações relacionadas：class set

1. Sintaxe de Classe

Uma Classe é um modelo para criar objetos — açúcar sintático sobre funções construtoras.

<script>
class NomeClasse {
  constructor(params) {
    this.propriedade = params;
  }
  metodo() {
    // ...
  }
}
</script>

<div id="output" style="padding: 10px; border: 1px solid #ccc;"></div>

<script>
const output = document.getElementById('output');

class Aluno {
  constructor(nome, idade, serie) {
    this.nome = nome;
    this.idade = idade;
    this.serie = serie;
  }

  apresentar() {
    return 'Meu nome é ' + this.nome + ', tenho ' + this.idade + ' anos, estou no ' + this.serie + '.';
  }

  estudar(materia) {
    return this.nome + ' está estudando ' + materia + '.';
  }
}

const a1 = new Aluno('Alice', 12, '6º ano');
const a2 = new Aluno('Bob', 11, '5º ano');

output.textContent = a1.apresentar() + '\n' + a2.apresentar() + '\n' + a1.estudar('Matemática');
</script>

2. Propriedades e Métodos

(1) Propriedades e Métodos de Instância

Propriedades e métodos definidos com this.xxx dentro do constructor pertencem à instância — cada objeto recebe sua própria cópia.

(2) Métodos Estáticos

Métodos definidos com a palavra-chave static pertencem à classe em si, não às instâncias. Chame-os via NomeClasse.metodo().

(3) Getters e Setters

Use as palavras-chave get e set para definir "propriedades virtuais" — funções que executam automaticamente na leitura/escrita.

<div id="output" style="white-space: pre; font-family: monospace; padding: 10px; border: 1px solid #ccc;"></div>
<script>
const output = document.getElementById('output');

class Pessoa {
  constructor(primeiroNome, sobrenome) {
    this.primeiroNome = primeiroNome;
    this.sobrenome = sobrenome;
  }

  get nomeCompleto() {
    return this.primeiroNome + ' ' + this.sobrenome;
  }

  set nomeCompleto(valor) {
    const partes = valor.split(' ');
    this.primeiroNome = partes[0];
    this.sobrenome = partes[1];
  }
}

const p = new Pessoa('João', 'Silva');
output.textContent = 'nomeCompleto: ' + p.nomeCompleto + '\n';
p.nomeCompleto = 'Maria Santos';
output.textContent += 'Após alteração: ' + p.nomeCompleto;
</script>

▶ Exemplo: Métodos Estáticos e Getters/Setters

3. Herança

extends permite que uma classe filha herde propriedades e métodos de uma classe pai. super chama o construtor ou métodos do pai.

▶ Exemplo: Demonstração de Herança

4. Módulos ES

Módulos são a unidade de organização de código do JS. Um módulo = um arquivo. Variáveis dentro de um módulo são privadas por padrão — apenas itens explicitamente exportados são acessíveis externamente.

(1) Exportações/Importações Nomeadas

<script>
// math.js
export const PI = 3.14;
export function somar(a, b) { return a + b; }

// app.js
import { PI, somar } from './math.js';
</script>

(2) Exportações/Importações Padrão

<script>
// logger.js
export default function log(msg) { console.log(msg); }

// app.js
import log from './logger.js';
</script>

(3) Usando Módulos em HTML

Simplesmente adicione type="module" à tag script.

<script type="module">
  import { somar } from './math.js';
  console.log(somar(1, 2));
</script>

▶ Exemplo: Simulação de Módulo em Arquivo Único (Módulo Inline)

Em projetos reais, módulos devem ser divididos em arquivos separados. Aqui simulamos dentro de um único arquivo HTML usando type="module".

Declarações relacionadas：class set

❓ Perguntas Frequentes

📖 Resumo

• class é açúcar sintático sobre construtores; constructor é o inicializador, e métodos são definidos no protótipo
• Métodos static pertencem à classe, não às instâncias — ideais para métodos utilitários e de fábrica
• get/set definem propriedades virtuais que interceptam leituras/escritas para validação ou computação
• extends habilita herança; o constructor filho deve chamar super() primeiro
• Módulos ES usam export/import para isolamento e reuso de código; type="module" os habilita em HTML
• Módulos organizam código por funcionalidade, permitem carregamento preguiçoso e evitam poluição do namespace global

📝 Exercícios

1. Básico: Crie uma classe Retangulo com propriedades largura e altura, além dos métodos obterArea() e obterPerimetro().
2. Intermediário: Adicione um getter get area() e setter set area(valor) ao Retangulo (definir área ajusta largura/altura proporcionalmente). Depois crie uma subclasse Quadrado que estenda Retangulo.
3. Desafio: Projete uma classe GerenciadorEventos com métodos on(evento, callback), off(evento, callback) e emit(evento, dados) para simular um sistema simples de eventos (dica: use um objeto mapeando eventos para arrays de callbacks).

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós