Herança é um conceito central na programação orientada a objetos, que permite que você estenda classes existentes e utilize suas propriedades e métodos. JavaScript introduziu uma nova e robusta sintaxe de herança com a introdução do ES6, que é muito mais fácil de manusear do que os métodos de protótipo originais. Neste guia, vou te mostrar como aplicar a herança em JavaScript utilizando a palavra-chave extends e te explicar passo a passo como chamar corretamente o construtor da classe base com super.
Principais conclusões
- A herança em JavaScript é realizada através da palavra-chave extends.
- O construtor da classe base deve ser chamado com super.
- Variáveis de instância podem ser referenciadas pela palavra-chave this na classe derivada.
Guia passo a passo
Criando a classe base
Para começar com a herança, primeiro criaremos uma classe base chamada Shape. Nesta classe, definimos o construtor e alguns métodos.
Aqui você define uma classe Shape, que possui um construtor. Você pode definir variáveis e funções neste construtor, que outras classes podem acessar.
Explorando a subclasse
Após criar a classe base, agora você pode criar uma subclasse que herda de Shape. Neste exemplo, nomeamos a nova classe de ConcreteShape.
Nesta subclasse, utilizamos a palavra-chave extends para indicar que ConcreteShape herda de Shape. O construtor da subclasse chama o construtor da classe base Shape com super(), o que é necessário para implementar a herança corretamente.
Instanciando a subclasse
Agora que criamos a subclasse, é hora de criar uma instância dessa classe.
Aqui você cria um novo objeto myShape da classe ConcreteShape e passa uma descrição ao construtor. Em seguida, você chama o método print, que exibe a descrição.
Adicionando mais propriedades
Você pode adicionar mais propriedades à sua subclasse ou até mesmo métodos que sejam específicos para esta subclasse.
Aqui você expandiu a classe ConcreteShape adicionando parâmetros adicionais ao construtor.
Usando a herança
Com a palavra-chave super, você pode chamar o método describe da classe base para combinar as propriedades da classe base e da subclasse.
Resumo – Herança em JavaScript: Do ES6 ao ES13
Neste tutorial, você aprendeu como a herança funciona em JavaScript, especialmente com a nova sintaxe de class. Você viu como definir classes, como herdar de uma classe base e como chamar corretamente o construtor. Esses mecanismos facilitam a manutenção de sua base de código limpa e manutenível, reutilizando recursos de maneira eficiente.
Perguntas Frequentes
Qual é a diferença entre super() e this?super() é utilizado para chamar o construtor da classe base, enquanto this acessa a instância da classe atual.
Por que usar classes ES6 é melhor do que protótipos?As classes ES6 oferecem uma sintaxe mais clara e intuitiva, que facilita a leitura e compreensão do código.
Posso ter várias classes base?Não, JavaScript não suporta herança múltipla. Uma classe pode herdar apenas de outra classe.
O que acontece se eu não chamar super()?Se você não chamar super(), receberá um erro, pois o construtor da classe base, que inicializa o que é necessário para a classe, não será executado.
