He

Herança em JavaScript

1 exercício

Sobre Herança

Herança é uma forma de criar relações pai-filho entre classes. A classe filha (às vezes chamada de subclasse) tem acesso ao comportamento e aos dados definidos pela classe pai (às vezes chamada de superclasse).

class Pet {
  constructor(name) {
    this.name = name;
  }

  introduce() {
    console.log(`This is my pet, ${this.name}.`);
  }
}

class Dog extends Pet {}

const dog = new Dog('Otis');
dog.introduce();
// => This is my pet, Otis.

A palavra-chave extends na declaração da classe filha estabelece uma relação com a classe pai por meio da cadeia de protótipos.

Objetos criados pelo construtor da classe filha terão o protótipo da classe pai na sua cadeia de protótipos, dando acesso a quaisquer métodos ou dados definidos pela classe pai.

const dog = new Dog('Otis');

Dog.prototype.isPrototypeOf(dog); // => true
Pet.prototype.isPrototypeOf(dog); // => true
Pet.prototype.isPrototypeOf(Dog.prototype); // => true

Pet.prototype.hasOwnProperty('introduce'); // => true
Dog.prototype.hasOwnProperty('introduce'); // => false
dog.hasOwnProperty('introduce'); // => false

Construtores

Se nenhuma função construtora for definida pela classe filha, a função construtora da classe pai será usada. No entanto, se a classe filha definir uma função construtora própria, o construtor da classe pai precisará ser chamado explicitamente. Para invocar o construtor da classe pai de dentro do escopo do construtor da classe filha, usa-se a palavra-chave super.

class Pet {
  constructor(name) {
    this.name = name;
  }
}

class Dog extends Pet {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }
}

const dog = new Dog('Otis', 'Pug');

Como o construtor da classe pai é responsável por inicializar um novo objeto e atribuí-lo a this, ele precisa ser chamado antes que this seja usado pelo construtor da classe filha.

class Dog extends Pet {
  constructor(name, breed) {
    // using 'this' before calling the parent constructor with 'super'
    this.breed = breed;
    super(name);
  }
}

const dog = new Dog('Otis', 'Pug');
// => ReferenceError: Must call super constructor in derived class before accessing 'this'...

Definir métodos na classe filha

Uma classe filha pode definir comportamento próprio além do comportamento herdado da classe pai.

Essa é uma das principais razões para usar herança: ter classes filhas especializadas, com seus próprios dados e métodos únicos, que se relacionam por meio de métodos e dados compartilhados fornecidos pela classe pai.

class Dog extends Pet {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }

  describe() {
    console.log(`${this.name} is a ${this.breed}.`);
  }
}

const dog = new Dog('Otis', 'Pug');
dog.introduce();
dog.describe();
// => 'This is my pet, Otis.'
// => 'Otis is a Pug.'

Sobrescrever métodos herdados da classe pai

Uma classe filha também pode sobrescrever o comportamento de um método definido pela classe pai e substituí-lo ou estendê-lo com comportamento definido pela classe filha.

class Cat extends Pet {
  // replacing parent class behavior
  introduce() {
    console.log(`This is my cat, ${this.name}.`);
  }
}

class Dog extends Pet {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }

  describe() {
    console.log(`${this.name} is a ${this.breed}.`);
  }

  // extending parent class behavior
  introduce() {
    super.introduce();
    this.describe();
  }
}

const cat = new Cat('Milo');
cat.introduce();
// => 'This is my cat, Milo.'

const dog = new Dog('Otis', 'Pug');
dog.introduce();
// => This is my pet, Otis.
// => Otis is a Pug.

Para chamar um método definido na classe pai de dentro do corpo de um método com o mesmo nome na classe filha, a palavra-chave super precisa ser usada para fazer referência à classe pai.

Editar via GitHub O link abre em uma nova janela ou aba

Aprenda Herança