Classes no Javascript

Javascript
Tempo de leitura: 4 minutos

Classes no Javascript: As Classes, introduzidas no ECMAScript 6 (ES6), oferecem uma sintaxe clara e familiar para definir templates (moldes) para a criação de objetos. Embora sejam sintaticamente semelhantes às classes de linguagens como Java ou C++, em JavaScript, elas são fundamentalmente um syntactic sugar (açúcar sintático) sobre o mecanismo de herança baseada em protótipos.

Classes promovem a Orientação a Objetos (OO), facilitando a organização, o reuso e a manutenção do código.

1. Definição Básica e Inicialização

Uma classe é definida pela palavra-chave class seguida pelo nome (por convenção, sempre em PascalCase).

A. O Método constructor

O constructor é um método especial que é executado automaticamente quando um novo objeto é criado usando a palavra-chave new. Sua função é inicializar as propriedades da instância.

JavaScript

class Livro {
  // Chamado: new Livro("A Noite", 350)
  constructor(titulo, paginas) {
    this.titulo = titulo;
    this.paginas = paginas;
    this.lido = false; // Propriedade com valor padrão
  }

  // Método: Define o comportamento da instância
  ler() {
    this.lido = true;
    console.log(`${this.titulo} foi lido!`);
  }
}

// Criação de uma instância (Objeto)
const livroNovo = new Livro("A Montanha", 400); 
livroNovo.ler();

2. Herança: extends e super()

A Herança permite que uma nova classe (classe filha, ou subclasse) herde propriedades e métodos de uma classe existente (classe pai, ou superclasse), evitando a duplicação de código.

A. A Palavra-Chave extends

Define que uma classe herdará as características de outra.

B. A Palavra-Chave super()

Em uma classe filha que usa um constructor, você deve chamar super() antes de acessar this.

  • super(args): Chama o constructor da classe pai, passando os argumentos necessários para inicializá-lo.
  • super.metodo(): Permite chamar um método da classe pai.

JavaScript

class Publicacao {
  constructor(titulo) {
    this.titulo = titulo;
  }
  imprimirTitulo() {
    console.log(`Título: ${this.titulo}`);
  }
}

class Revista extends Publicacao {
  constructor(titulo, edicao) {
    super(titulo); // Chama Publicacao.constructor(titulo)
    this.edicao = edicao;
  }

  imprimirTitulo() {
    super.imprimirTitulo(); // Chama o método da classe Publicacao
    console.log(`Edição: ${this.edicao}`);
  }
}

const revistaX = new Revista("Tech Review", 5);
revistaX.imprimirTitulo();

3. Getters e Setters

Getters e Setters são métodos especiais que permitem executar lógica (como validação ou formatação) ao acessar ou modificar uma propriedade, tratando-a externamente como se fosse uma propriedade comum.

JavaScript

class Perfil {
  constructor(nomeCompleto) {
    this._nome = nomeCompleto; // Uso de underline para a propriedade interna
  }

  // GETTER: Executa quando você lê a propriedade (Ex: perfil.nome)
  get nome() {
    return this._nome.toUpperCase();
  }

  // SETTER: Executa quando você atribui um valor (Ex: perfil.nome = "Novo")
  set nome(novoNome) {
    if (novoNome.length < 3) {
      console.error("Nome muito curto!");
      return;
    }
    this._nome = novoNome;
  }
}

const perfil = new Perfil("Ana Silva");
console.log(perfil.nome);    // GETTER é chamado: ANA SILVA
perfil.nome = "João";        // SETTER é chamado

4. Propriedades e Métodos Estáticos

Métodos e propriedades estáticas são associados à Classe em si, e não às instâncias individuais. São úteis para funções utilitárias que não dependem do estado de um objeto.

JavaScript

class Calculadora {
  // Propriedade estática (acessada via Classe)
  static PI = 3.14159; 

  // Método estático (acessado via Classe)
  static somar(a, b) {
    return a + b;
  }
}

console.log(Calculadora.somar(5, 5)); // 10
// const calc = new Calculadora(); calc.somar(5, 5) // ERRO!

✅ Conclusão Classes no Javascript

Classes no Javascript: As Classes (ES6) são a sintaxe preferencial e mais limpa para implementar a Orientação a Objetos em JavaScript. Elas fornecem um template estruturado para a criação de objetos através do constructor e um mecanismo robusto de reuso de código via Herança (extends e super). Dominar essa sintaxe é essencial para desenvolver aplicações modulares, escaláveis e, principalmente, fáceis de ler e manter.

Toda jornada tem um início, e o início para se tornar um desenvolvedor web é dominar as seguintes tecnologias, que você encontra aqui mesmo:

HTML
HTML
CSS
CSS
Javascript
JavaScript

E se você gosta do nosso conteúdo, não deixe de contribuir adquirindo os serviços e produtos dos nossos apoiadores e empresas que somos associados:

Hospedagem Hostinger
Ofertas Amazon
Amazon Prime
Author: Thiago Rossi
Com mais de 20 anos de jornada na tecnologia, minha trajetória evoluiu do ensino técnico à arquitetura de sistemas complexos. Hoje, foco minha expertise no desenvolvimento de soluções de Inteligência Artificial nativa e análise de dados públicos, utilizando o ecossistema PHP para transformar dados brutos em transparência e eficiência. Como autor e desenvolvedor, acredito na democratização do conhecimento. Essa visão resultou em uma biblioteca de mais de 530 artigos gratuitos, cobrindo desde a base do WebDev e Infraestrutura até os bastidores da indústria de Jogos e IA. No universo de Game Design, sou autor do livro "GDD – O Guia Definitivo" e documento ativamente meus processos através de DevLogs, unindo rigor técnico e criatividade em projetos desenvolvidos com GDevelop 5. Meu compromisso é conectar engenharia de ponta com as reais oportunidades do mercado de tecnologia.