Javascript Composition和Inheritance的区别用法及代码示例

JavaScript 组成： Composition的意思是撰写。 JavaScript 中的所有内容都被视为对象，甚至 JavaScript 中的函数也被视为 high-class 对象。这些对象本质上是相当复杂的，为了使大型复杂对象变得简单，许多小对象组合在一起。因此，我们可以说组合对于这种大型复杂对象来说是更干净、可重用且更好的解决方案。

例子：

Javascript


<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>

输出：

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

可以看出，上面的代码比下面的代码干净得多，因为这里机器的函数和特性都是分开的。因此该类可以根据他们的要求实现适合的函数。Treadmill1 可以在需要时实现 Treadmill 的函数。现在，Treadmill1 可以提高电机速度、降低电机速度，甚至可以根据要求更改其型号名称。当谈到组合时，继承会自动得到帮助。

JavaScript继承：继承是获得父类的部分或全部特征(函数)，然后提供一个关系结构，这似乎有点乏味，不像类组合，它单独实现每个函数，以便每个类都可以根据自己的函数使用函数要求。 Mixin 在 JavaScript 中的继承方面发挥着至关重要的作用。 Mixin 实际上是混合，可以是任何东西，即汽车到车辆中 mixin 意味着将汽车与车辆混合。为了正确理解这个概念，我们以健身房/运动机为例，它是健身机的混合体。 motorspeed 用于增加、减少和停止机器，下面说明的情况是继承的，因为 Treadmill1 被分配了 Treadmill 的对象及其所有属性。所以，现在Treadmill1可以执行Treadmill的所有函数，即可以增加电机速度，降低电机速度，甚至可以设置我们案例中的属性，该品牌之前是Maxpro，后来是PowerMax。

例子：

Javascript


<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>

输出：

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

在上面的输出中可以清楚地看到，所有操作都是由 Treadmill1 执行的，Treadmill1 被分配了拥有 machinemixin 的 Treadmill 对象。首先，应用 inclinespeed() 方法后，电机速度为 0，在采用下降速度方法后，电机速度增加了 5。执行的操作将速度降低 5 最后执行的停止操作通过使其电机速度为零来停止机器。品牌从Maxpro更名为Powermax，彰显传承的力量。下面给出了 Composition 和 JavaScript 之间的比较表。

作品	继承
遵循has-a关系	遵循is-a关系
组合允许code-reuse。	继承不允许code-reuse。
在组合中，您不需要扩展类	在继承中，您将需要扩展类。
在组合中，你将不需要 Mixin。	在继承中，Mixin扮演了主要角色
构图更加灵活。	与组合相比，继承的灵活性较差。

结论：继承和组合都会产生相同的结果，但实现方式很重要。组合实现方式更易于阅读并且优于首次继承。

相关用法

注：本文由纯净天空筛选整理自vaishalibachani大神的英文原创作品 Difference between Composition and Inheritance in JavaScript。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。