13、JavaScript继承实现(二) —— zInherit、xbObjects

• zInherit

利用zInherit库（可以从http://www.nczonline.net/downloads 处下载），不必使用原型链，也可实现方法继承。
Inherit库给Object类添加了两个方法，inheritFrom()和instanceOf()。inheritFrom()方法负担重任，负责复制指定类的所有方法。下面一行代码用原型链使ClassB继承ClassA的方法：
ClassB.prototype = new ClassA();
可用下面代码替换上面的代码：
ClassB.prototype.inheritFrom(ClassA);
inheritFrom() 方法接受一个参数，即要复制的方法所属的类。注意，与原型链相对的是，这种方式并未真正创建要继承的类的实例(具体请参考zInherit源码)，这样更安全，开发者也无需担心构造函数的参数。

instanceOf() 方法是instanceof运算符的替代品。因为这种方式根本不使用原型链，所以这行代码无效：
base3 instanceof Base1
但instanceOf()方法弥补了这项损失，与inheritFrom()一起使用，可以跟踪所有的超类：
base3.instanceOf(Base1);

zInherit多层继承具体示例代码如下：

function Base1(base1Name) {    
    this.base1Name = base1Name;    
    if (typeof Base1._initialized == "undefined") {    
        Base1.prototype.getBase1 = function () {    
            alert(this.base1Name);    
        };    
        Base1._initialized = true;    
    }    
}     
//Base2继承Base1     
function Base2(base1Name, base2Name) {    
    this.base2Name = base2Name;     
    //使用call方式对属性继承     
    Base1.call(this, base1Name);    
    if (typeof Base2._initialized == "undefined") {     
        //使用zinherit方式对方法时行复制继承     
        Base2.prototype.inheritFrom(Base1);    
        Base2.prototype.getBase2 = function () {    
            alert(this.base2Name);    
        };    
        Base2._initialized = true;    
    }    
}     
//Base3继承Base2     
function Base3(base1Name, base2Name, base3Name) {    
    this.base3Name = base3Name;     
    //使用call方式对属性继承    
    Base2.call(this, base1Name, base2Name);    
    if (typeof Base3._initialized == "undefined") {     
        //使用zinherit方式对方法时行复制继承     
        Base3.prototype.inheritFrom(Base2);    
        Base3.prototype.getBase3 = function () {    
            alert(this.base3Name);    
        };    
        Base3._initialized = true;    
    }    
}    
var base3 = new Base3("base1Name", "base2Name", "base3Name");     
//Base3可以访问从父类Base2继承过来的方法     
base3.getBase2();//base2Name    
//Base3可以访问从超类Base1继承过来的方法     
base3.getBase1();//base1Name     
//当然更可以访问自己的方法     
base3.getBase3();//base1Name    
//因为zinherit方式未采用原型链的方法，所以不支持instanceof     
alert(base3 instanceof Base1);//false    
//但可以用zinherit的instanceOf方法来避免该问题     
alert(base3.instanceOf(Base1));//true     
alert(base3.instanceOf(Base2));//true     
alert(base3.instanceOf(Base3));//true    

另外：原型链不能实现动态原型主旨，即把类的所有代码放置在它的构造函数中。zInherit库修正了这个问题，它允许在构造函数内部调用 inheritFrom()方法，使用inheritFrom()方法时，并未重写prototype对象，只是为其加入方法而已(从zInherit源码分析可知)。使用这种方法，即可避开原型链的限制，实现动态原型本意。所以zInherit支持动态原型，从上面的示例就可以看得出来。

 

zInherit的另一个好处就是除了支持多层继承、动态原型法，还支持多重继承，即一个类可以继承多个类，这些类是同一级别的。

zInherit多重继承示例如下，显示的结果与多层继承一样：  

function Base1(base1Name) {    
    this.base1Name = base1Name;    
    if (typeof Base1._initialized == "undefined") {    
        Base1.prototype.getBase1 = function () {    
            alert(this.base1Name);    
        };    
        Base1._initialized = true;    
    }    
}    
function Base2(base2Name) {    
    this.base2Name = base2Name;    
    if (typeof Base2._initialized == "undefined") {    
        Base2.prototype.getBase2 = function () {    
            alert(this.base2Name);    
        };    
        Base2._initialized = true;    
    }    
}     
//多重继承：Base3继承Base1与Base2     
function Base3(base1Name, base2Name, base3Name) {    
    this.base3Name = base3Name;     
    //使用call方式对属性继承     
    Base1.call(this, base1Name);    
    Base2.call(this, base2Name);    
    if (typeof Base3._initialized == "undefined") {    
        //使用zinherit方式对方法时行复制继承     
        Base3.prototype.inheritFrom(Base1);    
        Base3.prototype.inheritFrom(Base2);    
        Base3.prototype.getBase3 = function () {    
            alert(this.base3Name);    
        };    
        Base3._initialized = true;    
    }    
}    
var base3 = new Base3("base1Name", "base2Name", "base3Name");     
//Base3可以访问从父类Base2继承过来的方法     
base3.getBase2();//base2Name    
//Base3可以访问从超类Base1继承过来的方法     
base3.getBase1();//base1Name    
//当然更可以访问自己的方法     
base3.getBase3();//base3Name    
//因为zinherit方式未采用原型链的方法，所以不支持instanceof     
alert(base3 instanceof Base1);//false    
//但可以用zinherit的instanceOf方法来避免该问题     
alert(base3.instanceOf(Base1));//true     
alert(base3.instanceOf(Base2));//true     
alert(base3.instanceOf(Base3));//true    

 

zinherit.js源码分析

/**    
* Inherits properties and methods from the given class.    
* @scope public    
* @param fnClass The constructor function to inherit from.    
*/   
Object.prototype.inheritFrom = function (fnClass) {    
    /**    
    * Inherits all classes going up the inheritance chain recursively.    
    * @param fnClass The class to inherit from.    
    * @param arrClasses The array of classes to build up.    
    * @scope private    
    */   
    function inheritClasses(fnClass, arrClasses) {    
        /*   
        把父类构造函数放入到子类构造函数的私有属性数组中，用数组实现多继承，即可以继承多个。   
        此数组里最后存放了所有父类及超类的构造函数，如果子类继承了多个类，则此数组会存储多个构造函数。    
        */   
        arrClasses.push(fnClass);    
        //如果父类构造函数继承了其他类，则递归，这样可以实现多层继承     
        if (typeof fnClass.__superclasses__ == "object") {    
            for (var i = 0; i < fnClass.__superclasses__.length; i++) {    
                //fnClass.__superclasses__[i]为父类的构造函数，如果父类继承了多个类，    
                //则fnClass.__superclasses__.length会大于1     
                inheritClasses(fnClass.__superclasses__[i], arrClasses);    
            }    
        }    
    }     
    //this为子类构造函数的原型    
    //this.constructor为子类构造函数    
    //this.constructor.__superclasses__为子类构造函数的私有属性数组     
    if (typeof this.constructor.__superclasses__ == "undefined") {     
        //这里的数组用来实现instanceOf用的     
        this.constructor.__superclasses__ = new Array();    
    }     
    //fnClass为父类构造函数     
    inheritClasses(fnClass, this.constructor.__superclasses__);    
      
    //----上面的操作是为了instanceOf方法应用设计的，下面才是方法继承    
    //把父类原型里存储的方法复制到子类构造函数原型中(注：这里是方法地址的复制)，而不是真真的方法复制     
    for (prop in fnClass.prototype) {    
        if (typeof fnClass.prototype[prop] == "function") {     
            //this为子类构造函数的原型实例，这里把父类原型实例中的属性(一般指方法属性，但不排除字    
            //段属性)一一复制到子类构造函数的原型实例中去。而不是采用原型链的方式：Base3.prototype=new Base2();     
            this[prop] = fnClass.prototype[prop];    
        }    
    }    
};    
/**    
   * Determines if the given object is an instance of a given class.    
   * This method is necessary because using {@link #inheritFrom} renders    
   * the JavaScript <code>instanceof</code> operator useless.    
   * @param fnClass The constructor function to test.    
   * @return True if the object is an instance of the class, false if not.    
   * @scope public    
   */   
Object.prototype.instanceOf = function (fnClass) {     
   //如果是base3.instanceOf(Base3)时     
    if (this.constructor == fnClass) {    
        return true;     
    //如果是采用zinherit继承方式时，则this.constructor.__superclasses__为数组对象     
    } else {    
        if (typeof this.constructor.__superclasses__ == "object") {     
            //再进一步判断，如：调用base3.instanceOf(Base1)时     
            for (var i = 0; i < this.constructor.__superclasses__.length; i++) {    
                if (this.constructor.__superclasses__[i] == fnClass) {    
                    return true;    
                }    
            }    
            return false;    
        } else {    
            return false;    
        }    
    }    
};   

• xbObjects

由 Netscape 公司的 Bob Clary 于 2001 年 Netscape 6 （ Mozilla 0.6 ）发布时编写而成。它支持从那时起的所有 Mozilla 版本及其他现代浏览器（ IE 、 Opera 和 Safari ）。可以从 http://archive.bclary.com/xbProjects-docs/xbObject/ 处下载。

 

   支持继承，还支持方法的重载和调用超类方法的能力。

   

 第一步，必须注册类，此时，需定义它是由哪个类继承而来：

这里，子类和超类名都以字符串形式传进来，而不是指向它们的构造函数的指针 。这个调用必须放在指定子类的构造 函数前 。

 如果新的类未继承任何类，调用 registerClass() 时也可以只用第一个参数。

<script type="text/javascript"></script>

 

 

第二步 ，在构造函数内调用 defineClass() 方法 ，传给它类名及被 Clary 称为 原型函数 （ prototype function ）的指针，该函数用于初始化对象的所有属性和方法 ，例如：

  

第三步，为该类创建 init() 方法 。该方法负责设置该类的所有属性 ，它必须接受与构造函数相同的参数。作为一种规定， init() 方法总是在 defineClass() 方法后调用 。例如：

init() 方法中调用的 parentMethod() 方法。 xbObjects 以这种方式允许类调用它的超类的方法 。 parentMethod() 方法接受任意多个参数，但第一个参数总是要调用的父类方法的名字（该参数必须是字符串，而不是函数指针），所有其他参数都被传给父类的方法。

在这个例子中，首先调用 init() 方法，这是 xbObjects 运行所必需的。即使 ClassA 未注册超类， xbObejcts 都会为它创建一个所有类的默认超类，即超类方法 init() 所属的类。

 

第四步 也是最后一步，在原型函数内添加其他类的方法 ：

xbObjects多层继承示例如下：     

//注册类     
_classes.registerClass("Base1");    
function Base1(base1Name) {     
    //基于原型来初始化类的属性与方法     
    function prototypeFunction() {     
        //init方法设置该类的所有属性，它必须接收与构造函数相同的参数签名     
        Base1.prototype.init = function (base1Name) {     
            //...     
            this.parentMethod("init");    
            this.base1Name = base1Name;    
        };     
        //设置方法     
        Base1.prototype.getBase1 = function () {    
            alert(this.base1Name);    
        };    
    }     
    //定义类，用来初始化对象所有属性与方法     
    _classes.defineClass("Base1", prototypeFunction);    
    this.init(base1Name);    
}     
//Base2继承Base1     
_classes.registerClass("Base2", "Base1");    
function Base2(base1Name, base2Name) {    
    function prototypeFunction() {     
        //init方法接收与构造函数相同的参数签名     
        Base2.prototype.init = function (base1Name, base2Name) {    
            //...     
            this.parentMethod("init", base1Name);    
            this.base2Name = base2Name;    
        };     
        //设置方法     
        Base2.prototype.getBase2 = function () {    
            alert(this.base2Name);    
        };    
    }     
    //定义类，用来初始化对象所有属性与方法     
    _classes.defineClass("Base2", prototypeFunction);    
    this.init(base1Name, base2Name);    
}     
//Base3继承Base2     
_classes.registerClass("Base3", "Base2");    
function Base3(base1Name, base2Name, base3Name) {    
    function prototypeFunction() {    
        Base3.prototype.init = function (base1Name, base2Name, base3Name) {     
            //...     
            this.parentMethod("init", base1Name, base2Name);    
            this.base3Name = base3Name;    
        };     
        //设置方法     
        Base3.prototype.getBase3 = function () {    
            alert(this.base3Name);    
        };    
    }     
    //定义类，用来初始化对象所有属性与方法     
    _classes.defineClass("Base3", prototypeFunction);    
    this.init(base1Name, base2Name, base3Name);    
}    
var base3 = new Base3("base1Name", "base2Name", "base3Name");     
//Base3可以访问从父类Base2继承过来的方法     
base3.getBase2();//base2Name    
//Base3可以访问从超类Base1继承过来的方法     
base3.getBase1();//base1Name    
//当然更可以访问自己的方法     
base3.getBase3();//base3Name    
//因为xbObjects方式未采用原型链的方法，所以不支持instanceof     
alert(base3 instanceof Base1);//false    
//但可以用zinherit的instanceOf方法来避免该问题     
alert(base3.isInstanceOf(Base1));//true     
alert(base3.isInstanceOf(Base2));//true     
alert(base3.isInstanceOf(Base3));//true    

 

注：上面this.parentMethod("init"...)前最好不要加上中文注释，否则可能出问题。

 

附：zInherit、xbObjects