Aprenda a criar classes em JavaScript

Em 2015, a versão ES6 da linguagem de programação JavaScript foi lançada. Esta versão introduziu algumas atualizações importantes para a linguagem e a colocou oficialmente na categoria de linguagem de programação orientada a objetos, entre outras linguagens, como Java e C ++.

A programação orientada a objetos concentra-se em objetos e nas operações que podem ser realizadas neles. No entanto, antes de ter qualquer objeto, você precisará ter uma classe.

As classes de JavaScript são um dos recursos revolucionários que acompanham a versão ES6 da linguagem. Uma classe pode ser descrita como um blueprint usado para criar objetos.

Neste artigo tutorial, você aprenderá como criar e manipular objetos usando classes JavaScript.

Estrutura da classe JavaScript

Ao criar uma classe em JavaScript, há um componente fundamental que você sempre exigirá - o aula palavra-chave. Quase todos os outros aspectos da classe JavaScript não são necessários para sua execução bem-sucedida.

Uma classe JavaScript será executada naturalmente se um construtor não for fornecido (a classe simplesmente criará um construtor vazio durante a execução). No entanto, se uma classe JavaScript for criada com construtores e outras funções, mas nenhuma palavra-chave de classe for usada, essa classe não será executável.

O aula palavra-chave (que sempre deve estar em minúsculas) é uma necessidade na estrutura de classes do JavaScript. O exemplo a seguir é a sintaxe geral de uma classe JavaScript. A sintaxe da classe JavaScript está abaixo:

class ClassName {
// corpo da classe
}

Criação de uma classe em JavaScript

Na programação, uma classe pode ser vista como uma entidade generalizada que é usada para criar um objeto especializado. Por exemplo, em um ambiente escolar, uma entidade generalizada (uma classe) pode ser alunos e um objeto de alunos pode ser John Brown. Mas antes de criar um objeto, você precisará saber os dados que ele armazenará e é aqui que os Construtores de JavaScript entram em jogo.

Usando construtores em classes JavaScript

Um construtor é vital para o processo de criação de classe por alguns motivos; ele inicializa o estado de um objeto (por meio de seus atributos) e é chamado automaticamente quando um novo objeto é instanciado (definido e criado).

Usando um exemplo de construtor

Abaixo, você verá um exemplo de construtor com uma explicação do que isso significa.

class Student {
construtor (firstName, lastName, startDate) {
this.firstName = firstName;
this.lastName = lastName;
this.startDate = startDate;
}
}

O código acima apresenta um aspecto importante do construtor da classe JavaScript; ao contrário de outras linguagens como Java e C ++, um construtor de JavaScript não usa o nome da classe para criar um construtor. Usa o construtor palavra-chave como você pode ver no exemplo acima.

Relacionado: Aprenda a criar classes em Java

O construtor no exemplo acima leva três parâmetros e usa o isto palavra-chave para atribuir os parâmetros à instância atual da classe. Pode parecer um pouco confuso, mas o que você precisa entender é que uma classe pode ser vista como um projeto que é usado para criar muitas casas.

Cada casa construída pode então ser vista como um objeto desta classe. Embora cada uma dessas casas seja criada com o mesmo projeto, elas se distinguem por sua localização geográfica específica ou pelas pessoas que as possuem.

O isto palavra-chave é usada para distinguir cada objeto criado por uma classe. Ele garante que os dados corretos sejam armazenados e processados ​​para cada objeto criado usando a mesma classe.

Criação de um objeto em JavaScript

Construtores são importantes em uma linguagem como JavaScript porque eles significam o número de atributos que um objeto de uma classe específica deve ter. Algumas linguagens exigirão que um atributo (variável) seja declarado antes que possa ser usado em um construtor ou qualquer outro método. No entanto, esse não é o caso do JavaScript.

Relacionado: Como declarar variáveis ​​em JavaScript

Olhando para o construtor da classe do aluno acima, você pode discernir que um objeto desta classe terá três atributos.

Criando um Exemplo de Objeto

Abaixo, você verá um exemplo de criação de um objeto em JavaScript.

// cria um novo objeto
const john = new Student ('John', 'Brown', '2018');

O código acima usa o Aluna classe para criar um objeto.

Ao criar um objeto de uma classe, você precisa usar o novo palavra-chave, seguida pelo nome da classe e os valores que você deseja atribuir aos respectivos atributos. Agora você tem um novo aluno com o nome John, o sobrenome Brown e uma data de início de 2018. Você também tem uma variável constante: John. Esta variável é importante porque permite que você use o objeto que é criado.

Sem o John você ainda será capaz de criar um novo objeto usando o Aluna classe, mas então não haverá maneira de acessar este objeto e usá-lo com os diferentes métodos da classe.

Usando métodos em classes JavaScript

Um método é uma função de uma classe usada para executar operações em objetos criados a partir da classe. Um bom método para adicionar à classe do aluno é aquele que gera um relatório sobre cada aluno.

Exemplo de criação de métodos de classe

Abaixo está um exemplo para criar métodos de classe em JavaScript.

class Student {
construtor (firstName, lastName, startDate) {
this.firstName = firstName;
this.lastName = lastName;
this.startDate = startDate;
}
// método de relatório
relatório(){
return `$ {this.firstName} $ {this.lastName} começou a frequentar esta instituição em $ {this.startDate}`
}
}

A aula acima contém um método que irá gerar um relatório sobre cada aluno criado com o Aluna aula. Para usar o relatório() você precisará usar um objeto existente da classe para fazer uma chamada de função simples.

Graças ao "exemplo de criação de um objeto" acima, você deve ter um objeto do Aluna classe que é atribuída à variável John. Usando John, agora você pode chamar com sucesso o relatório() método.

Exemplo de uso de métodos de classe

Abaixo está um exemplo de uso de métodos de classe em JavaScript.

// cria um novo objeto
const john = new Student ('John', 'Brown', '2018');
// chamando o método de relatório e armazenando seu resultado em uma variável
deixe resultado = john.report ();
// imprimindo o resultado no console
console.log (resultado);

O código acima usa o Alunos classe para produzir a seguinte saída no console:

John Brown começou a frequentar esta instituição em 2018

Usando métodos estáticos em classes JavaScript

Os métodos estáticos são exclusivos porque são os únicos métodos em uma classe JavaScript que podem ser usados ​​sem um objeto.

A partir do exemplo acima, você não pode usar o relatório() método sem um objeto da classe. Isso ocorre porque o relatório() método depende dos atributos de um objeto para produzir um resultado desejável. No entanto, para usar um método estático, você só precisará do nome da classe que armazena o método.

Criação de um exemplo de método estático

Abaixo está um exemplo de método estático para JavaScript.

class Student {
construtor (firstName, lastName, startDate) {
this.firstName = firstName;
this.lastName = lastName;
this.startDate = startDate;
}
// método de relatório
relatório(){
return `$ {this.firstName} $ {this.lastName} começou a frequentar esta instituição em $ {this.startDate}`
}
// método estático
static endDate (startDate) {
retornar data de início + 4;
}
}

O importante a observar no exemplo acima é que todo método estático começa com o estático palavra-chave.

Exemplo de uso de método estático

Abaixo está um exemplo de uso de um método estático em JavaScript.

// chamando um método estático e imprimindo seu resultado no console
console.log (Student.endDate (2018));

A linha de código acima usa o Alunos classe para produzir a seguinte saída no console:

2022

Criar uma classe JavaScript é fácil

Há várias coisas que você precisa lembrar se quiser criar uma classe JavaScript e instanciar um ou mais objetos a partir dela:

• Uma classe JavaScript deve ter o aula palavra-chave.
• Um construtor JavaScript indica o número de valores que um objeto pode ter.
• Os métodos de classe geral não podem ser utilizados sem um objeto.
• Os métodos estáticos podem ser usados ​​sem um objeto.

O console.registro() O método é usado em todo este artigo para fornecer os resultados do uso de métodos gerais e estáticos em uma classe JavaScript. Este método é uma ferramenta útil para qualquer desenvolvedor de JavaScript, pois ajuda no processo de depuração.

Familiarizando-se com o console.log () método é uma das coisas mais importantes que você pode fazer como um desenvolvedor de JavaScript.

A última folha de dicas do JavaScript

Obtenha uma rápida atualização dos elementos JavaScript com esta folha de dicas.

Leia a seguir

Sobre o autor