← Voltar na listagem

30 de dezembro de 20233 min de leitura

Domine as Classes em JavaScript ES6

Mergulhe no mundo das Classes em JavaScript ES6 com nosso guia rápido e prático! Transforme seu código e eleve suas habilidades de programação

Desvendando as Classes em JavaScript ES6: Um Guia Descomplicado

Olá, pessoal! Hoje vamos mergulhar no mundo do JavaScript, mais especificamente nas classes introduzidas no ES6. Se você está acostumado a lidar com funções e protótipos, prepare-se para um upgrade no seu código!

O Que São Classes em JavaScript?

Antes do ES6, o JavaScript lidava com objetos e herança de uma maneira um tanto... digamos, única. Usávamos funções e protótipos para simular classes. Mas em 2015, o ES6 trouxe uma sintaxe mais limpa e familiar para quem já vinha de outras linguagens orientadas a objetos: as classes.

Sintaxe Básica de uma Classe

Vamos começar com um exemplo simples. Imagine que você está construindo um site e precisa de uma classe para representar um usuário.

class Usuario {
    constructor(nome, email) {
        this.nome = nome;
        this.email = email;
    }

    exibirInfos() {
        return `${this.nome} (${this.email})`;
    }
}

Neste exemplo, Usuario é uma classe com um construtor e um método. O construtor é chamado automaticamente quando você cria um novo objeto dessa classe, e é onde você inicializa as propriedades do objeto.

Criando Instâncias

Para criar uma instância da classe Usuario, você usaria o new:

let usuario1 = new Usuario("João", "joao@example.com");
console.log(usuario1.exibirInfos()); // João (joao@example.com)

Herança de Classes

Uma das grandes vantagens das classes é a facilidade de herança. Digamos que você queira uma classe Admin que tenha todas as propriedades de Usuario, mas com algumas extras. Veja só:

class Admin extends Usuario {
    constructor(nome, email, nivel) {
        super(nome, email);
        this.nivel = nivel;
    }

    exibirInfos() {
        return `${super.exibirInfos()} - Nível: ${this.nivel}`;
    }
}

let admin = new Admin("Maria", "maria@example.com", "Superior");
console.log(admin.exibirInfos()); // Maria (maria@example.com) - Nível: Superior

Aqui, Admin herda de Usuario. Usamos super para chamar o construtor da classe pai. Isso é essencial para garantir que todas as propriedades da classe pai sejam inicializadas corretamente.

Métodos Estáticos

Às vezes, você quer um método que possa ser chamado na própria classe, não em suas instâncias. Para isso, usamos métodos estáticos.

class Utilitario {
    static numeroAleatorio() {
        return Math.floor(Math.random() * 100);
    }
}

console.log(Utilitario.numeroAleatorio()); // retorna um número aleatório

Neste caso, numeroAleatorio é um método estático da classe Utilitario e pode ser chamado sem criar uma instância da classe.

Conclusão

As classes em JavaScript ES6 são muito mais do que um simples enfeite. Elas tornam a criação de objetos e a herança bem mais fáceis e diretas. Se você já programou em Java ou C#, vai achar essa forma de escrever código bem familiar e confortável.

Mas não se esqueça, o JavaScript ainda trabalha com protótipos por trás das cortinas. As classes são basicamente uma maneira mais chique e organizada de lidar com eles. Então, se jogue, experimente e veja como elas podem deixar seu código mais arrumado!

Espero que vocês tenham curtido essa exploração das classes em JavaScript. Até a próxima! 🚀