JavaScript | Classe

Classe

A palavra-chave "class" não fazia parte das primeiras versões do JavaScript, trata-se de um syntactic sugar. Foi adicionado em 2015.
Classes são um modelo, que podemos usar para gerar instâncias de receitas ou padrões. Definimos o modelo e em seguida podemos criar objetos com base nesse modelo.
Podemos definir a seguinte classe:

class Triangle {
    getArea(){
        return (this.a + this.b) / 2;
    }

    getHypotenuse(){
        return Math.sqrt(this.a ** 2 + this.b ** 2);
    }
}

No console do navegador:

// Podemos instanciar um novo triângulo
const firstTri = new Triangle()

// Ao chamar uma das funções
firstTri.getArea() // retorna NaN, pois "a" e "b" não foram definidos

// Agora atribuímos valor para "a" e "b":
firstTri.a = 3
firstTri.b = 4

// Se chamar agora um método, ele trará retorno:
firstTri.getArea() // retorna 6
firstTri.Hypotenuse() // retorna 5

Com a classe conseguimos criar uma nova instância, totalmente independente:

const secondTri = new Triangle()
secondTri.a = 5
secondTri.b = 12
secondTri.getArea() // retorna 30
secondTri.Hypotenuse() // retorna 13

O "this" nesse contexto não se refere a classe, e sim a instância da classe.

Convenção de nomeação

Por convenção, os nomes de classes devem estar em UpperCamelCase, o que ajuda a diferenciar das variáveis, que começam com letras minúsculas.

// triangle é a variável
// Triangle é a classe
const triangle = new Triangle()

A instância da classe continua sendo um objeto. Isso porque por baixo dos panos, a instância da classe continua sendo apeanas um objeto normal em JavaScript.

const myTri = new Triangle()
typeof myTri // retorna 'object'

Há uma maneira de determinar se um objeto é uma instância de uma classe específica usando "instanceof":

myTri instanceof Triangle // retorna true

Até o momento, ao criar um instância da clase Triangle, tivemos que definir as propriedades "a" e "b", depois da criação da instância. Porém há um método específico que permite informar as propriedades do objeto, no momento de sua instanciação. Esse é o método construtor. Ele será chamado automaticamente sempre que criarmos uma nova instância de uma classe:

class Triangle {
    constructor(a, b) {
        this.a = a;
        this.b = b;
    }

    getArea() {
        return (this.a * this.b) / 2;
    }

    getHypotenuse() {

    }
}

No caso acima, ao criar uma instância de Triangle, deveremos informar "a" e "b".
No construtor estamos atribuindo o valor de "a" para "this.a" e "b" para "this.b", ou seja, o valor "a" que informamos no construtor, será atribuído ao "a" do objeto. O mesmo acontece para "b". Lembrando que o "this" nesse contexto, é a instância da classe, o objeto.
No console do navegador:

let triang1 = new Triangle(3, 4)
triang1.getArea() // retorna 6

Importante destacar que o parâmetro de entrada, não precisa necessariamente ter o mesmo nome da propriedade, apesar disso ser comum. Veja abaixo que o parâmetro de entrada tem o nome diferente da propriedade do objeto:

class Triangle {
    constructor(sideA, sideB) {
        this.a = sideA;
        this.b = sideB;
    }

    getArea() {
        return (this.a * this.b) / 2;
    }

    getHypotenuse() {

    }
}

O que podemos fazer no construtor?

• Atribuição de propriedades.
• Validação de dados.

Exemplo de validação:

constructor(a, b) {
    if (!Number.isFinite(a) || a <= 0)
        throw new Error(`Invalida a: ${a}`);

    if (!Number.isFinite(b) || b <= 0)
        throw new Error(`Invalida a: ${b}`);

    this.a = a;
    this.b = b;
}