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;
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;