设计模式：混入模式

Posted 2020-07-30 海角在眼前

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了设计模式：混入模式相关的知识，希望对你有一定的参考价值。

第一次完整看一遍（javascript设计模式）该模式的介绍，感觉这不就是继承而已吗，只不过可能是部分继承。

混入（Mixin）模式

定义：

Mixin是可以轻松被一个子类或一组子类继承功能的类，目的是函数复用。继承Mixin是扩展功能的方式，另外也可能从多个Mixin类进行继承。

继承方式：

这个模式关键点在于继承，JavaScript上有几种实现继承的方式：

1. 原型继承

function A(){
     this.name = "A";
}
function B(){
}
B.prototype= new A();
var b = new B();
console.log(b instanceof A);     //true
console.log(b instanceof B);     //true

PS：无法实现多继承。

2. 拷贝继承

function extend(receiveClass, givingClass){
     for(var key in givingClass.prototype){
           receiveClass.prototype[key] = givingClass.prototype[key];
      }
}
function A(){
}
A.prototype.hello = function(){
     console.log("hello");
}
function B(){
}
extend(B, A);
var b = new B();
console.log(b instanceof A);     //false
console.log(b instanceof B);     //true

PS：支持多继承，但效率低。

3. 构造继承

function A1(){
     this.name = "A";
}
function A2(){
     this.age = 18;
}
function B(){
     A1.call(this);
     A2.call(this);
     this.desc =  "Test";
}
var b = new B();
console.log(b instanceof A);     //false
console.log(b instanceof B);     //true

PS：支持多继承

4. 实例继承

function A(){
     this.name = "A";
}
function B(){
     var instance = new A();
     instance.desc = "Test";
     return instance;
}
var b = new B();
console.log(b instanceof A);     //true
console.log(b instanceof B);     //false

PS：这种方式我觉得很糟糕，生成的对象本质是父类的实例，不是子类的对象，当然也不支持多继承。

例子：

// Define a simple Car constructor
var Car = function ( settings ) {
    this.model = settings.model || "no model provided";
    this.color = settings.color || "no colour provided";
};
// Mixin
var Mixin = function () {};
Mixin.prototype = {
    driveForward: function () {
        console.log( "drive forward" );
    },
    driveBackward: function () {
        console.log( "drive backward" );
    },
    driveSideways: function () {
        console.log( "drive sideways" );
    }
};
// Extend an existing object with a method from another
function augment( receivingClass, givingClass ) {
    // only provide certain methods
    if ( arguments[2] ) {
        for ( var i = 2, len = arguments.length; i < len; i++ ) {
            receivingClass.prototype[arguments[i]] = givingClass.prototype[arguments[i]];
        }
    }
    else {
        for ( var methodName in givingClass.prototype ) {
            if ( !Object.hasOwnProperty.call(receivingClass.prototype, methodName) ) {
                receivingClass.prototype[methodName] = givingClass.prototype[methodName];
            }
        }
    }
}
 
augment( Car, Mixin, "driveForward", "driveBackward" );
var myCar = new Car({
    model: "Ford Escort",
    color: "blue"
});
myCar.driveForward();
myCar.driveBackward();
 
augment( Car, Mixin );
var mySportsCar = new Car({
    model: "Porsche",
    color: "red"
});
mySportsCar.driveSideways();