EXT JS 源代码分析系列—Ext.extend

EXT JS 源代码分析系列—Ext.extend

Ext.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.override = io;
                Ext.override(sb, overrides);
                sb.extend = function(o){Ext.extend(sb, o);};
                return sb;
            };
        }(),

 

下面来分析一下这个函数的实现逻辑

首先,定义了一个函数,这个函数将参数对象的属性复制到this指向的对象中。

接着定义一个变量ocObject constructor)指向Javascript基本对象类的构造函数。

var oc = Object.prototype.constructor;

 

然后定义一个匿名函数,并将该匿名函数。

return function(sb, sp, overrides){

 

下面来继续看看这个匿名函数的逻辑,这个函数有三个参数,sb, sp, overrides,分别表示子类,父类,以及Object literal(文本对象,即用文本描述表示的对象)。当以三个参数调用时,第一个参数为子类,第二个为父类,第三个为需要额外重载的Object literal。当调用的时候提供两个参数时,有两种情况,

l  第一个参数为父类,第二个为需要额外重载Object literal

l  第一个参数为子类,第二个参数为父类

通过第一部分Javascript基础,我们知道Javascript的类定义实际上是定义个构造函数,也就是说Javascript类的类型是”function”。有了这个知识,我们就能理解这个匿名函数第一行代码if判断的意思了,用于判断是调用方式是否两个参数,且第二个参数为Object literal类型的。如:

function Rectangle(w,h){
       this.width = w;
       this.Height = h;
}
ColoredRectangle = Ext.extend(Rectangle, {color:null});

   

 

 

如果是这种情况,第一个参数sb实际上是父类,第二个参数sp实际上是Object literal。所以应该做下交换,让sp指向父类,override指向传入得Object literal.

这就是这里的if语句做的事情。

if(typeof sp == 'object'){

                    overrides = sp;

                    sp = sb;

 

这样overrides就指向了{color:null}这个Object literalsp指向了Rectangle了。

 

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

这行代码意思稍微有点复杂,是个?:运算符,用来设置子类的构造函数。

首先判断overrides.constructor 是否是ocObject.prototype.constructor),也就是判断调用者是否提供了构造函数定义。,在我们的例子中overrides{color:null}这就是Object,没有提供构造函数,于是用function(){sp.apply(this, arguments);}作为子类的构造函数,这个在第一部分已经说明了,sp.apply(this, arguments)是调用父类的构造函数

 

下面看看overrides.constructor != oc的情况,代码如下

function Rectangle(w,h){
              this.width = w;
              this.Height = h;
         }                 

         ColoredRectangle = Ext.extend(
              Rectangle, 

              {
                   constructor:function(w,h,c){
                       Rectangle.call(this, w, h);
                       this.color = c;                   
                  }
              }
         );

         var crect = new ColoredRectangle(199,299, 'red');

 

 

 

 

这个例子中将保护构造函数的一个Object literal作为参数,overrides.constructor 是不等于oc,所以子类的构造函数就是overrides.constructor了。

 

处理完参数的差异,下面就开始继承的逻辑了,这个逻辑实际上就是第一部分描述的逻辑,通过下面的代码及注释来说明

//定义一个没有属性的类F,定义sbpsub prototype),sppsuper prototype

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

         //通过将F.prototype指向父类的prototype,并将一个F的对象设置给子类的prototype

    //来实现继承

                F.prototype = spp;

                sbp = sb.prototype = new F();

//设置子类的prototypeconstructor指向子类构造函数

                sbp.constructor=sb;

         //设置子类的父类

                sb.superclass=spp;

                if(spp.constructor == oc){

                    spp.constructor=sp;

                }

         //扩展子类提供override方法,以方便子类的对象重载属性

                sb.override = function(o){

                    Ext.override(sb, o);

                };

                sbp.override = io;

         //利用Ext.override将传入的overrides的属性重载(复制)到子类中

         //注意如果父类中与overrides 中相同的属性,被子类继承时会被override覆盖。

                Ext.override(sb, overrides);

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

                return sb;

           

你可能感兴趣的:(JavaScript,F#,prototype,ext)