Js 控件编写继承：extend、mixin和plugin（一）

quasiceo 2015-04-17

展开全文

Js 继承：extend、mixin和plugin（一）

简介：

我们编写前端控件时，需要给控件建立一个体系，面向对象是一个很合适的方式，但是JS本身对面向对象的一些概念支持偏弱，特别是继承的特性方面，那么我们就必须通过一系列的方式来实现继承。

Extend方式：

Extend方式非常贴近面向对象语言中的类继承，这种方式使用原型链的方式来实现继承。原型链的继承方式有几个缺点：

1）缺少针对父类的引用，例如：

function A(){
//初始化A操作
}
A.prototype = {
method1:function(){
//A的一系列操作
}
}
function B(){
//初始化B的操作
}
B.prototype = new A();
B.method1 = function(){
//先执行 A.method1的方法
//执行自己的方法
}

那么此时如何在调用A的method1方法呢？我们没有java中的’super’对象也缺少C#中的’base’对象，当然我们可以换一种写法，来解决这个问题:

var aobj = new A();
B.prototype = aobj;
B.method1 = function(){
aobj.method1.call(this);//先执行 A.method1的方法
//执行自己的方法
}

但是我们必须能缓存刚才的 aobj对象，方便在调用B.method1时取得到，所以我们就引入’superclass’字段，放在构造函数B上作为静态属性，调用时：B.superclass.method1.call(this),下面是实现：

function extend(subclass,superclass){
var superObj = new superclass();
subclass.prototype = superObj;
subclass.superclass = superObj;
return subclass;
}

上面的函数解决了superclass的问题但是又引入了新的问题，下面我们一一来讲。

2）破坏了对象的constructor属性，这个属性在使用继承的过程中非常有用，它指向的是对象的构造函数，例如：

function A(){}
//未继承 A时
function B(){}
var b = new B();
alert(b.constructor === B) //true

//B继承A
extend(B,A);
b1 = new B();
alert(b1.constructor === B) // false
alert(b1.constructor === b.constructor) //false

这样的结果绝对不是我们需要的，否则我们在编写方法的过程中调用，B.supercalss.constructor.call(this) 或者 B.superclass.constructor.superclass 会出现混乱，我们怎么办呢，继续改进extend方法，矫正constructor 属性：

function extend(subclass,superclass){
　　var superObj = new superclass();
　　subclass.prototype = superObj;
superObj.constructor = subclass;//矫正 constructor属性
　　subclass.superclass = superObj;
　　return subclass;
}

到这里看似解决了继承链的问题，但是此时我们来看一下下面情形：

function C (){}
extend(C,B);
var c = new C();
alert(c.constructor.superclass.constructor);//C

上面的结果意外的不是B 而是 C,这是什么原因呢，我们看刚才矫正constructor 属性以及上面一句：

subclass.prototype = superObj;
superObj.constructor = subclass;

我们将C的prototype的constructor修改为了C ，由于subclass.superclass = superObj;那么C的superclass跟C 的prototype是同一个对象，那么 c.constructor.superclass.constructor等同于C.prototype.constructor 结果就是 C,那么我们需要做一下修改：

function extend(subclass,superclass){
　　var superObj = new superclass();
　　subclass.prototype = superObj;
superObj.constructor = subclass;//矫正 constructor属性
　　subclass.superclass = new superclass();
　　return subclass;
}

此时我们再来调用一下：

alert(c.constructor.superclass.constructor);//B

此时的还有什么问题呢？我们来做一下实验：

function A (config){
  console.log('a constructor,config：' + config);
}
A.prototype = {
  method : function(){
    console.log('a runing');
  }
};
function B (config){
  this.constructor.superclass.constructor.call(this,config);
  console.log('b constructor,config：' + config);
}
extend(B,A);
function C (config){
  this.constructor.superclass.constructor.call(this,config);
  console.log('c constructor,config：' + config);
}
extend(C,B);
var c = new C('hello');
c.method();

输出结果：

a constructor,config:undefined

b constructor,config:undefined

Uncaught RangeError: Maximum call stack size exceeded

我们看到没有输出我们希望的结果，这里有2个问题，

1. 产生了循环调用

2. 未实例化对象前，实例化了多个父类对象，而且这些实例初始化时传入的参数为空，极易出现错误。

解决死循环我们只需要把this.constructor.superclass 替换为对应的 B.superclass即可:

function B (config){
  B.superclass.constructor.call(this,config);
  console.log('b constructor,config：' + config);
}
function C (config){
  C.superclass.constructor.call(this,config);
  console.log('c constructor,config：' + config);
}

针对调用extend时生成多个实例我们引入方法：

function create(proto, c) {
    function F() {
    }
    F.prototype = proto;
    var o = new F();
    o.constructor = c;
    return o;
}

在extend方法中我们这样调用：

var superObj = create(superclass.prototype,subclass);
subclass.prototype = superObj;
subclass.superclass = create(superclass.prototype,superclass);

此时我们的prototype 属性和superclass属性都不需要实例化对象，完整的extend方法如下：

function extend(subclass,superclass){
    function create(proto, c) {
        function F() {
        }
        F.prototype = proto;
        var o = new F();
        o.constructor = c;
        return o;
    }
　　var superObj = create(superclass.prototype,subclass);
    subclass.prototype = superObj;
    subclass.superclass = create(superclass.prototype,superclass);
　　return subclass;
}