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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。