Herança de Classes em JavaScript

Herança de classe

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

As classes criadas por herança de classe herdam todos os métodos de outra classe:

Instância

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

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  present() {
    return 'Tenho um ' + this.carname;
  }
}
class Model extends Car {}}
  constructor(brand, mod) {
    super(brand);
    this.model = mod;
  }
  show() {
    return this.present() + ', it is a ' + this.model;
  }
}
let myCar = new Model("Ford", "Mustang");
document.getElementById("demo").innerHTML = myCar.show();

Experimente você mesmo

super() método no construtor, referenciamos a classe pai.

Chamando super() Métodos, chamamos o método constructor da classe pai, obtendo permissão para acessar os atributos e métodos da classe pai.

A herança é útil para a reutilização do código: reuse atributos e métodos de classes existentes ao criar novas classes.

Getter e Setter

A classe também permite que você use getter e setter.

É inteligente usar getter e setter para seus atributos, especialmente se você quiser fazer algo especial antes de retorná-los ou antes de configurá-los.

Para adicionar getter e setter a uma classe, use get e set Palavra-chave.

Instância

Crie getter e setter para o atributo "carname":

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  get cnam() {
    return this.carname;
  }
  set cnam(x) {
    this.carname = x;
  }
}
let myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.cnam;

Experimente você mesmo

Notas:Mesmo que o getter seja um método, não use parênteses ao obter o valor do atributo.

O nome do método getter/setter não pode ser o mesmo que o nome do atributo, neste exemplo é carname。

Muitos programadores usam o caractere sublinhado _ no início do nome do atributo para separar o getter/setter do atributo real:

Instância

Você pode usar o caractere sublinhado para separar o getter/setter do atributo real:

class Car {
  constructor(brand) {
    this._carname = brand;
  }
  get carname() {
    return this._carname;
  }
  set carname(x) {
    this._carname = x;
  }
}
let myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.carname;

Experimente você mesmo

Para usar o setter, use a mesma sintaxe que para atribuir valor ao atributo, sem parênteses:

Instância

Use o setter para alterar o nome do carro para "Volvo":

class Car {
  constructor(brand) {
    this._carname = brand;
  }
  get carname() {
    return this._carname;
  }
  set carname(x) {
    this._carname = x;
  }
}
let myCar = new Car("Ford");
myCar.carname = "Volvo";
document.getElementById("demo").innerHTML = myCar.carname;

Experimente você mesmo

Hoisting

Diferente das declarações de função e outras declarações JavaScript, as declarações de classe não são hoisting.

Isso significa que você deve declarar a classe primeiro antes de usá-la:

Instância

//Você ainda não pode usar essa classe.
//myCar = new Car("Ford")
//Isso causaria um erro.
class Car {
  constructor(brand) {
    this.carname = brand;
  }
}
//Agora você pode usar essa classe:
let myCar = new Car("Ford")

Experimente você mesmo

Notas:Para outras declarações, como funções, não há erro ao tentar usá-las antes da declaração, pois o comportamento padrão da declaração JavaScript é o hoisting (movimento das declarações para o topo).