Ext.extend 源码分析

在Ext.extend中混合使用了两种继承手段：原型集成和对象冒充。

原型集成主要表现在：

                var F = function(){},
                    sbp,
                    spp = sp.prototype;

                F.prototype = spp;
                sbp = sb.prototype = new F();
                //将子函数sb的构造函数指回去
                sbp.constructor=sb;

对象冒充主要表现在：1、var Person = Ext.extend(Animal, {...});或者 var Person = Ext.extend(Animal, {constructor: function(){....}};情况调用下的：

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

2、Person = function(){

          Person.superclass.constructor.call(this, {....});

};

Ext.extend(Person, Animal, {...});

上面只是简单的对Ext.extend的实现做了简单的描述，如果不明白，请看下面对源码的详细解析，如果哪位觉得有更好的解释或者不对的地方，欢迎批评指正

        //在本方法中使用了闭包以及自执行，当浏览器加载js时就会执行该函数，然后将return的对象返回出来
        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){
            	/**
            	 * 主要用做移位，例如以下两种写法：
            	 * 1、var Person = Ext.extend(Animal, {
            	 * 						name: 'huang',
            	 *						//如果子类提供了自己的构造方法，则使用自己提供的构造方法（overrides.constructor），
            	 *						//否则则使用则会赋值给一个函数：function(){sp.apply(this, arguments);
            	 *						//如果子类没有提供自己的构造方法，使用apply调用父类的构造函数，将父类中通过this赋值的属性继承下来，
            	 *						//但是父类的prototype上的属性不会被继承下来（对象冒充），对于父类静态的属性不会被继承下来
            	 * 						constructor: function(){...}
            	 * 					});
            	 * 2、Ext.extend(Person, Animal, {...});
            	 * 
            	 * 如果使用第二种方式那么if条件肯定是不成立的，也就不会给子类设置一个默认的构造函数，而是使用我们自己提供的构造函数Person进行
            	 * 对象的构造，正因为如此，此时也享受不到Ext默认插入的这句调用：sp.apply(this, arguments);所以需要获得父类的实例属性和方法，
            	 * 需要在构造函数中手动加入对象的冒充操作：Person.superclass.constructor.call(this, config);
            	 */
                if(Ext.isObject(sp)){
                    overrides = sp;
                    sp = sb;
                    sb = overrides.constructor != oc ? overrides.constructor : function(){sp.apply(this, arguments);};
                }
                /**
                 * 这里的亮点是空函数，因为空函数里面没有通过this进行赋值的属性，因此将sp.prototype 赋值给F.prototype
                 * 然后将new F()赋值给sb.prototype，保证了sbp的纯净性
                 */
                var F = function(){},
                    sbp,
                    spp = sp.prototype;

                F.prototype = spp;
                sbp = sb.prototype = new F();
                //将子函数sb的构造函数指回去
                sbp.constructor=sb;
                /**
                 * 给子函数sb赋属性superclass,并指向sp.prototype，自定义一个属性来记录子类的父类是什么
                 * 这样就可以直接调用  sb.superclass.constructor.call(this, xxx)了;
                 */
                sb.superclass=spp;
                /**
                 * 这是一个容错处理，防止父类的构造函数没有指正确，
                 * 这里也是主要为了在子类中调用sb.superclass.constructor.call(this, xxx)做准备
                 * 例如：Animal = function(cfg){
		 *			this.name = "dog";
		 *			Ext.apply(this, cfg);
		 *		}
		 *		Animal.prototype = {
		 *			eat: function(){
		 *				alert("animal eat");
		 *			}
		 *		}
		 *		//如果下面这一句没有写，spp.constructor 就会指向一个object
		 *  	Animal.prototype.constructor = Animal;
                 */
                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;
                /**
                 * 此处将overrides上的属性全都copy到了sb.prototype上，因此如下面的写法：
                 * Animal = function(){
                 * 		this.name = "dog";
                 * }
                 * Animal.prototype = {...};
                 * Person = function(){
                 * 		this.sex = "boy";
                 * }
                 * Ext.extends(Person, Animal, {
                 * 		name: "kk"
                 * });
                 * var p = new Person();
                 * p.alert(p.name);
                 * 这样写也出来的结果是：dog，而不是kk，因为name：kk在prototype上，原型查找机制，对象上直接有的属性优先
                 * 而如果var p = new Person({name: 'huang'});执行结果则是：huang
                 */
                Ext.override(sb, overrides);
                sb.extend = function(o){Ext.extend(sb, o);};
                return sb;
            };
        }(),

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