Compreendendo Herança com Extends e Super()
O que é Herança de Classe?
JavaScript utiliza a palavra-chave extends para estabelecer essa relação entre classes. Uma classe filha pode adicionar suas próprias propriedades e métodos ou sobrescrever aqueles da classe pai.
Considere uma classe filha como uma versão especializada da classe pai. Se a classe pai é um modelo para um carro, a classe filha pode representar um tipo específico de carro, como um carro elétrico. O carro elétrico herda a funcionalidade básica (rodas, direção), mas pode adicionar ou modificar recursos (bateria, sistema de carregamento).
Como usar a palavra-chave extends
A palavra-chave extends é utilizada para fazer uma classe herdar de outra classe. A classe filha herda todas as propriedades e métodos da classe pai.
1234567891011121314151617181920class Animal { constructor(name) { this.name = name; } makeSound() { console.log(`${this.name} makes a sound.`); } } // Child class extending the Animal class class Dog extends Animal { bark() { console.log(`${this.name} barks!`); } } const dog = new Dog('Rex'); dog.makeSound(); // Output: Rex makes a sound. dog.bark(); // Output: Rex barks!
Neste exemplo, a classe Dog estende a classe Animal, herdando o método makeSound() da classe pai. A classe Dog também adiciona seu próprio método bark().
Trabalhando com o Construtor em uma Classe Filha
Ao criar uma classe filha, geralmente é necessário inicializar suas próprias propriedades, bem como as da classe pai. Isso é feito através do método constructor. No entanto, para garantir que a classe pai seja devidamente inicializada, é obrigatório utilizar a função super() para chamar o construtor da classe pai.
Importante: Quando uma classe filha possui um construtor, ela deve chamar super() antes de acessar this, caso contrário ocorrerá um erro.
Utilizando super() para Chamar o Construtor da Classe Pai
A função super() é utilizada para chamar o construtor da classe pai a partir do construtor da classe filha. Isso garante que quaisquer propriedades ou lógicas definidas no construtor da classe pai sejam corretamente inicializadas antes de adicionar novas funcionalidades na classe filha.
1234567891011121314151617181920212223242526class Animal { constructor(name) { this.name = name; } makeSound() { console.log(`${this.name} makes a sound.`); } } // Child class with its own constructor class Dog extends Animal { constructor(name, breed) { // Call the parent class constructor using super() super(name); this.breed = breed; } bark() { console.log(`${this.name}, the ${this.breed}, barks!`); } } const dog = new Dog('Rex', 'German Shepherd'); dog.makeSound(); // Output: Rex makes a sound. dog.bark(); // Output: Rex, the German Shepherd, barks!
Neste exemplo, temos uma classe base chamada Animal com um construtor que inicializa a propriedade name e um método makeSound que registra uma mensagem genérica de som. A classe Dog estende Animal, adicionando seu próprio construtor que aceita tanto name quanto breed como argumentos. Dentro do construtor de Dog, a função super() é utilizada para chamar o construtor da classe pai, garantindo que name seja definido corretamente. Além disso, Dog introduz um novo método, bark, que registra uma mensagem específica para a raça do cachorro. Ao criar uma nova instância de Dog chamada Rex da raça German Shepherd, é possível chamar tanto makeSound quanto bark, demonstrando o comportamento herdado e o novo comportamento.
Pontos-chave ao usar extends e super()
Herança: A palavra-chave extends permite que a classe filha herde propriedades e métodos da classe pai.
Construtor na Classe Filha: Ao definir um construtor na classe filha, sempre utilize super() para chamar o construtor da classe pai.
Acessando this: É necessário chamar super() antes de acessar this no construtor da classe filha.
Sobrescrita de Métodos: É possível sobrescrever métodos da classe pai na classe filha definindo um método com o mesmo nome. Também é possível utilizar super.methodName() para chamar o método da classe pai a partir da classe filha, se necessário.
Exemplo: Sobrescrita de Métodos e Uso de super()
Em algumas situações, pode ser necessário sobrescrever um método da classe pai na classe filha, mas ainda assim chamar o método da classe pai como parte da nova lógica. Isso pode ser feito utilizando super.methodName().
1234567891011121314151617181920212223242526272829class Animal { constructor(name) { this.name = name; } makeSound() { console.log(`${this.name} makes a generic sound.`); } } class Dog extends Animal { constructor(name, breed) { super(name); this.breed = breed; } // Override the makeSound method makeSound() { // Call the parent class's makeSound method super.makeSound(); console.log(`${this.name}, the ${this.breed}, barks loudly.`); } } const dog = new Dog('Rex', 'German Shepherd'); dog.makeSound(); // Output: // Rex makes a generic sound. // Rex, the German Shepherd, barks loudly.
Neste exemplo, a classe Dog sobrescreve o método makeSound, mas ainda chama o método makeSound da classe pai utilizando super.makeSound(). Isso permite que a classe filha estenda o comportamento da classe pai sem substituí-lo completamente.
Exemplo do Mundo Real: Classes Employee e Manager
Considere um cenário em que existe uma classe Employee e uma classe Manager que a estende. A classe Manager adiciona novas funcionalidades além das funcionalidades básicas de Employee.
12345678910111213141516171819202122232425262728class Employee { constructor(name, position) { this.name = name; this.position = position; } getDetails() { return `${this.name} works as a ${this.position}.`; } } class Manager extends Employee { constructor(name, position, department) { // Call the parent class constructor using super() super(name, position); this.department = department; } getDetails() { return `${super.getDetails()} They manage the ${ this.department } department.`; } } const manager = new Manager('Alice', 'Manager', 'Sales'); console.log(manager.getDetails()); // Output: Alice works as a Manager. They manage the Sales department.
Neste exemplo, a classe Manager estende a classe Employee, adicionando uma nova propriedade department. O método getDetails() na classe Manager chama o método da classe pai utilizando super.getDetails() e, em seguida, acrescenta informações específicas do departamento.
1. O que a palavra-chave extends faz?
2. Em uma classe filha, por que usamos super() no construtor?
3. Qual será a saída do seguinte código?
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
Awesome!
Completion rate improved to 2.22Compreendendo Herança com Extends e Super()
Deslize para mostrar o menu
O que é Herança de Classe?
JavaScript utiliza a palavra-chave extends para estabelecer essa relação entre classes. Uma classe filha pode adicionar suas próprias propriedades e métodos ou sobrescrever aqueles da classe pai.
Considere uma classe filha como uma versão especializada da classe pai. Se a classe pai é um modelo para um carro, a classe filha pode representar um tipo específico de carro, como um carro elétrico. O carro elétrico herda a funcionalidade básica (rodas, direção), mas pode adicionar ou modificar recursos (bateria, sistema de carregamento).
Como usar a palavra-chave extends
A palavra-chave extends é utilizada para fazer uma classe herdar de outra classe. A classe filha herda todas as propriedades e métodos da classe pai.
1234567891011121314151617181920class Animal { constructor(name) { this.name = name; } makeSound() { console.log(`${this.name} makes a sound.`); } } // Child class extending the Animal class class Dog extends Animal { bark() { console.log(`${this.name} barks!`); } } const dog = new Dog('Rex'); dog.makeSound(); // Output: Rex makes a sound. dog.bark(); // Output: Rex barks!
Neste exemplo, a classe Dog estende a classe Animal, herdando o método makeSound() da classe pai. A classe Dog também adiciona seu próprio método bark().
Trabalhando com o Construtor em uma Classe Filha
Ao criar uma classe filha, geralmente é necessário inicializar suas próprias propriedades, bem como as da classe pai. Isso é feito através do método constructor. No entanto, para garantir que a classe pai seja devidamente inicializada, é obrigatório utilizar a função super() para chamar o construtor da classe pai.
Importante: Quando uma classe filha possui um construtor, ela deve chamar super() antes de acessar this, caso contrário ocorrerá um erro.
Utilizando super() para Chamar o Construtor da Classe Pai
A função super() é utilizada para chamar o construtor da classe pai a partir do construtor da classe filha. Isso garante que quaisquer propriedades ou lógicas definidas no construtor da classe pai sejam corretamente inicializadas antes de adicionar novas funcionalidades na classe filha.
1234567891011121314151617181920212223242526class Animal { constructor(name) { this.name = name; } makeSound() { console.log(`${this.name} makes a sound.`); } } // Child class with its own constructor class Dog extends Animal { constructor(name, breed) { // Call the parent class constructor using super() super(name); this.breed = breed; } bark() { console.log(`${this.name}, the ${this.breed}, barks!`); } } const dog = new Dog('Rex', 'German Shepherd'); dog.makeSound(); // Output: Rex makes a sound. dog.bark(); // Output: Rex, the German Shepherd, barks!
Neste exemplo, temos uma classe base chamada Animal com um construtor que inicializa a propriedade name e um método makeSound que registra uma mensagem genérica de som. A classe Dog estende Animal, adicionando seu próprio construtor que aceita tanto name quanto breed como argumentos. Dentro do construtor de Dog, a função super() é utilizada para chamar o construtor da classe pai, garantindo que name seja definido corretamente. Além disso, Dog introduz um novo método, bark, que registra uma mensagem específica para a raça do cachorro. Ao criar uma nova instância de Dog chamada Rex da raça German Shepherd, é possível chamar tanto makeSound quanto bark, demonstrando o comportamento herdado e o novo comportamento.
Pontos-chave ao usar extends e super()
Herança: A palavra-chave extends permite que a classe filha herde propriedades e métodos da classe pai.
Construtor na Classe Filha: Ao definir um construtor na classe filha, sempre utilize super() para chamar o construtor da classe pai.
Acessando this: É necessário chamar super() antes de acessar this no construtor da classe filha.
Sobrescrita de Métodos: É possível sobrescrever métodos da classe pai na classe filha definindo um método com o mesmo nome. Também é possível utilizar super.methodName() para chamar o método da classe pai a partir da classe filha, se necessário.
Exemplo: Sobrescrita de Métodos e Uso de super()
Em algumas situações, pode ser necessário sobrescrever um método da classe pai na classe filha, mas ainda assim chamar o método da classe pai como parte da nova lógica. Isso pode ser feito utilizando super.methodName().
1234567891011121314151617181920212223242526272829class Animal { constructor(name) { this.name = name; } makeSound() { console.log(`${this.name} makes a generic sound.`); } } class Dog extends Animal { constructor(name, breed) { super(name); this.breed = breed; } // Override the makeSound method makeSound() { // Call the parent class's makeSound method super.makeSound(); console.log(`${this.name}, the ${this.breed}, barks loudly.`); } } const dog = new Dog('Rex', 'German Shepherd'); dog.makeSound(); // Output: // Rex makes a generic sound. // Rex, the German Shepherd, barks loudly.
Neste exemplo, a classe Dog sobrescreve o método makeSound, mas ainda chama o método makeSound da classe pai utilizando super.makeSound(). Isso permite que a classe filha estenda o comportamento da classe pai sem substituí-lo completamente.
Exemplo do Mundo Real: Classes Employee e Manager
Considere um cenário em que existe uma classe Employee e uma classe Manager que a estende. A classe Manager adiciona novas funcionalidades além das funcionalidades básicas de Employee.
12345678910111213141516171819202122232425262728class Employee { constructor(name, position) { this.name = name; this.position = position; } getDetails() { return `${this.name} works as a ${this.position}.`; } } class Manager extends Employee { constructor(name, position, department) { // Call the parent class constructor using super() super(name, position); this.department = department; } getDetails() { return `${super.getDetails()} They manage the ${ this.department } department.`; } } const manager = new Manager('Alice', 'Manager', 'Sales'); console.log(manager.getDetails()); // Output: Alice works as a Manager. They manage the Sales department.
Neste exemplo, a classe Manager estende a classe Employee, adicionando uma nova propriedade department. O método getDetails() na classe Manager chama o método da classe pai utilizando super.getDetails() e, em seguida, acrescenta informações específicas do departamento.
1. O que a palavra-chave extends faz?
2. Em uma classe filha, por que usamos super() no construtor?
3. Qual será a saída do seguinte código?
Obrigado pelo seu feedback!
