Expressões de classe JavaScript

Resumo : neste tutorial, você aprenderá como usar expressões de classe JavaScript para declarar novas classes.

Introdução às expressões de classe JavaScript

Semelhante às funções , as classes possuem formas de expressão. Uma expressão de classe fornece uma maneira alternativa de definir uma nova classe.

Uma expressão de classe não requer um identificador após a classpalavra-chave. Você pode usar uma expressão de classe em uma declaração de variável e passá-la para uma função como argumento.

Por exemplo, o seguinte define uma expressão de classe:

let Person = class {
    constructor(name) {
        this.name = name;
    }
    getName() {
        return this.name;
    }
}Linguagem de código:  JavaScript  ( javascript )

Como funciona.

No lado esquerdo da expressão está a Personvariável. É atribuído a uma expressão de classe.

A expressão de classe começa com a palavra-chave classseguida pela definição de classe.

Uma expressão de classe pode ter um nome ou não. Neste exemplo, temos uma expressão de classe sem nome.

Se uma expressão de classe tiver um nome, seu nome poderá ser local no corpo da classe.

O seguinte cria uma instância da Personexpressão de classe. Sua sintaxe é a mesma de uma declaração de classe.

let person = new Person('John Doe');Linguagem de código:  JavaScript  ( javascript )

Assim como uma declaração de classe , o tipo de expressão de classe também é uma função :

console.log(typeof Person); // functionLinguagem de código:  JavaScript  ( javascript )

Semelhante às expressões de função, as expressões de classe não são hoist . Isso significa que você não pode criar uma instância da classe antes de definir a expressão da classe.

Cidadão de primeira classe

As classes JavaScript são cidadãs de primeira classe . Isso significa que você pode passar uma classe para uma função, retorná-la de uma função e atribuí-la a uma variável.

Veja o exemplo a seguir:

function factory(aClass) {
    return new aClass();
}

let greeting = factory(class {
    sayHi() { console.log('Hi'); }
});

greeting.sayHi(); // 'Hi'Linguagem de código:  JavaScript  ( javascript )

Como funciona.

Primeiro, defina uma factory()função que receba uma expressão de classe como argumento e retorne a instância da classe:

function factory(aClass) {
    return new aClass();
}Linguagem de código:  JavaScript  ( javascript )

Segundo, passe uma expressão de classe sem nome para a função factory() e atribua seu resultado à variável de saudação:

let greeting = factory(class {
    sayHi() { console.log('Hi'); }
});Linguagem de código:  JavaScript  ( javascript )

A expressão de classe possui um método chamado sayHi(). E a greetingvariável é uma instância da expressão de classe.

Terceiro, chame o sayHi()método no objeto de saudação:

greeting.sayHi(); // 'Hi'Linguagem de código:  JavaScript  ( javascript )

Solteiro

Singleton é um padrão de design que limita a instanciação de uma classe a uma única instância. Ele garante que apenas uma instância de uma classe possa ser criada em todo o sistema.

Expressões de classe podem ser usadas para criar um singleton chamando o construtor da classe imediatamente.

Para fazer isso, você usa o newoperador com uma expressão de classe e inclui os parênteses no final da declaração de classe, conforme mostrado no exemplo a seguir:

let app = new class {
    constructor(name) {
        this.name = name;
    }
    start() {
        console.log(`Starting the ${this.name}...`);
    }
}('Awesome App');

app.start(); // Starting the Awesome App...Linguagem de código:  JavaScript  ( javascript )

Como funciona.

O seguinte é uma expressão de classe sem nome:

new class {
    constructor(name) {
        this.name = name;
    }
    start() {
        console.log(`Starting the ${this.name}...`);
    }
}Linguagem de código:  JavaScript  ( javascript )

A classe tem um constructor()que aceita um argumento. Ele também possui um método chamado start().

A expressão de classe é avaliada como uma classe. Portanto, você pode chamar seu construtor imediatamente colocando parênteses após a expressão:

new class {
    constructor(name) {
        this.name = name;
    }
    start() {
        console.log(`Starting the ${this.name}...`);
    }
}('Awesome App')Linguagem de código:  JavaScript  ( javascript )

Esta expressão retorna uma instância da expressão de classe que é atribuída à variável app.

O seguinte chama o start()método no objeto app:

app.start(); // Starting the Awesome App...Linguagem de código:  JavaScript  ( javascript )

Resumo

• ES6 fornece uma maneira alternativa de definir uma nova classe usando uma expressão de classe.
• As expressões de classe podem ser nomeadas ou não.
• A expressão de classe pode ser usada para criar um objeto singleton.