CodeGym /Curso Java /Frontend SELF PT /Herança por protótipos

Herança por protótipos

Frontend SELF PT
Nível 39 , Lição 3
Disponível

4.1 Herança — é simples

Herança é um conceito fundamental da programação orientada a objetos (OOP), que permite que uma classe (chamada de classe filha ou subclasse) herde campos e métodos de outra classe (chamada de classe pai ou superclasse).

Herança

Essa abordagem permite criar classes mais gerais e reutilizar código, melhorando a organização e manutenção do código.

Por que precisamos de herança?

Vamos supor que você precise escrever algum código e decidiu fazer isso na forma de uma classe. Depois, você descobre que no seu projeto já existe uma classe que faz quase tudo o que você precisa na sua classe. Você pode simplesmente copiar o código dessa classe na sua, e usá-la à vontade.

Ou você pode "como se copiar". Você pode declarar essa classe como a classe pai da sua, e então o JavaScript adicionará à sua classe o comportamento da classe pai.

Imagine que você é a natureza e quer criar um Cachorro. O que seria mais rápido: criar um cachorro a partir de uma bactéria em um bilhão de anos ou domesticar um lobo em 200 mil?

4.2 Conceito de herança por protótipos

Herança por protótipos no JavaScript é um dos principais mecanismos que permite que objetos herdem propriedades e métodos de outros objetos. Isso permite criar hierarquias de objetos complexas e reutilizar código.

Cada objeto no JavaScript tem uma propriedade oculta [[Prototype]], que aponta para o seu protótipo. Protótipos são usados para implementar herança, permitindo que objetos herdem propriedades e métodos de outros objetos.

Exemplo de herança simples

Passo 1: Criação de um objeto base

JavaScript
    
      const animal = {
        eat() {
          console.log('Comendo...');
        },

        sleep() {
          console.log('Dormindo...');
        }
      };
    
  

Passo 2: Criação do objeto herdado

JavaScript
    
      const dog = Object.create(animal);

      dog.bark = function() {
        console.log('Latindo...');
      };
    
  

Passo 3: Usando propriedades e métodos herdados

JavaScript
    
      dog.eat();   // Mostrará: Comendo...
      dog.sleep(); // Mostrará: Dormindo...
      dog.bark();  // Mostrará: Latindo...
    
  

Neste exemplo, o objeto dog herda os métodos eat() e sleep() do objeto animal e adiciona seu próprio método — bark().

4.3 Herança profunda por protótipos

Cadeia de protótipos

No JavaScript, a herança pode ser mais complexa, quando objetos herdam uns dos outros, formando uma cadeia de protótipos.

Exemplo de cadeia de protótipos

Neste exemplo, o objeto dog é herdado de mammal, que por sua vez é herdado de animal. Isso cria uma cadeia de protótipos, onde dog tem acesso a todos os métodos de mammal e animal.

JavaScript
    
      const animal = {
        eat() {
          console.log('Comendo...');
        }
      };

      const mammal = Object.create(animal);

      mammal.walk = function() {
        console.log('Andando...');
      };

      const dog = Object.create(mammal);
      dog.bark = function() {
        console.log('Latindo...');
      };

      dog.eat();   // Mostrará: Comendo...
      dog.walk();  // Mostrará: Andando...
      dog.bark();  // Mostrará: Latindo...
    
  

Verificando a cadeia de protótipos

O método isPrototypeOf() permite verificar se um objeto é protótipo de outro objeto.

Exemplo:

JavaScript
    
      console.log(animal.isPrototypeOf(mammal)); // Mostrará: true
      console.log(mammal.isPrototypeOf(dog));    // Mostrará: true
      console.log(animal.isPrototypeOf(dog));    // Mostrará: true
    
  

4.4 Sobrescrita de métodos

A herança por protótipos permite não apenas adicionar novos métodos, mas também sobrescrever métodos existentes.

Exemplo de sobrescrita de métodos

Neste exemplo, o método speak() no objeto dog sobrescreve o método speak() no objeto animal:

JavaScript
    
      const animal = {
        speak() {
          console.log('Animal fala');
        }
      };

      const dog = Object.create(animal);
      dog.speak = function() {
        console.log('Cachorro late');
      };

      animal.speak(); // Mostrará: Animal fala
      dog.speak();    // Mostrará: Cachorro late
    
  

Chamando método do objeto pai

Para chamar o método do objeto pai no JavaScript, pode-se usar o método call() ou apply().

Exemplo:

JavaScript
    
      const animal = {
        speak() {
          console.log('Animal fala');
        }
      };

      const dog = Object.create(animal);
      dog.speak = function() {
        animal.speak.call(this);
        console.log('Cachorro late');
      };

      dog.speak();

      // Mostrará:
      // Animal fala
      // Cachorro late
    
  

4.5 Uso avançado de herança por protótipos

Extensão de objetos embutidos

Você pode expandir objetos embutidos do JavaScript adicionando métodos aos seus protótipos.

Exemplo:

JavaScript
    
      Array.prototype.sum = function() {
        return this.reduce((acc, value) => acc + value, 0);
      };

      const numbers = [1, 2, 3, 4, 5];

      console.log(numbers.sum()); // Mostrará: 15
    
  

Criação de hierarquias multiníveis

Você pode criar hierarquias de objetos mais complexas e multiníveis usando a herança por protótipos.

Exemplo:

JavaScript
    
      const livingBeing = {
        breathe() {
          console.log('Respirando...');
        }
      };

      const animal = Object.create(livingBeing);
      animal.eat = function() {
        console.log('Comendo...');
      };

      const mammal = Object.create(animal);
      mammal.walk = function() {
        console.log('Andando...');
      };

      const dog = Object.create(mammal);
      dog.bark = function() {
        console.log('Latindo...');
      };

      dog.breathe(); // Mostrará: Respirando...
      dog.eat();     // Mostrará: Comendo...
      dog.walk();    // Mostrará: Andando...
      dog.bark();    // Mostrará: Latindo...
    
  
Comentários
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION