zoukankan      html  css  js  c++  java
  • JS 继承:extend、mixin 和 plugin(二)


    Mixin:

    Mixin 是一种JS实现多继承方式,它通过复制其他类原型链(prototype)上的方法到自身原型链(prototype)上,来实现多继承。根据定义我们可以实现函数:

     /**

      * 将其他类作为mixin集成到指定类上面

      * @param {Function} c 构造函数

      * @param {Array} mixins 扩展类

      * @return {Function} 传入的构造函数

      */

    function mixin(c,mixins){

      var prototype = c.prototype;

      $.each(mixins, function (index,ext) {

    if (ext) {

    var proto = ext.prototype;

    for (var p in proto) {

    prototype[p] = proto[p];

    }

    }

    });

    return c;

    }

    有了这个方法,我们来做一下实验:

      

    function A(){};

    A.prototype = {

    method:function(){

    return 'a';

    },

    methodA:function(){

    }

    };

    function B(){};

    B.prototype = {

    method:function(){

    return 'b';

    },

    methodB:function(){

    }

    };

    function C(){}

    C.prototype = {

    method:function(){

    return 'c';

    },

    methodC:function(){

    }

    };

    mixin(C,[A,B]);

    var c = new C();

    alert(c.method()); //输出 b

    此时我们看到结果是b但是根据继承的定义,子类的方法覆盖父类,所以这个结果不是我们想要的。我们需要子类的方法覆盖minxins 的方法。那么我们继续更改:

    function mixin(c,mixins){

    var prototype = {},

       constructors = mixins['concat'](c);

    $.each(constructors , function (index,ext) {

    if (ext) {

    var proto = ext.prototype;

    for (var p in proto) {

    prototype[p] = proto[p];

    }

    }

    });

    $.each(prototype, function (k,v) {

        c.prototype[k] = v;

    });

    return c;

    }

    此时再执行上面的结果,

    var c = new C();

    alert(c.method()); //输出 c

    看上去现在mixin我们完整的实现了,但是如果C本来继承了Base类,而Base类又有方法跟mixins中的类的方法重复,我们怎么办:

    function Base(){}

    Base.prototype = {

    method:function(){

    return 'base';

    },

    methodA:function(){

      return 'base';

    }

    };

    function C(){

    }

    extend(C,Base);

    C.prototype.method = function(){

    return c

    }

    mixin(C,[A,B]);

    var c = new C();

    alert(c.method()); //输出 c

    alert(c.methodA()); //输出 base

    但是从继承的概念上讲,Base没有继承mixins中的方法,所以C从minxins中继承来的方法的优先级应该高于Base类中的方法,所以我们需要覆盖父类的方法,那么我们minxin 的最终版本是:

    function mixin(c,mixins){

    var prototype = {},

       constructors = mixins['concat'](c);

    $.each(constructors , function (index,ext) {

    if (ext) {

    var proto = ext.prototype;

    for (var p in proto) {

    //由于本身的构造函数在最后面,父类的方法不覆盖mixins中的方法

    if (proto.hasOwnProperty(p)) {

                 prototype[p] = proto[p];

               }

    }

    }

    });

    $.each(prototype, function (k,v) {

        c.prototype[k] = v;

    });

    return c;

    }

    小结:

    Mixin 在实现JS的继承是一种非常强大的方式,特别是写控件时,可以将大量抽象的逻辑封装成一个个的mixin,我们在实现一个控件时,可以将这些mixins直接引入控件类上,不需要重新编写实现。后面我会讲解一些常见的mixin。

    下一节我会讲解plugin ,同时对比plugin 跟 mixin的实现场景。

  • 相关阅读:
    Sql批处理语句
    使用waitfor 语句
    将文件分对话拆分
    集合
    用户登录系统
    fromkeys() keys() values() items()
    通讯录程序
    字符串分割方法split()函数
    装逼的本质就是把同一东西说成不同的事物
    字典
  • 原文地址:https://www.cnblogs.com/zaohe/p/js.html
Copyright © 2011-2022 走看看