Diferencia entre composición y herencia en JavaScript

Composición JavaScript: Composición significa Componer. Todo en JavaScript se trata como un objeto, incluso las funciones en JavaScript se tratan como un objeto de clase alta. Dichos objetos son de naturaleza bastante compleja para hacer que los objetos complejos grandes sean simples, muchos objetos pequeños se componen juntos. Por lo tanto, podemos decir que la composición es la solución más limpia, reutilizable y mejor para objetos tan grandes y complejos.

Ejemplo:

<script>
  const Motor = {
    accelerate(motorspeed, incrementSpeed) {
      return motorspeed + incrementSpeed;
    },
    decelerate(motorspeed, decrementSpeed) {
      return motorspeed - decrementSpeed;
    },
  };
 
  const StopMotor = {
    stop(motorspeed) {
      this.motorspeed = 0;
 
      return 0;
    },
  };
 
  const Brand = {
    model: "Maxpro",
  };
 
  const Treadmill = function (Design, Motor, StopMotor) {
    const brand = Object.create(Design);
    const motor = Object.create(Motor);
    const stopmotor = Object.create(StopMotor);
    const props = {
      motorspeed: 0,
      model: brand.model,
    };
 
    return {
      set(name, value) {
        props[name] = value;
      },
 
      get(name) {
        return props[name];
      },
 
      log(name) {
        console.log(`${name}: ${props[name]}`);
      },
 
      slowDown() {
        props.motorspeed = motor.decelerate(props.motorspeed, 5);
      },
 
      speedUp() {
        props.motorspeed = motor.accelerate(props.motorspeed, 10);
      },
 
      stop() {
        props.motorspeed = stopmotor.stop(props.motorspeed);
      },
    };
  };
 
  const Treadmill1 = Treadmill(Brand, Motor, StopMotor);
 
  // One can increase & decrease the motorspeed
  // according to their preferences
  Treadmill1.speedUp();
  Treadmill1.log("motorspeed");
  Treadmill1.slowDown();
  Treadmill1.log("motorspeed");
  Treadmill1.stop();
  Treadmill1.log("motorspeed");
  Treadmill1.log("model");
   
  // Let us change the model of Treadmill1 to Powermax
  Treadmill1.set("model", "PowerMax");
  Treadmill1.log("model");
</script>

Producción:

"motorspeed: 10"
"motorspeed: 5"
"motorspeed: 0"
"model: Maxpro"
"model: PowerMax"

Como se puede ver, el código anterior es mucho más limpio que el siguiente porque aquí la funcionalidad y las características de la máquina están separadas. Entonces, la clase puede implementar la funcionalidad adecuada según sus requisitos. Treadmill1 puede implementar la funcionalidad de Treadmill cuando sea necesario. Ahora, Treadmill1 puede aumentar la velocidad del motor, disminuir la velocidad del motor e incluso cambiar el nombre del modelo según los requisitos. Cuando se habla de composición, la herencia se asiste automáticamente. 

Herencia de JavaScript:La herencia es obtener algunos o todos los rasgos (funcionalidad) de los padres y luego proporcionar una estructura relacional que parece ser un poco tediosa, a diferencia de la composición de clases, que implementa cada funcionalidad por separado para que todas y cada una de las clases puedan usar la funcionalidad según sus requisitos. Mixin juega un papel vital cuando se trata de herencia en JavaScript. Mezclar es en realidad mezclar, lo que podría ser cualquier automóvil en un vehículo. Mezclar significa mezclar un automóvil con el vehículo. Para comprender correctamente el concepto, tomemos un ejemplo de Gym/Exercise Machine, que es una combinación de máquinas de fitness. La velocidad del motor se usa para aumentar, disminuir y detener la máquina, el caso que se muestra a continuación es de herencia, ya que a Treadmill1 se le asigna el objeto y todas sus propiedades de Treadmill. Entonces, ahora Treadmill1 puede realizar todas las funciones de Treadmill, es decir,

Ejemplo:

<script>
  const machineMixin = {
    set(name, value) {
      this[name] = value;
    },
 
    get(name) {
      return this[name];
    },
 
    motorspeed: 0,
 
    inclinespeed() {
      this.motorspeed += 10;
      console.log(`Inclinedspeed is: ${this.motorspeed}`);
    },
    declinespeed() {
      this.motorspeed -= 5;
      console.log(`Declinedspeed is: ${this.motorspeed}`);
    },
 
    stopmachine() {
      this.motorspeed = 0;
      console.log(`Now the speed is: ${this.motorspeed}`);
    },
  };
 
  const Treadmill = { brand: "Maxpro", motorspeed: 0 };
  const Treadmill1 = Object.assign({}, Treadmill, machineMixin);
 
  // You can increase the speed of Treadmill1
  Treadmill1.inclinespeed();
 
  // You can even decrease the speed of Treadmill1
  Treadmill1.declinespeed();
 
  // Let's just stop the machine
  Treadmill1.stopmachine();
 
  // It's Time to access the brand of  treadmill1
  console.log(Treadmill1.get("brand"));
 
  // let's change the brand of Treadmill1
  Treadmill1.brand = "PowerMax";
  console.log(Treadmill1.get("brand"));
</script>

Producción:

"Inclinedspeed is: 10"
"Declinedspeed is: 5"
"Now the speed is: 0"
"Maxpro"
"PowerMax"

En el resultado anterior, es claramente visible que todas las operaciones las realiza Treadmill1, a la que se le asignó el objeto Treadmill que posee machinemixin. En primer lugar, la velocidad del motor era 0 después de aplicar el método inclinespeed(), la velocidad del motor aumentó en 5 después de que el método de disminución de la velocidad fuera realizado que redujo la velocidad en 5 finalmente se realizó la operación de parada que detuvo la máquina haciendo que la velocidad del motor fuera cero. La marca se cambió de Maxpro a Powermax, lo que muestra el poder de la herencia. A continuación se muestra la tabla de comparación entre Composición y JavaScript.

Conclusión: tanto la herencia como la composición arrojan el mismo resultado, pero la forma de implementación es importante. La forma de implementación de la composición es mucho más fácil de leer y preferible a la primera herencia.

¡Atención lector! No dejes de aprender ahora. Obtenga todos los cursos de JavaScript importantes a un precio asequible para los estudiantes y prepárese para la industria.