Classes em JavaScript

Este artigo explica as classes em JavaScript.

YouTube Video

Classes em JavaScript

Em JavaScript, uma classe incorpora o conceito de programação orientada a objetos e serve como um modelo para objetos. Com as classes, você pode definir de forma sucinta as propriedades e métodos de um objeto, melhorando a reutilização e a organização do código. A sintaxe de classes foi introduzida no JavaScript com o ES6.

Definição de Classe

Uma classe é definida com a palavra-chave class e é geralmente inicializada com um método chamado constructor.

 1class Person {
 2    // Constructor method (called when the class is instantiated)
 3    constructor(name, age) {
 4        this.name = name; // Property definition
 5        this.age = age;
 6    }
 7
 8    // Method definition
 9    greet() {
10        return `Hello, my name is ${this.name}`;
11    }
12}
13
14// Instantiation of the class
15const alice = new Person("Alice", 25);
16console.log(alice.greet()); // Hello, my name is Alice

• Definimos uma classe com class Person.
• O constructor é um método especial que é automaticamente chamado quando um objeto é criado.
• A palavra-chave this refere-se à instância (objeto) da classe dentro da classe.

Propriedades e Métodos da Classe

Uma classe pode definir propriedades e métodos. As propriedades representam os atributos de um objeto, e os métodos representam as funções que ele possui.

 1class Car {
 2    constructor(brand, model) {
 3        this.brand = brand;
 4        this.model = model;
 5    }
 6
 7    // Method definition
 8    drive() {
 9        console.log(`Driving a ${this.brand} ${this.model}`);
10    }
11}
12
13const car1 = new Car("Toyota", "Corolla");
14car1.drive(); // Driving a Toyota Corolla

Neste exemplo, uma classe Car é declarada com as propriedades brand e model e o método drive.

Herança de Classe

As classes podem herdar de outras classes. Usando a herança, você pode criar uma nova classe com base em uma classe existente e adicionar funcionalidades adicionais a ela.

 1class Animal {
 2    constructor(name) {
 3        this.name = name;
 4    }
 5
 6    speak() {
 7        console.log(`${this.name} makes a noise`);
 8    }
 9}
10
11// Inherit from the Animal class
12class Dog extends Animal {
13    constructor(name, breed) {
14        super(name); // Call the constructor of the parent class (Animal)
15        this.breed = breed;
16    }
17
18    // Override the method
19    speak() {
20        console.log(`${this.name} barks`);
21    }
22}
23
24const dog = new Dog("Rex", "German Shepherd");
25dog.speak(); // Rex barks

Neste exemplo, a classe Dog herda da classe Animal.

• A palavra-chave extends é usada para herdar da classe Animal.
• No construtor da classe Dog, super() é usado para chamar o construtor da classe pai. Isso permite herdar o processo de inicialização da classe pai.
• Dentro da classe herdada, você pode sobrescrever os métodos da classe pai. Neste exemplo, em vez de "Rex faz um barulho", é exibido "Rex late".

Métodos Estáticos

Ao definir um método estático dentro de uma classe, o método é associado à própria classe. Métodos estáticos podem ser chamados sem serem instanciados.

1class MathUtils {
2    // Static method
3    static add(a, b) {
4        return a + b;
5    }
6}
7
8console.log(MathUtils.add(5, 10)); // 15

Neste exemplo, a classe MathUtils tem um método estático add definido.

• A palavra-chave static é usada para definir um método estático.
• Os métodos estáticos não pertencem às instâncias da classe e podem ser chamados diretamente da própria classe.

Getters e Setters

Ao definir getters e setters em uma classe, você pode encapsular a obtenção e configuração de propriedades.

 1class Rectangle {
 2    constructor(width, height) {
 3        this.width = width;
 4        this.height = height;
 5    }
 6
 7    // Getter
 8    get area() {
 9        return this.width * this.height;
10    }
11
12    // Setter
13    set widthValue(newWidth) {
14        this.width = newWidth;
15    }
16}
17
18const rect = new Rectangle(10, 20);
19console.log(rect.area); // 200
20
21rect.widthValue = 15;
22console.log(rect.area); // 300

Neste exemplo, a classe Rectangle define um getter area e um setter widthValue.

• Getter (get) é chamado ao recuperar o valor de uma propriedade.
• Setter (set) é chamado ao definir o valor de uma propriedade.

Açúcar Sintático de Classes

No JavaScript, a sintaxe de classes é implementada internamente usando funções construtoras e prototipagem. A sintaxe de classes é um açúcar sintático para escrever estas estruturas de forma mais concisa.

 1// Example without using class syntax
 2function Person(name, age) {
 3    this.name = name;
 4    this.age = age;
 5}
 6
 7Person.prototype.greet = function() {
 8    return `Hello, my name is ${this.name}`;
 9};
10
11const person = new Person("Alice", 25);
12console.log(person.greet()); // Hello, my name is Alice

Neste exemplo, uma função construtora Person é definida e o método greet é criado utilizando um protótipo.

Lidando com this

A palavra-chave this dentro de uma classe refere-se à instância da classe. No entanto, ao lidar com this em métodos de classe, é importante estar ciente de que seu comportamento pode variar dependendo do escopo. Podem surgir problemas, especialmente ao usar métodos como funções de callback.

 1class Counter {
 2    constructor() {
 3        this.count = 0;
 4    }
 5
 6    increment() {
 7        this.count++;
 8        console.log(this.count);
 9    }
10}
11
12const counter = new Counter();
13setTimeout(counter.increment, 1000); // NaN
14// NaN, since this.count is undefined, it becomes NaN after incrementing.

Nesses casos, ao passar como callback para setTimeout, a referência à qual this aponta pode mudar. Para evitar esse problema, recomenda-se fixar this usando o método bind ou utilizar funções de seta (arrow functions).

 1class Counter {
 2    constructor() {
 3        this.count = 0;
 4    }
 5
 6    increment() {
 7        this.count++;
 8        console.log(this.count);
 9    }
10}
11
12const counter = new Counter();
13
14// When using bind
15setTimeout(counter.increment.bind(counter), 1000);
16
17// When using an arrow function
18setTimeout(() => counter.increment(), 2000);

Resumo

• Classes são usadas como modelos para criar objetos, definindo propriedades e métodos.
• Você pode usar a herança para ampliar uma classe, utilizando conceitos de orientação a objetos.
• Métodos estáticos pertencem à própria classe e podem ser usados sem criar uma instância.
• Você pode encapsular propriedades usando getters e setters.
• A sintaxe de classe do JavaScript é açúcar sintático e usa internamente herança baseada em protótipos.

Ao usar classes, você pode lidar com a programação orientada a objetos de forma mais natural e melhorar a reutilização e a manutenção do código.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video