JavaScript - Mixin

JavaScript 中的 Mixin

JavaScript 中的 Mixin 允許你將其他物件或類的屬性新增到目標物件或類的原型中，並擴充套件目標物件的功能。之後，你可以使用目標物件訪問其他物件的方法。

在 JavaScript 中，每個物件都包含一個稱為原型的內建屬性。原型本身就是一個物件。因此，原型物件將擁有自己的原型屬性，從而形成我們所說的原型鏈。原型鏈有助於從其他物件繼承屬性和方法。

此外，你也可以說 Mixin 允許你借用其他物件或類中的功能。

在 JavaScript 中，繼承允許你擴充套件物件或類功能。類似地，Mixin 也允許你擴充套件物件或類的功能。

JavaScript 使用物件的 Mixin

使用 JavaScript Mixin 的概念，你可以透過新增其他物件的屬性和方法來擴充套件目標物件的功能。

語法

以下是 JavaScript 中使用 Mixin 與物件的語法：

Object.assign(target, obj);

在上述語法中，我們使用了 Object.assign() 方法來擴充套件目標物件的功能。

引數

target − 你需要擴充套件其功能的物件。
obj − 其功能將由目標物件擴充套件的物件。

示例

在下面的程式碼中，父物件包含 printMessage()，子物件包含 showName() 方法。兩種方法都列印不同的訊息。

之後，我們使用 Object.assign() 方法將父物件的方法擴充套件到子物件。

接下來，我們僅使用子物件呼叫父物件和子物件的訊息，你可以觀察輸出結果。

<html>
<body>
   <p id = "output"> </p>
   <script>
      const output = document.getElementById("output");
      const parent = {
         name: "parent",
         printMessage() {
            output.innerHTML = 'This is a parent object.<br>';
         }
      }
      const child = {
         showName() {
            output.innerHTML += 'This is a child object.<br>';
         }
      }
      Object.assign(child, parent); // Mixins
      child.printMessage(); //Executing the method of parent object using child object
      child.showName();
   </script>
</body>
</html>

輸出

This is a parent object.
This is a child object.

JavaScript 使用類的 Mixin

你也可以透過物件使用 Mixin 來擴充套件類的功能。

語法

我們可以按照以下語法使用 Mixin 與類：

Object.assign(class_name.prototype, obj);

在上述語法中，我們將類的原型作為第一個引數，並將需要擴充套件類功能的物件作為第二個引數傳遞。

示例

在下面的程式碼中，animal 物件包含 'eats' 屬性和 run() 方法。cat 類僅包含建構函式。

我們將 animal 物件的方法和屬性新增到 cat 類的原型中。之後，我們使用 cat 類的例項執行 run() 方法。

<html>
   <body>
   <p id = "output"> </p>
   <script>
      const output = document.getElementById("output");
      const animal = {
         eats: true,
         run() {
            output.innerHTML += "Animals run. <br>";
         }
      }

      class cat {
         constructor() {
            this.name = "Cat";
         }
      }
      Object.assign(cat.prototype, animal); // Mixins
      const catObj = new cat();
      output.innerHTML += "Cat eats: " + catObj.eats + "<br>";
      catObj.run();
   </script>
</body>
</html>

輸出

Cat eats: true
Animals run.

使用 Mixin 實現多重繼承

JavaScript 不支援多重繼承，這意味著無法使用多個類或物件擴充套件一個類的功能。因此，你可以使用 Mixin 實現多重繼承。

語法

使用者可以按照以下語法使用 Mixin 實現多重繼承。

Object.assign(target, ob1, obj);

上述語法會將 obj1 和 obj2 物件的功能新增到目標物件中。

示例：繼承多個物件

在下面的程式碼中，eat 物件包含 eatFood() 方法，drink 物件包含 drinkWater() 方法。

我們將 eat 和 drink 物件的屬性和方法新增到 person 物件中。之後，我們使用 person 物件訪問 eatFood() 和 drinkWater() 方法。

<html>
<body>
   <div id = "demo"> </div>
   <script>
      const output = document.getElementById("demo");
      const eat = {
         eatFood() {
            output.innerHTML += "Person is eating the food! <br>";
         }
      }
      const drink = {
         drinkWater() {
            output.innerHTML += "Person is drinking water! <br>";
         }
      }
      const person = {
         name: "John",
      }
      Object.assign(person, eat, drink); // Mutiple Mixins
      person.eatFood();
      person.drinkWater();
   </script>
</body>
</html>

輸出

Person is eating the food!
Person is drinking water!

示例：使用類的多重繼承

下面的示例演示了使用多個類擴充套件一個類。

Entity 類是父類，它包含 state() 方法。Human 類擴充套件了 Entity 類，幷包含 walk() 方法。

Driver() 函式建立一個新類，擴充套件作為引數傳遞的類，並將 Drive() 方法新增到該類中。類似地，Swimmer() 函式建立一個新類，使用作為引數傳遞的類擴充套件該類，並新增 swim() 方法。

之後，我們定義了多個其他類。person 類擴充套件了 Driver() 類返回的類。Driver() 函式返回一個用 Human 類擴充套件的新類。同樣的方式，我們建立了 Mechanic 和 SwimmerPerson 類。

之後，我們建立了各個類的物件並執行了它們繼承的方法。

<html>
<body>
   <p id = "demo"> </p>
   <script>
      let output = document.getElementById("demo");
      // Parent class
      class Entity {
         state() {
            return 'It is in the idle state!';
         }
      }
      // Child class
      class Human extends Entity {
         walk() {
            return 'walking on the field.';
         }
      }
      // Custom functionalities
      function Driver(parentClass) {
         return class extends parentClass {
            drive() {
               return 'driving on the road';
            }
         };
      }
      function Swimmer(parentClass) {
         return class extends parentClass {
            swim() {
               return 'swimming in water';
            }
         };
      }
      // Some other classes
      class Person extends Driver(Human) { }
      class Mechanic extends Driver(Entity) { }
      class SwimmerPerson extends Swimmer(Person) { }
      // Objects of classes
      const person = new Person();
      const personDrive = person.drive();
      const mechanic = new Mechanic();
      const mechanicDrive = mechanic.drive();

      const swimmerPerson = new SwimmerPerson();
      const swimmerDrive = swimmerPerson.drive();
      const swimmerSwim = swimmerPerson.swim();

      // Printing outputs
      output.innerHTML += 'State of the PERSON: ' + personDrive + '<br>';
      output.innerHTML += 'State of the MECHANIC: ' + mechanicDrive + '<br>';
      output.innerHTML += 'State of the SWIMMER PERSON: ' + swimmerDrive + ", " + swimmerSwim + '<br>';
   </script>
</body>
</html>

輸出

State of the PERSON: driving on the road
State of the MECHANIC: driving on the road
State of the SWIMMER PERSON: driving on the road, swimming in water

這樣，您可以使用 mixin 來實現多重繼承。

使用 Mixin 的好處

這裡，我們列出了一些使用 mixin 的好處。

程式碼重用性 - 您可以透過借用其他類中其他物件的屬性和方法來重用程式碼。
多重繼承 - JavaScript 預設不支援多重繼承，但您可以使用 mixin 實現類似的功能。
可擴充套件性 - 您可以使用 mixin 為類或物件新增額外的功能，而無需更改物件或類的結構。

Mixin 的侷限性

這裡，我們列出了一些 mixin 的侷限性和一些開發人員避免使用 mixin 的原因。

複雜性 - 如果過度使用 mixin，會增加程式碼的複雜性，這在本文件的最後一個示例中可以看到。
偽繼承 - mixin 可以滿足繼承的要求，但使用 mixin 無法實現真正的繼承。
命名衝突 - 如果組合多個物件，則命名衝突的可能性很高。

列印頁面