Extjs的Ext.extend()引发的Javascript继承讨论

Js中的继承实现依靠原型链来实现的。什么是原型链？Javascript中的构造函数有个prototype属性，这个属性返回原型对象的引用，用于提供对象的类的一些基本操作和固有的属性，这里可以参照前一篇文章。

举个例子：

var Person = function(name){   
    this.name = name;
};
Person.prototype = {
    //可以在这里提供Person的基本功能
    getName : function(){
        return this.name;
    }
}

属性继承的本质就是一个对象可以访问到它的原型链上任何一个原型对象的属性，在访问对象的某个成员(属性或方法)时，如果这个成员未见于当前对象，那么js会在原型对象中查找它，如果还没有找到，就继续到下一级._proto_的原型对象对象中查找，直至找到。如果没有找到就会返回undifined，继承就是指构造这样的原型链。

一

那么就来构造原型的链接，来实现继承。举例，实现一个Japannes类，继承Person；

var Japannes = function(name, nation){
    //调用父类构造函数，复制属性和方法
    Person.apply(this,arguments);
    this.nation = nation;
};
//这样行吧？直接把原型复制（注意是引用类型，值传递）
Japannes.prototype = Person.prototype;

//定义自己的方法
Japannes.prototype.getNation = function(){
        return this.nation + "is Stupid";
};

var a = new("Cangjingkong","Japan");
alert(a.getName());
alert(a.getNation);

这样就实现了基本的继承，Japannes增加了name属性和拥有了getNation方法；但是，Japannes.prototype = Person.prototype; 这是引用类型，修改Japannes同时也修改了Person，Person原型也增加了一个getNation（），这本身就是不能容忍的，且使类之间形成强耦合性，这不是我们要的效果。

二

常用的继承方式是Chinese.prototype = new Person();用父类的一个实例来继承，这样是完全没有问题的，但是假如父类的构造比较庞大，这样创建他的一个实例开销就会比较大，不是主要目的。

查看Extjs中Extend的源码，如下：

extend : function(){

    // inline overrides
    var io = function(o){
        for(var m in o){
            this[m] = o[m];
        }
    };

    var oc = Object.prototype.constructor;

    return function(sb, sp, overrides){
        if(typeof sp == 'object'){
            overrides = sp;
            sp = sb;
            sb = overrides.constructor != oc ? overrides.constructor : function(){sp.apply(this, arguments);};

        }

        var F = function(){},
            sbp,
            spp = sp.prototype;
         //空类实现继承
        F.prototype = spp;
        sbp = sb.prototype = new F();
        sbp.constructor=sb;
        sb.superclass=spp;
        if(spp.constructor == oc){
            spp.constructor=sp;

        }
        sb.override = function(o){
            Ext.override(sb, o);

        };
        sbp.superclass = sbp.supr = (function(){
            return spp;

        });

        sbp.override = io;
        //实现重写，在原型prototype上；
        Ext.override(sb, overrides);
        sb.extend = function(o){return Ext.extend(sb, o);};
        return sb;

    };

}(),

override : function(origclass, overrides){
    if(overrides){
        var p = origclass.prototype;
        Ext.apply(p, overrides);
        if(Ext.isIE && overrides.hasOwnProperty('toString')){
            p.toString = overrides.toString;
        }
    }
}

三

其中用一个空类实现了继承，参照其写法，在这里可以这么写：

var F = function(){};
F.prototype = Person.prototype;
Japannes.prototype = new F();

这样既避免了污染父类Person的原型，也减少了创建父类实例（尤其是比较大的构造，例如在Extjs中常用的Web组件配置属性是比较多的）的开销，我们可以整理代码如下：

var Person = function(name){
    this.name = name;
};
Person.prototype = {
    getName : function(){
        return this.name;
    }
};
 
var Chinese = function(name, nation){
    Person.apply(this,arguments);
    this.nation = nation;
};
var F = function(){};
F.prototype = Person.prototype;
Chinese.prototype = new F();
//注意这里的设计
if(Chinese.prototype.constructor == Object.prototype.constructor){
    Chinese.prototype.constructor = Chinese;
}
Chinese.prototype.getNation = function(){
        return this.nation;
};
 
var c = new Chinese("zhuangzhong","China");
alert(c.getNation());
alert(c.getName());

值得注意的是，在javascript中有 f.prototype.constructor = f,这样的设计，由于Person父类的prototype被覆盖（用字面量重写），这里Chinese.prototype.constructor既不是Person更不是Chinese，而是一直查询到Object（），于是这里有必要重写一下其构造函数。

最后，我们来看一个例子，ext-all-debug.js中的Ext.state.CookieProvider，它是作为Cookie的提供类来使用的：

Ext.state.CookieProvider = Ext.extend(Ext.state.Provider, {
    constructor : function(config){
        Ext.state.CookieProvider.superclass.constructor.call(this);
        this.path = "/";
        this.expires = new Date(new Date().getTime()+(1000*60*60*24*7));
        this.domain = null;
        this.secure = false;
        Ext.apply(this, config);
        this.state = this.readCookies();
    },
    set : function(name, value){
        ...
    }

重写子类的constructor构造函数，在子类使用时需要使用SubClass.superclass.constructor.call(this,…);的方式，以便它的基类可以将构造函数赋值给子类，复制父类属性。