Herança no JavaScript §

---

Declaração extends §

A palavra reservada extends serve para indicar que uma classe herdará de outra.

Importante

Não é recomendável extender uma classe mais de 1 vez, pois isso torna a lógica do código muito complexa, dificultado a depuração e a manutenção. Como alternativa, você pode adotar a Composição de objetos com Mixins.

Sintaxe §

class [nome da subclasse] extends [nome da superclasse] {
  // ...
}

Exemplo §

class DispositivoEletronico {
  constructor(nome) {
    this.nome = nome;
    this.ligado = false;
  }
 
  ligar() {
    if (this.ligado) {
      console.log(this.nome + " já está ligado.");
      return;
    }
 
    this.ligado = true;
  }
 
  desligar() {
    if (!this.ligado) {
      console.log(this.nome + " já está desligado.");
      return;
    }
 
    this.ligado = false;
  }
}
 
class Smartphone extends DispositivoEletronico {}
 
const smartphone = new Smartphone("Smartphone");
smartphone.ligar();
smartphone.ligar(); // Smartphone já está ligado.
smartphone.desligar();
smartphone.desligar(); // Smartphone já está desligado.
 
console.log(smartphone); // Smartphone { nome: 'Smartphone', ligado: false }

Declaração super §

A palavra reservada super é a representação da super classe em uma subclasse.

O método super() é a representação do construtor da super classe em uma subclasse.

Exemplo §

class DispositivoEletronico {
  constructor(nome) {
    this.nome = nome;
    this.ligado = false;
  }
 
  ligar() {
    if (this.ligado) {
      console.log(this.nome + " já está ligado.");
      return;
    }
 
    this.ligado = true;
  }
 
  desligar() {
    if (!this.ligado) {
      console.log(this.nome + " já está desligado.");
      return;
    }
 
    this.ligado = false;
  }
}
 
class Smartphone extends DispositivoEletronico {
  constructor(nome, cor, modelo) {
    super(nome);
 
    this.cor = cor;
    this.modelo = modelo;
  }
}
 
const smartphone = new Smartphone("Smartphone", "preto", "Galaxy S10");
smartphone.ligar();
smartphone.ligar(); // Smartphone já está ligado.
smartphone.desligar();
smartphone.desligar(); // Smartphone já está desligado.
 
console.log(smartphone);
 
/*
Smartphone {
  nome: 'Smartphone',        
  ligado: false,
  cor: 'preto',
  modelo: 'Galaxy S10'       
}
*/

Referências §

---

• Curso de JavaScript e TypeScript do básico ao avançado