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

最新推荐文章于 2021-05-25 12:10:50 发布

最新推荐文章于 2021-05-25 12:10:50 发布 · 352 阅读

文章标签：

#EXT #prototype #JavaScript #F# #ViewUI

本文详细解析了 ExtJS 中 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指向的对象中。

接着定义一个变量oc（Object 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 literal，sp指向了Rectangle了。

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

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

首先判断overrides.constructor 是否是oc（Object.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，定义sbp（sub prototype），spp（super prototype）

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

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

//来实现继承

F.prototype = spp;

sbp = sb.prototype = new F();

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

sbp.constructor=sb;

//设置子类的父类

sb.superclass=spp;