JS设计模式之Mixin混入模式

jiezi

6 年前

Mixin 模式就是一些提供能够被一个或者一组子类简单继承功能的类, 意在重用其功能。在面向对象的语言中，我们会通过接口继承的方式来实现功能的复用。但是在 javascript 中，我们没办法通过接口继承的方式，但是我们可以通过 javascript 特有的原型链属性，将功能引用复制到原型链上，达到功能的注入。

下面通过一个简单的例子来演示这个模式

var Car = function(settings) {
  this.model = settings.model || "no model provided"
  this.color = settings.color || "no color provided"
}

var Action = function() {}

Action.prototype = {driveForward: function() {console.log("drive forward")
  },
  driveBackward: function() {console.log("drive backward")
  },
  driveSideways: function() {console.log("drive sideways")
  }
}

// 混入模式的实现
function Mixin(recClass, giveClass) {if(arguments.length > 2) {for(var i = 2, lenth = arguments.length; i < lenth ; ++ i) {var methodName = arguments[i]
      recClass.prototype[methodName] = giveClass.prototype[methodName]
    }
  }else {for(var methodName in giveClass.prototype) {if(!recClass.prototype[methodName]) {recClass.prototype[methodName] = giveClass.prototype[methodName]
      }
    }
  }
}

Mixin(Car, Action , "driveForward", "driveBackward")

var myCar = new Car({
  model: "BMW",
  color: "blue"
})

myCar.driveForward()    //drive forward
myCar.driveBackward()   //drive backward

// 不指定特定方法名的时候，将后者所有的方法都添加到前者里
Mixin(Car, Action)

var mySportsCar = new Car({
  model: "Porsche",
  color: "red"
})

mySportsCar.driveForward()  //drive forward

优点
有助于减少系统中的重复功能及增加函数复用。当一个应用程序可能需要在各种对象实例中共享行为时，我们可以通过在 Mixin 中维持这种共享功能并专注于仅实现系统中真正不同的功能，来轻松避免任何重复。

缺点
有些人认为将功能注入对象原型中会导致原型污染和函数起源方面的不确定性。

《JavaScript 设计模式》

JS设计模式之Mixin混入模式

概念

示例

优缺点

参考