CodeGym /Cursos /Frontend SELF PT /Mixins e composição

Mixins e composição

Frontend SELF PT
Nível 40 , Lição 4
Disponível

11.1 Mixins

Mixins e composição são ferramentas poderosas pra organização e reutilização de código em JavaScript. Eles oferecem abordagens alternativas pra herança clássica, permitindo criar sistemas mais flexíveis e modulares.

Mixins — são uma maneira de reutilizar código, permitindo adicionar funcionalidade às classes sem usar herança. Um mixin é um objeto que contém métodos e propriedades que podem ser copiados para outras classes ou objetos.

Exemplo de uso de mixins:

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

      const CanWalk = {
        walk() {
          console.log('Andando...');
        }
      };

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

      // Copiamos métodos dos mixins para o protótipo da classe
      Object.assign(Person.prototype, CanEat, CanWalk);

      const person = new Person('John');

      person.eat();  // Vai mostrar: Comendo...
      person.walk(); // Vai mostrar: Andando...
    
  

Vantagens dos mixins:

  1. Reutilização de código: mixins permitem compartilhar facilmente métodos e propriedades comuns entre classes.
  2. Flexibilidade: é possível escolher quais mixins aplicar às classes, proporcionando uma organização de código mais flexível.
  3. Superação de limitações da herança: mixins permitem adicionar funcionalidades sem a necessidade de criar hierarquias de herança complexas.

Problemas dos mixins:

  1. Conflitos de nomes: ao combinar vários mixins, podem ocorrer conflitos de nomes de métodos ou propriedades.
  2. Estrutura menos clara: mixins podem tornar a estrutura das classes menos clara, dificultando a manutenção do código.

11.2 Composição

Composição — é uma abordagem onde objetos são criados através da combinação de múltiplos objetos ou funções para formar um comportamento mais complexo. Composição permite construir sistemas a partir de pequenos módulos independentes, tornando o código mais flexível e facilmente extensível.

Exemplo 1: Composição de funções

JavaScript
    
      function canEat(obj) {
        obj.eat = function() {
          console.log('Comendo...');
        };
      }

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

      function Person(name) {
        this.name = name;
      }

      const person = new Person('John');
      canEat(person);
      canWalk(person);

      person.eat();  // Vai mostrar: Comendo...
      person.walk(); // Vai mostrar: Andando...
    
  

Exemplo 2: Composição com classes

JavaScript
    
      class CanEat {
        eat() {
          console.log('Comendo...');
        }
      }
      
      class CanWalk {
        walk() {
          console.log('Andando...');
        }
      }
      
      class Person {
        constructor(name) {
          this.name = name;
          // Criamos instâncias de CanEat e CanWalk
          this.eater = new CanEat();
          this.walker = new CanWalk();
        }
      
        // Delegamos métodos para as instâncias correspondentes 
        eat() {
          this.eater.eat();
        }
      
        walk() {
          this.walker.walk();
        }
      }
      
      const person = new Person('John');
      
      person.eat();  // Vai mostrar: Comendo...
      person.walk(); // Vai mostrar: Andando...
    
  

Vantagens da composição:

  1. Flexibilidade: composição permite combinar facilmente diferentes aspectos de comportamento e reutilizá-los em diversos contextos.
  2. Modularidade: composição favorece a criação de pequenos módulos independentes, facilitando o teste e a manutenção do código.
  3. Superação de limitações da herança: composição evita problemas associados com hierarquias de classes profundas e herança múltipla.

Problemas da composição:

  1. Complexidade de implementação: composição pode exigir lógica mais complexa para combinar funcionalidades.
  2. Redundância de código: em alguns casos, a composição pode levar à redundância de código, já que é necessário combinar explicitamente métodos e propriedades.

11.3 Comparação entre mixins e composição

Mixins:

  • Fácil de usar para adicionar funcionalidades a várias classes
  • Pode levar a conflitos de nomes e estrutura menos clara

Composição:

  • Mais flexível e modular
  • Evita problemas relacionados à herança, mas pode ser mais complexo de implementar e manter
Comentários
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION