Classes Reagir ES6


Aulas

ES6 introduziu classes.

Uma classe é um tipo de função, mas em vez de usar a palavra-chave functionpara iniciá-la, usamos a palavra-chave classe as propriedades são atribuídas dentro de um constructor()método.

Exemplo

Um construtor de classe simples:

class Car {
  constructor(name) {
    this.brand = name;
  }
}

Observe o caso do nome da classe. Começamos o nome, "Car", com um caractere maiúsculo. Esta é uma convenção de nomenclatura padrão para classes.

Agora você pode criar objetos usando a classe Car:

Exemplo

Crie um objeto chamado "mycar" baseado na classe Car:

class Car {
  constructor(name) {
    this.brand = name;
  }
}

const mycar = new Car("Ford");

Nota: A função construtora é chamada automaticamente quando o objeto é inicializado.


w3schools CERTIFIED . 2022

Obter certificação!

Complete os módulos React, faça os exercícios, faça o exame e torne-se certificado w3schools!!

$ 95 INSCRIÇÃO

Método nas aulas

Você pode adicionar seus próprios métodos em uma classe:

Exemplo

Crie um método chamado "presente":

class Car {
  constructor(name) {
    this.brand = name;
  }
  
  present() {
    return 'I have a ' + this.brand;
  }
}

const mycar = new Car("Ford");
mycar.present();

Como você pode ver no exemplo acima, você chama o método referindo-se ao nome do método do objeto seguido por parênteses (os parâmetros ficariam dentro dos parênteses).


Herança de classe

Para criar uma herança de classe, use a palavra- extends chave.

Uma classe criada com uma herança de classe herda todos os métodos de outra classe:

Exemplo

Crie uma classe chamada "Model" que herdará os métodos da classe "Car":

class Car {
  constructor(name) {
    this.brand = name;
  }

  present() {
    return 'I have a ' + this.brand;
  }
}

class Model extends Car {
  constructor(name, mod) {
    super(name);
    this.model = mod;
  }  
  show() {
      return this.present() + ', it is a ' + this.model
  }
}
const mycar = new Model("Ford", "Mustang");
mycar.show();

O super()método se refere à classe pai.

Ao chamar o super()método no método construtor, chamamos o método construtor do pai e obtemos acesso às propriedades e métodos do pai.

Para saber mais sobre classes, confira nossa seção Classes de JavaScript .