A linguagem JS permite que uma classe herde características de uma outra classe. O uso de herança deve ser utilizado quando temos uma relação é-um(a). Assim, uma classe que "Filha" tem acesso aos recursos da classe "Pai"(super) e também estendê-la.

Os de conceitos de P.O.O podem ser vistos em Conceitos O.O.

Para aplicar o conceito de herança em JS, utilizamos a palavra reservada extends como pode ser visto na sintaxe abaixo:

Sintaxe

class classe_pai
{
 //corpo
}

class classe_filha extends classe_pai
{
 //corpo
}

Onde

classe_pai: Classe pai, base ou principal
classe_filha: Classe que irá utilizar herança e extender a classe_pai.

Como essa herança, a classe classe_filha tem acesso aos métodos e atributos da classe classe_pai. Abaixo, um exemplo de utilização de atributo herdado de uma classe pai ou super.

Exemplo 1

class Pai{
  atributo = -1; //público
}

class Filha extends Pai {
  atributoFilha = -1;
}

let p = new Pai();
let f = new Filha();

console.log(p.atributo);
console.log(f.atributo);

Saída

-1
-1

Uma classe Pai pode possuir um construtor com parâmetros que são vitais para sua instanciação. Nessa situação, uma classe Filha precisa invocar o constructor de uma classe Pai implicitamente. Para isso, utilizamos o construtor super.

Sintaxe

class classe_filha extends classe_pai
{
    constructor(<parametros>)
    {
        super(<parametros>);
    }
}

Onde

classe_pai: Classe pai, base ou principal
classe_filha: Classe que irá utilizar herança e extender a classe_pai.

Exemplo 2

class Pai{
  atributo;
  constructor(p){
    this.atributo = p;
  }
}

class Filha extends Pai {
  atributoFilha;
  constructor(param){
    super(param);
  }
}

Saída

-

Tendo os recursos de uma classe Pai iniciados corretamente, podemos acessá-los normalmente como pode ser visto no exemplo abaixo:

Exemplo 3

class Pai
{
  atributo;
  constructor(p){
    this.atributo = p;
  }
}

class Filha extends Pai 
{
  atributoFilha;
  constructor(param){
    super(param);
  }
}

let x = new Filha("teste");
console.log(x.atributo);

Saída

teste

Assim como utilizamos a palavra reservada super para invocar o método construtor de uma classe Pai. Podemos utilizar super para acessar recursos dessa classe.

Sintaxe

super.nome_metodo( <argumentos> );

Exemplo 4

class Pai {
 metodo_pai(){
   console.log("metodo_pai");
 }
}

class Filha extends Pai{
 metodo_filha(){
   super.metodo_pai();
   console.log("metodo_filha");
 }
}

let x = new Filha();
x.metodo_filha();

Saída

metodo_pai
metodo_filha

O this e super devem ser utilizados para distinção de quais recursos das classes pai e filha devem ser utilizados para ter uma melhor legibilidade.

Poliformismo é outro conceito de POO que permite que um mesmo método com uma mesma assinatura/protótipo tenha diferentes implementações. Utilizando herança de classes conseguimos implementar esse conceito.

Exemplo 5

class Pai {
 metodo(p1,p2){
   console.log(p1*p2);
 }
}

class Filha extends Pai{
 metodo(p1,p2){
   super.metodo(p1,p2);
   console.log(p1+p2);
 }
}
let x = new Filha();
x.metodo(1,2);

Saída

2
3

No exemplo acima, a classe Filha sobrescreve a implementação do método metodo da classe Pai tendo seu comportamento modificado.

1. 18/08/2025 - revisão 3 - Ajustes: pontuais, sintaxes e objetivos
2. 26/09/2024 - revisão 2 - Ajustes gramaticais pontuais; outros ajustes
3. 05/10/2023 - revisão 1 - Correção em layout, navegação, erros gramaticais
4. 31/05/2023 - versão inicial