深入理解Flutter中的Mixin机制

前言

Mixin到底是什么？Mixin是解决代码重用的一种方案，类似多继承。我们知道在dart中是单继承的，但是有些情况单继承就会显得不够用。

比如我们为鸟建立一个类Bird：

class Bird{
  void fly(){
  }
  void bear(){
    print("ovoid");//卵生
  }
}

再为哺乳动物建立一个类：

class Mammal{
  void bear(){
    print("viviparous");//胎生
  }
}

大部分情况下这两个类是没有问题的，但是总有个例，比如蝙蝠。它的生育是胎生，但是它像鸟一样会飞，如何继承这两种特性？

针对这种情况，dart提供了Mixin机制。

下面看看Mixin如何使用。

混入：with

我们先定义一个类A：

class A{
  void init(){
    print("a");
  }
}

然后可以通过with关键字来实现混入，如下：

class MixinObj with A{
}

这样MixinObj就继承了init函数，执行MixinObj().init()就会打印出“a”。

也可以是抽象类，如下：

abstract class A{
  void init(){
    print("a");
  }
}

也可以是mixin，如下：

mixin A{
  void init(){
    print("a");
  }
}

注意with继承的类（A）：

• 不能声明任何构造函数，即使是无参构造函数，否则会编译报错。
• 不能通过extends（implements可以）继承任何类，否则编译报错。

如果MixinObj中重写对应函数，那么就会覆盖，如下：

class MixinObj with A{
  @override
  void init(){
    print("obj");
  }
}

这时候只会打印"obj"，但是如果执行了super，如下：

class MixinObj with A{
  @override
  void init(){
    super.init();  
    print("obj");
  }
}

那么A的对应函数也会执行，就会打印“a"和“obj”。

多个类

上面MixinObj只混入了一个类，那么混入多个类呢？

我们再定义一个类B：

class B{
  void init(){
    print("b");
  }

  void b(){
    print("bb");
  }
}

然后混入MixinObj，如下：

class MixinObj with A, B{
}

这样MixinObj不仅有init函数，还多了一个b函数。

但是这里有一个问题，A和B都有init函数，那么在不重写的情况下执行哪个？

答案是最后一个生效，所以是执行了B的init函数。同样如果重写了但是执行了super，也会执行B的init函数。

这是Mixin的原则，如果有冲突的话，后面的会优先于前面的，如果没有冲突则会全部保留。这里的优先于如何理解？我们后面深入分析。

extends和implements

如果有MixinObj有父类的情况呢？我们修改代码如下：

class MixinObj extends A with B{

}

同样A和B都有init，这时候依然会执行B的init函数。同理如果重写其实也是重写B的init函数。

那么如果有接口的情况呢？比如：

class MixinObj extends A with B implements C{

}

这里C是一个抽象类，有一个init抽象函数。

执行后发现还是B的init函数生效了，所以implements不影响with，而with会影响extends。为什么？后面重点分析。

注意：extends、with、implements三个关键字是有严格顺序的：extends->with->implements，如果顺序不对就会编译出错

原理

前面我们看with可以混入多个类，同时还对extends有影响，那么这里面到底是什么原理？

为了更好的理解Mixin的机制，我们再定义一个类C如下：

class C{
  void init(){
    print("c");
  };
}

然后修改MixinObj：

class MixinObj extends C with A, B{
  @override
  void init(){
    super.init();
    print("obj");
  }
}

然后运行起来，发现打印出来的是“b”和"obj"，super.init()竟然执行的不是C的init函数。

为了搞清楚这里面的关系，我们需要从编译生成的文件源码入手。

我这里是通过Web运行的，运行后可以在开发者工具的Source中找到源码，如图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1PqwQyUU-1661764516037)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/36cf6919064d4ffbbda5fcda0693ffcf~tplv-k3u1fbpfcp-watermark.image?)]

可以看到在MixinObj.dart文件同目录下又生成了一个同名的lib.js文件，这个就是最终执行的代码，来看看其中部分代码：

  const C_A$36 = class C_A extends MixinTest.C {};
  (C_A$36.new = function() {
  }).prototype = C_A$36.prototype;
  dart.applyMixin(C_A$36, MixinTest.A);
  
  const C_B$36 = class C_B extends C_A$36 {};
  (C_B$36.new = function() {
  }).prototype = C_B$36.prototype;
  dart.applyMixin(C_B$36, MixinTest.B);
  
  MixinTest.MixinObj = class MixinObj extends C_B$36 {
    init() {
      super.init();
      core.print("obj");
    }
  };

可以看到新生成了两个类C_A$36和C_B$36，这两个类就是分别基于A和B生成的(dart.applyMixin(C_A$36, MixinTest.A))，这里可以明显看到MixinObj继承了B，B又继承了A，A才继承了C，这样就可以很好理解上面提到的几个原则，为什么右边的优先于左边的，这个优先于实际上就是一个继承链，而extends则在这个继承链的尾端。所以也理解了super执行的不是extends父类的方法。

而上面我提到过with后面的类是不允许extends继承的，所以就不会干扰整个继承链路，就不用考虑中间还有继承的情况了。

简单来说，Mixin就是将类和它的父类（如果没有就是Objecr）的继承关系之间又插入了一些继承关系，这些继承的类的顺序是从右向左的。正是这个继承链才实现了Mixin所谓的多继承

mixin的继承：on

上面我们知道可以通过呢mixin关键字定义一个mixin结构，它还可以配合on关键字使用。

这个on类似于extends，是一种继承关系，后面的父类可以是mixin，也可以是calss。

当使用on关键字，则表示该mixin只用于它父类的子类

下面用例子来更好的理解。

我们先定义一个类如下：

class MixinBase{
  void init(){
    print("base");
  }
}

然后定义一个Mixin类，如下：

mixin MixinA on MixinBase{
  @override
  void init(){
    super.init();
    print("mixina");
  }
}

这里我们来看看生成的源码：

MixinTest.MixinA = class MixinA extends MixinTest.MixinBase {};
  MixinTest.MixinA[dart.mixinOn] = MixinBase => class MixinA extends MixinBase {
    init() {
      super.init();
      core.print("mixina");
    }
  };
  dart.addTypeTests(MixinTest.MixinA);
  dart.addTypeCaches(MixinTest.MixinA);
  MixinTest.MixinA[dart.implements] = () => [MixinTest.MixinBase];
  dart.setLibraryUri(MixinTest.MixinA, I[0]);

可以看到在实际处理中就是将MixinA转化成一个类然后继承MixinBase，所以在MixinA可以用super关键字。

继续，我们将其混入MixinObj，如下：

class MixinObj with MixinBase, MixinA {
  @override
  void init(){
    super.init();
    print("obj");
  }
}

上面执行结果，依次打印“base”，“mixina”，“obj”，因为MixinObj和MixinA都调用了super。

上面代码中如果去掉MixinBase则会编译报错，因为MixinA继承（on）MixinBase，所以它必须在MixinBase的子类上使用，所以MixinObj必须extends或withMixinBase才行。因为MixinBase才行是class，所以extends或with都可以，但是如果是mixin，则必须with。

注意：with后面存在继承（on）关系的时候，父类必须在子类的前面。比如上面MixinBase如果在MixinA后面则会编译报错

on对with的影响

上面提到with的实现其实是一个继承链，with后面的类不会存在继承extends所以不会混乱，但是现在on实际上也是继承，那么有on的情况下继承链又是什么样子的？

我们再加入一个类MixinB：

mixin MixinB on MixinBase {
  @override
  void init(){
    super.init();
    print("mixinb");
  }
}

然后修改MixinObj：

class MixinObj with MixinBase, MixinA, MixinB{
  @override
  void init(){
    super.init();
    print("obj");
  }
}

这里根据上面的原则，MixinBase必须在另外两个的前面，否则报错。

执行后依次打印“base”、“mixina”、“mixinb”、“obj”，通过源码可以看到：

  const MixinBase_MixinA$36 = class MixinBase_MixinA extends MixinTest.MixinBase {};
  (MixinBase_MixinA$36.new = function() {
  }).prototype = MixinBase_MixinA$36.prototype;
  dart.applyMixin(MixinBase_MixinA$36, MixinTest.MixinA);
  
  const MixinBase_MixinB$36 = class MixinBase_MixinB extends MixinBase_MixinA$36 {};
  (MixinBase_MixinB$36.new = function() {
  }).prototype = MixinBase_MixinB$36.prototype;
  dart.applyMixin(MixinBase_MixinB$36, MixinTest.MixinB);
  
  MixinTest.MixinObj = class MixinObj extends MixinBase_MixinB$36 {
    init() {
      super.init();
      core.print("obj");
    }
  };

可以看到虽然，MixinA和MixinB都继承（on）MixinBase，但是编译后就打破了这种直接继承的关系，保持之前的继承链逻辑，因为MixinBase一定在MixinA和MixinB前面，所以它还是这两个类的父类，只是不一定是直接父类，所以并不影响。这也是为什么一定要有MixinBase且必须在它俩前的原因

这样就清晰了，如果将MixinB中的super代码去掉，那么就只打印“mixinb”、“obj”。如果将with后的MixinB和MixinA换个位置，那么执行顺序就变成了“base”、“mixinb”、“mixina”、“obj”。

总结

通过上面的详细分析，我们可以很清楚的理解了Mixin的机制，它实际上是在编译的时候为类添加了一系列继承关系来实现混入。虽然上面是在Web端实验的，但是在Android端测试也是同样的情况，处理上应该也是类似的，同理其他端如ios应该也一样。

关注公众号：BennuCTech，获取更多干货！