Aprenda a criar classes em JavaScript
Em 2015, a versão ES6 da linguagem de programação JavaScript foi lançada. Este lançamento introduziu algumas atualizações importantes para a linguagem e oficialmente a colocou 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á – a palavra-chave class . 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.
A palavra-chave class (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{
//class body
}
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{
constructor(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. Ele usa a palavra-chave constructor como você pode ver no exemplo acima.
O construtor no exemplo acima usa três parâmetros e usa a palavra-chave this 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 são distinguíveis por sua localização geográfica específica ou pelas pessoas que as possuem.
A palavra-chave this é 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.
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.
//create a new object
const john = new Student('John', 'Brown', '2018');
O código acima usa a classe Student para criar um objeto.
Ao criar um objeto de uma classe, você precisa usar a nova palavra-chave, seguida do nome da classe e os valores que 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 a variável john você ainda será capaz de criar um novo objeto usando a classe Aluno , mas então não haverá maneira de acessar esse 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 realizar 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 a criação de métodos de classe em JavaScript.
class Student{
constructor(firstName, lastName, startDate){
this.firstName = firstName;
this.lastName = lastName;
this.startDate = startDate;
}
// report method
report(){
return `${this.firstName} ${this.lastName} started attending this institution in ${this.startDate}`
}
}
A aula acima contém um método que irá gerar um relatório sobre cada aluno criado com a aula de Aluno . Para usar o método report () , 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 da classe Aluno que está atribuído à variável john . Usando john , agora você pode chamar com sucesso o método report () .
Exemplo de uso de métodos de classe
Abaixo está um exemplo de uso de métodos de classe em JavaScript.
//create a new object
const john = new Student('John', 'Brown', '2018');
//calling the report method and storing its result in a variable
let result = john.report();
//printing the result to the console
console.log(result);
O código acima usa a classe Students para produzir a seguinte saída no console:
John Brown started attending this institution in 2018Usando 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.
Pelo exemplo acima, você não pode usar o método report () sem um objeto da classe. Isso ocorre porque o método report () 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{
constructor(firstName, lastName, startDate){
this.firstName = firstName;
this.lastName = lastName;
this.startDate = startDate;
}
// report method
report(){
return `${this.firstName} ${this.lastName} started attending this institution in ${this.startDate}`
}
//static method
static endDate(startDate){
return startDate + 4;
}
}
O importante a notar no exemplo acima é que todo método estático começa com a palavra-chave static .
Exemplo de uso de método estático
Abaixo está um exemplo de uso de um método estático em JavaScript.
//calling a static method and printing its result to the console
console.log(Student.endDate(2018));
A linha de código acima usa a classe Students para produzir a seguinte saída no console:
2022Criar 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 a palavra-chave class .
- Um construtor JavaScript indica o número de valores que um objeto pode ter.
- Os métodos de classes gerais não podem ser utilizados sem um objeto.
- Os métodos estáticos podem ser usados sem um objeto.
O console . O método log () é 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.
Familiarizar-se com o método console.log () é uma das coisas mais importantes que você pode fazer como desenvolvedor de JavaScript.