Um guia completo com exemplos

JavaScript é uma linguagem multiparadigma que permite escrever programas que seguem estilos de programação funcional, orientado a objetos e imperativo.

Para suportar padrões orientados a objetos, o JavaScript possui classes. Como entendê-los é crucial, este artigo é um guia sobre o que são classes JavaScript e como usá-las.

O que são classes em JavaScript?

Na programação orientada a objetos, modelamos sistemas como grupos de objetos que interagem entre si. Para funcionar, os objetos armazenam dados em propriedades e executam ações definidas como seus métodos. Uma classe define quais propriedades e métodos são transportados por objetos do mesmo tipo. Portanto, as classes são modelos para objetos.

Terminologias usadas nas aulas

Para garantir que estamos na mesma página, aqui está uma descrição das classes com os termos-chave que usaremos neste artigo. Se você já estiver familiarizado com programação orientada a objetos, poderá pular para a próxima seção.

❇️ Uma classe é um projeto para um objeto. Ele fornece um modelo a partir do qual objetos desse tipo podem ser feitos. A criação de um objeto a partir do modelo fornecido pela classe é chamada de instanciação.

❇️ Um membro da classe é qualquer coisa que pertença à classe. Existem dois tipos de membros de classe – métodos e propriedades.

❇️ Uma propriedade é um membro da classe cujo objetivo principal é armazenar valores. Podem ser valores simples, como números e strings. Eles também podem ser objetos e matrizes complexos.

❇️ Algumas propriedades só são acessíveis dentro da classe e são apropriadamente denominadas propriedades privadas. Alguns são acessíveis dentro e fora da classe. Tais propriedades são chamadas de propriedades públicas.

  Como instalar o GCam em telefones que não são do Google Pixel

❇️ Um método é uma função definida dentro de uma classe. Portanto, pertence à classe e tem acesso a propriedades públicas e privadas. Assim como as propriedades, também temos métodos públicos e métodos privados.

❇️ Existem alguns métodos para fornecer uma interface para código fora da classe interagir com propriedades dentro da classe. Existem dois grupos de métodos que fazem isso: getters e setters. Getters obtêm valores de propriedades de classe, enquanto setters definem valores de propriedades de classe.

❇️ Alguns membros são estáticos. Isso significa que eles só são acessíveis na classe e não podem ser acessados ​​nas instâncias da classe.

Por outro lado, alguns membros da classe não são estáticos, o que significa que só podem ser acessados ​​em instâncias de classe. Você precisa instanciar a classe antes de poder acessar um membro não estático.

Ao instanciar uma classe, um método especial é chamado para configurar as propriedades da instância. Este método é chamado de função construtora.

Instanciando uma classe explicada

Usamos a palavra-chave new e o nome da classe para instanciar uma classe em JavaScript. Por exemplo, vamos instanciar a classe Array.

const myArr = new Array()

Criando Classes em JavaScript

Esta seção discutirá a criação de uma classe que implemente todos os conceitos que abordamos no Seção de Terminologia. Faremos isso em uma série de exemplos, onde cada exemplo se baseia nos anteriores.

Declarando uma classe vazia

Para declarar uma classe em JavaScript, usamos a palavra-chave class e damos um nome à classe. A seguir, definimos o corpo da classe. O corpo está entre chaves e contém todos os membros da classe.

Aqui está um exemplo de declaração de classe com corpo vazio:

class Dog {

}

Agora, você pode instanciar a classe da seguinte maneira e imprimi-la.

const pet = new Dog;
console.log(pet);

Criando Propriedades Públicas

Propriedades públicas são definidas com um identificador e um valor opcional.

class Dog {
    name = "Roy";
    age;
}

Aqui, definimos o nome com um valor de string e a idade sem valor.

const pet = new Dog();

console.log(pet.name);
console.log(pet.age);

Definindo Métodos Públicos

Podemos adicionar métodos à nossa classe dentro de seu corpo. Definimos um método da mesma forma que definiríamos uma função. No entanto, omitimos a palavra-chave function.

class Dog {
    name = "Roy";
    age;

    walk () {
        console.log("Walking");
    }
}

No exemplo acima, definimos o método walk. Cada instância da classe Animal terá esse método.

const pet = new Dog();
pet.walk();

Acessando propriedades de métodos

Em JavaScript, geralmente acessamos propriedades de um objeto usando o operador ponto. Por exemplo, se tivéssemos um objeto chamado pessoa e quiséssemos acessar a propriedade name, faríamos isso da seguinte maneira.

person.name

Porém, se quisermos acessar uma propriedade de dentro do objeto, usamos a palavra-chave this em vez do nome do objeto. Aqui está um exemplo:

this.name

A palavra-chave this faz referência ao objeto. Portanto, se quiséssemos acessar as propriedades da classe a partir dos métodos da classe, usaríamos esta sintaxe..

  Wondershare UniConverter – Conversor de vídeo definitivo para qualquer necessidade

Criando Propriedades Privadas

Suponha que desejemos que as propriedades de nome e idade que definimos anteriormente sejam privadas. Redefiniríamos a classe da seguinte forma:

class Dog {
    #name = "Roy";
    #age;

    walk () {
        console.log("Walking");
    }
}

Como você pode ver, as propriedades privadas são especificadas usando sinais de cerquilha. Se você tentasse acessá-los, encontraria erros.

const dog = new Dog();

dog.#name

Criando métodos getter e setter

Agora, as propriedades de nome e idade da classe são privadas. Portanto, eles só podem ser acessados ​​por métodos dentro da classe.

Se quisermos permitir que código fora da classe acesse essas propriedades, definimos getters e setters. Vamos fazer isso para a propriedade name.

class Dog {
    #name = "Roy";
    #age;

    get name () {
        return this.#name;
    }

    set name (value) {
        this.#name = value;
    }

    walk () {
        console.log("Walking");
    }
}

Com a classe definida acima, você pode definir o nome e exibi-lo usando o código abaixo:

const pet = new Dog();

// Setting the name
pet.name = "Rex";

// Getting the name
console.log(pet.name);

Criando Métodos Privados

Assim como as propriedades privadas, os métodos privados são prefixados com o sinal de cerquilha. Portanto, declarar um método privado ficaria assim:

class Dog {
    #name = "Roy";
    #age;

    get name () {
        return this.#name;
    }

    set name (value) {
        this.#name = value;
    }

    #increaseAge() {
        this.#age ++;
    }

    #decreaseAge () {
        this.#age --;
    }

    walk () {
        console.log("Walking");
    }
}

Se você tentasse acessar esses métodos de fora da classe, não funcionaria.

const pet = new Dog();
pet.#increaseAge();

Criando um Método Construtor

Você também pode definir o método construtor. Este método será chamado automaticamente sempre que você instanciar uma nova classe. O método construtor pode ser usado para inicializar propriedades. Neste exemplo, inicializaremos a idade e o nome com quaisquer argumentos que o usuário forneça durante a instanciação.

class Dog {
    #name;
    #age;

    constructor (name = "Dog", age = 0) {
        this.#name = name;
        this.#age = age;
    }

    get name () {
        return this.#name;
    }

    set name (value) {
        this.#name = value;
    }

    #increaseAge() {
        this.#age ++;
    }

    #decreaseAge () {
        this.#age --;
    }

    walk () {
        console.log("Walking");
    }
}

Quando instanciamos nossa classe, podemos fornecer um nome e uma idade.

const pet = new Dog('Roy', 3);
console.log(pet.name);

Criando Propriedades e Métodos Estáticos

Conforme mencionado, membros estáticos podem ser acessados ​​sem instanciar a classe primeiro. No exemplo abaixo, criaremos uma propriedade e um método estáticos.

class Dog {
    #name;
    #age;
    static genus = "Canis";

    constructor (name = "Dog", age = 0) {
        this.#name = name;
        this.#age = age;
    }

    static bark() {
        console.log("Woof");
    }

    get name () {
        return this.#name;
    }

    set name (value) {
        this.#name = value;
    }

    #increaseAge() {
        this.#age ++;
    }

    #decreaseAge () {
        this.#age --;
    }

    walk () {
        console.log("Walking");
    }
}

Agora, você pode acessar a propriedade e o método estáticos sem instanciação.

console.log(Dog.genus);
Dog.bark();

Herança

As classes podem herdar propriedades de outras classes. Uma classe que herda membros de outra classe é chamada de superclasse, enquanto a classe da qual herda membros é a classe base ou subclasse.

  10 razões pelas quais projetar em escala de cinza melhorará seus designs de UX/UI

Para criar uma superclasse em JavaScript, usamos a palavra-chave extends. Aqui está um exemplo onde herdamos da classe Dog.

class Rottweiler extends Dog {
    constructor (name, age) {
        super(name, age);
        this.breed = 'rottweiler';
    }
}

Como você pode ver, a aula é basicamente a mesma de antes. Porém, dentro do construtor, chamamos a superfunção. A palavra-chave super faz referência ao construtor da classe base. Portanto, chamamos o construtor da classe base dentro de nossa superclasse, passando nome e idade.

const myPet = new Rottweiler();
console.log(myPet);

Conclusão

Neste artigo, cobrimos aulas. Abordamos o que são, os membros que podem possuir e as diferentes classificações para os membros. Depois, ilustramos tudo isso com exemplos.

A seguir, você pode querer ler as perguntas da entrevista sobre programação orientada a objetos.