Extjs源码——extend

Extjs的extend方法是框架本身的一个基础方法，用于形成所有组件之间的继承结构。如果要理解extend方法实现，必须要理解javascript面向对象基础（可参考此文）。

先写一个extend方法具体应用的例子：

Person = function(atts){

	if(atts){
		this.id = atts.id;
		this.name = atts.name;
		this.age  = atts.age;
	}
	
};

Person.prototype.sayName = function(){
	alert(this.name);
};

Programmer = Ext.extend(Person,{
	language : null,
	constructor : function(atts){
		this.language = atts.language;
		Programmer.superclass.constructor.call(this,atts);
		this.name +='&';
	},
	sayLan : function(){
		alert(this.language);
	},
	sayName : function(){
		alert('My name is: ' + this.name);
	}
});

new Person({
	id : '1',
	name : 'empty',
	age : 26
}).sayName();
var programer = new Programmer({
	id : '2',
	name : 'alex',
	age : 26,
	language : 'javascript'
});
programer.sayName();
programer.sayLan();

 这是对extend方法一个简单的应用，实现了person和programmer的继承，同时实现了对属性的扩展、父类属性的修改、方法的重写、方法的扩展。

重点需要关注supperclass、constructor属性。同时，在constructor的call方法之后有一句this.name +='&';，如果放在call方法之前就起不到修改name属性的效果。

 

以下为对Extjs中extend方法加了注解之后的源码。

/**
 * 创建一个属性拷贝的方法，用于设置子类的override方法
 * @param {} o
 */
var io = function(o){
    for(var m in o){
        this[m] = o[m];
    }
};
var oc = Object.prototype.constructor;

return function(sb, sp, overrides){
	/**
	 * 判断sp是否是一个对象，如果是对象，这表示只有两个参数，其中第二参数为需要覆盖的属性或方法。
	 * 将sb转化为构造方法。
	 */
    if(Ext.isObject(sp)){
        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;
    /**
     * 实现设置sb的prototype为sp，这里通过一个构造方法为空的F类进行赋值，很妙
     */
    sbp = sb.prototype = new F();
    /**
     * 将子类的构造方法设置到子类的prototype的constructor。
     */
    sbp.constructor=sb;
    /**
     * 设置子类superclass属性为父类的prototype
     */
    sb.superclass=spp;
    /**
     * 设置父类prototype的constructor
     */
    if(spp.constructor == oc){
        spp.constructor=sp;
    }
    /**
     * 设置子类的override方法
     */
    sb.override = function(o){
        Ext.override(sb, o);
    };
    
    /**
     * 子类的prototype的superclass赋值为父类的prototype，superclass还有个简写supr
     *  不知道为什么？
     */
    sbp.superclass = sbp.supr = (function(){
        return spp;
    });
    /**
     * 设置子类的prototype的override方法
     */
    sbp.override = io;
    /**
     * 实现属性和方法的重写
     */
    Ext.override(sb, overrides);
    /**
     * 设置子类的extend方法
     */
    sb.extend = function(o){return Ext.extend(sb, o);};
    return sb;
};

 阅读源码时可以理解部分逻辑，但由于javascript功底有限，有些处理方式还是不知所以然。