Sobes.tech
Junior

Explique como funciona a herança em JavaScript.

sobes.tech IA

Resposta da IA

A herança em JavaScript baseia-se em protótipos. Cada objeto tem uma propriedade interna [[Prototype]] (acessível através de __proto__ ou Object.getPrototypeOf()), que aponta para outro objeto.

Ao tentar aceder a uma propriedade ou método de um objeto, se não for encontrado diretamente no objeto, o JavaScript procura-o em [[Prototype]] desse objeto, depois em [[Prototype]] do protótipo, e assim por diante ao longo da cadeia de protótipos, até atingir o final (Object.prototype), cujo [[Prototype]] é null.

Isto é herança baseada em protótipos.

As classes em ECMAScript 2015 (ES6) são açúcar sintático sobre a herança prototípica. Elas fornecem uma sintaxe mais familiar para trabalhar com protótipos e criar hierarquias de objetos.

Exemplo de uso de herança prototípica antes do ES6:

// Construtor do pai
function Animal(name) {
  this.name = name;
}

// Método do pai no protótipo
Animal.prototype.sayHi = function() {
  console.log(`Olá, sou ${this.name}`);
};

// Construtor do filho
function Dog(name, breed) {
  // Chamar o construtor do pai
  Animal.call(this, name);
  this.breed = breed;
}

// Definir o protótipo do filho para o protótipo do pai
// Mantendo a referência ao construtor Dog
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

// Adicionar método do filho
Dog.prototype.bark = function() {
  console.log("Au-au!");
};

// Criar instância do filho
const myDog = new Dog("Boby", "Labrador");

// Usar métodos do pai e do filho
myDog.sayHi(); // Saída: Olá, sou Boby
myDog.bark();  // Saída: Au-au!

Exemplo de uso de classes (ES6):

// Classe pai
class Animal {
  constructor(name) {
    this.name = name;
  }

  sayHi() {
    console.log(`Olá, sou ${this.name}`);
  }
}

// Classe filha que herda de Animal
class Dog extends Animal {
  constructor(name, breed) {
    // Chamar o construtor do pai
    super(name);
    this.breed = breed;
  }

  bark() {
    console.log("Au-au!");
  }
}

// Criar instância da classe filha
const myDog = new Dog("Rex", "Pastor alemão");

// Usar métodos do pai e do filho
myDog.sayHi(); // Saída: Olá, sou Rex
myDog.bark();  // Saída: Au-au!

Pontos-chave da herança em JavaScript:

  • Prototipos: Cada objeto tem um protótipo.
  • Cadeia de protótipos: A procura por propriedade ou método percorre os protótipos para cima.
  • [[Prototype]]: Propriedade interna que aponta para o protótipo.
  • __proto__: Forma obsoleta, mas comum, de aceder a [[Prototype]].
  • Object.getPrototypeOf(): Forma recomendada de aceder a [[Prototype]].
  • Construtores e prototype: Usados antes do ES6 para criar objetos e definir seus protótipos.
  • Classes (ES6): Açúcar sintático para herança prototípica usando class, extends, super.