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 无法实现真正的继承。
命名冲突 - 如果组合多个对象，则命名冲突的可能性很高。

打印页面