「这是我参与2022首次更文挑战的第20天，活动详情查看：2022首次更文挑战」。

前言

一些其它编程语言允许多重继承。JavaScript 不支持多重继承，若想在JS中实现多继承，就必须用到混合模式Mixin。

Mixin是面向对象程序设计语言中的类，提供了方法的实现。其他类可以访问mixin类的方法而不必成为其子类。—— 维基百科

其原理是用过对象的追加方法assign对目标对象追加要实现的类:

在 JavaScript 中，我们只能继承单个对象。每个对象只能有一个 [[Prototype]]。并且每个类只可以扩展另外一个类。

当有一个 StreetSweeper 类和一个 Bicycle 类，现在想要一个它们的 mixin：StreetSweepingBicycle 类。

或者，有一个 User 类和一个 EventEmitter 类来实现事件生成（event generation），并且想将 EventEmitter 的功能添加到 User 中，以便用户可以触发事件（emit event）。这个时候就可以用mixin来实现。

基础示例

在 JavaScript 中构造一个 mixin 最简单的方式就是构造一个拥有实用方法的对象

例如：先创建两个携带方法的对象

// mixin
let sayHi = { //对象
  sayHi() {
    console.log(`Hello ${this.name}`);
  }
};
let sayBye = { //对象
  sayBye() {
    console.log(`Bye ${this.name}`);
  }
};

现在再来创建一个User类

class User { //类
  constructor(name) {
    this.name = name;
  }
}

将这个对象都拷贝给User类

// 拷贝方法
Object.assign(User.prototype, sayHi,sayBye);

运行结果：

可以看到 User同时实现了sayHi和sayBye的方法。它的原理就是利用的User.prototype是一个对象，所以我们可以使用对象追加方法assign方法，将sayHi和sayBye追加到User的构造原型中，从而模拟实现了多继承。

总结

JS是基于对象的，类和对象都是对象模板。混合mixin，指的是将一个对象的全部或者部分拷贝到另一个对象上去。其实就是属性了。

扩展

Mixin的实际应用

很多js框架中都会用到Mixin 模式，如 Vue.mixin 的实现

Mixin的缺点

Mixin虽然是一种很灵活的代码复用方式，但把功能注入原型对象，会导致原型污染和函数来源方面的不确定性，在大型系统中可能是一个严重的问题。

参考资料：

JS Mixins

《JavaScript设计模式》

🎨【点赞】【关注】不迷路，更多前端干货等你解锁

往期推荐

👉 一起来看看JS的原型继承

👉 JS中的getter和setter你会用吗？

👉 深入理解ES6箭头对象

👉 JS的装饰器模式实例分析

JavaScript里类的Mixin模式

前言

基础示例

扩展