Ext.extend用法以及代碼解讀
概述
Ext.extend是Ext的繼承機制,這個函數的代碼相當難懂。要明白這個函數的代碼,首先要知道這個函數如何使用。
使用方式
使用示例
假設有個function名為SuperClass,要實現一個子類,名為MyClass。下面的兩種方式都可以實現這個功能。
MyClass = Ext.extend(SuperClass, { /* */ });
Ext.extend(MyClass, SuperClass, { /* */});
|
下面來個具體示例:
var a = function(id){
this.id = id;
}
a.prototype = {
tostring : function(){
return this.id;
}
};
b = function(id){
b.superclass.constructor.call(this, id);
}
Ext.extend(b, a, {
tostring : function(){
return String.format("b:{0}", this.id);
}
});
//測試一下
var obj1 = new a("obj1");
alert(obj1.tostring());
var obj2 = new b("obj2");
alert(obj2.tostring());
|
或者下面的代碼,可以得到同樣的效果:
var a = function(id){
this.id = id;
}
a.prototype = {
tostring : function(){
return this.id;
}
};
b = Ext.extend(a, {
tostring : function(){
return String.format("b:{0}", this.id);
}
});
//測試一下
var obj1 = new a("obj1");
alert(obj1.tostring());
var obj2 = new b("obj2");
alert(obj2.tostring());
|
一個錯誤例子
下面看個示例:
BaseClass = function() {
this.f1 = function() {
alert("f1 in base");
}
this.f2 = function() {
alert("f2 in base");
}
}
ChildClass = function() {
ChildClass.superclass.constructor.call(this);
}
Ext.extend(ChildClass, BaseClass, {
f1: function() {
alert("f1 in child");
},
f3: function() {
alert("f3 in child");
}
});
var b = new ChildClass();
b.f1();
b.f2();
b.f3();
|
可以去執行一下,可以發現f1的執行結果仍然是"f1 in base"。并沒有真正的達到override的效果。
Ext.extend puts the properties specified in the 3rd argument into the subclass's prototype
|
也就是說:第三個參數里面的函數被放置在了子類的prototype中。
而在ChildClass.superclass.constructor.call(this);這句上,BaseClass的f1成了ChildClass的變量,而不是ChildClass.prototype。通過對JavaScript的原型繼承的了解,可以知道,實例變量的優先級是高于prototype的,所以上面的這個代碼是達不到override的功能的。
修改的方式如下:
BaseClass = function() {
};
BaseClass.prototype = {
f1: function() {
alert("f1 in base");
}
};
|
代碼解讀
JavaScript中的繼承實現
先了解一下最簡單的繼承是如何實現的:
function Extend(subFn, superFn){
subFn.prototype = new superFn()
subFn.prototype.constructor = subFn
}
function Animal(){
this.say1 = function(){
alert("Animal");
}
}
function Tiger(){
this.say2 = function(){
alert("Tiger");
}
}
Extend(Tiger,Animal);
var tiger = new Tiger();
tiger.say1();//"Animal"
tiger.say2();//"Tiger"
|
可以看到最簡單的繼承只做了兩件事情,一是把subFn的prototype設置為superFn的一個實例,然后設置subFn.prototype.constructor為subFn。
Ext.extend的代碼
Ext.extend函數中用到了Ext.override,這個函數把第二個參數中的所有對象復制到第一個對象的prototype中。首先貼上Ext.override函數的代碼:
Ext.override = function(origclass, overrides){
if(overrides){
var p = origclass.prototype;
for(var method in overrides){
p[method] = overrides[method];
}
}
}
|
然后貼上Ext.extend的代碼:
/**
* 繼承,并由傳遞的值決定是否覆蓋原對象的屬性
* 返回的對象中也增加了override()函數,用于覆蓋實例的成員
* @param {Object} subclass 子類,用于繼承(該類繼承了父類所有屬性,并最終返回該對象)
* @param {Object} superclass 父類,被繼承
* @param {Object} overrides (該參數可選) 一個對象,將它本身攜帶的屬性對子類進行覆蓋
* @method extend
*/
function extend (){
// inline overrides
var io = function(o){
for(var m in o){
this[m] = o[m];
}
};
return function(sb, sp, overrides){
if(typeof sp == 'object'){
overrides = sp;
sp = sb;
sb = 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 == Object.prototype.constructor){
spp.constructor=sp;
}
sb.override = function(o){
Ext.override(sb, o);
};
sbp.override = io;
Ext.override(sb, overrides);
return sb;
};
}();
|
代碼中進行了太多的簡寫,看起來不是特別方便,把代碼中的簡寫補全,代碼如下:
function extend(){
// inline overrides
var inlineOverride = function(o){
for (var m in o) {
this[m] = o[m];
}
};
return function(subFn, superFn, overrides){
if (typeof superFn == 'object') {
//如果subFn也是對象的話(一般來說subFn這里放的是父類的構造函數),那么第三個參數overrides參數相當于被忽略掉
overrides = superFn;
superFn = subFn;
//subFn重新定義了函數
subFn = function(){
superFn.apply(this, arguments);
};
}
var F = function(){
}, subFnPrototype, superFnPrototype = superFn.prototype;
F.prototype = superFnPrototype;
subFnPrototype = subFn.prototype = new F();
subFnPrototype.constructor = subFn;
subFn.superclass = superFnPrototype;
if (superFnPrototype.constructor == Object.prototype.constructor) {
superFnPrototype.constructor = superFn;
}
subFn.override = function(obj){
Ext.override(subFn, obj);
};
subFnPrototype.override = inlineOverride;
Ext.override(subFn, overrides);
return subFn;
};
};
|
補全以后也不是特別容易明白,那么我們就把這個代碼分開,分為2個參數和3個參數。
兩個參數的Ext.extend代碼
首先把代碼改寫成兩個參數的。
//兩個參數的時候的代碼,注意第二個參數必須為object
function extend(){
// inline overrides
var inlineOverride = function(o){
for (var m in o) {
this[m] = o[m];
}
};
return function(superFn, overrides){
var subFn = function(){
superFn.apply(this, arguments);
};
var F = function(){
}, subFnPrototype, superFnPrototype = superFn.prototype;
F.prototype = superFnPrototype;
//注意下面兩句就是上面最簡單的繼承實現。
subFnPrototype = subFn.prototype = new F();
subFnPrototype.constructor = subFn;
//添加了superclass屬性指向superFn的Prototype
subFn.superclass = superFnPrototype;
//為subFn和subFnPrototype添加override函數
subFn.override = function(obj){
Ext.override(subFn, obj);
};
subFnPrototype.override = inlineOverride;
//覆蓋掉子類prototype中的屬性
Ext.override(subFn, overrides);
return subFn;
};
};
|
從注釋中可以看到,做的工作很簡單,只是定義一個subFn函數,這個函數中會調用superFn函數。定義了subFn以后,就使用上面的最簡單的繼承方式實現繼承。然后為subFn和subFn的prototype添加了一個override函數。最后的Ext.override(subFn, overrides);把overrides中的函數寫入subFn的prototype中。
三個參數的Ext.extend代碼
下面我們把函數改寫為只處理3個參數的,改寫后的代碼如下:
//三個參數時的代碼
function extend(){
// inline overrides
var inlineOverride = function(o){
for (var m in o) {
this[m] = o[m];
}
};
return function(subFn, superFn, overrides){
var F = function(){
}, subFnPrototype, superFnPrototype = superFn.prototype;
F.prototype = superFnPrototype;
//注意下面兩句就是上面最簡單的繼承實現。
subFnPrototype = subFn.prototype = new F();
subFnPrototype.constructor = subFn;
//添加了superclass屬性指向superFn的Prototype
subFn.superclass = superFnPrototype;
//為subFn和subFnPrototype添加override函數
subFn.override = function(obj){
Ext.override(subFn, obj);
};
subFnPrototype.override = inlineOverride;
//覆蓋掉子類prototype中的屬性
Ext.override(subFn, overrides);
return subFn;
};
};
|
過程與兩個參數的時候相差無幾,只是兩個參數的時候,subFn時重新定義的一個function,而三個參數的時候,這個步驟就省略了。
總結及說明
這樣大家就對這個函數很明白了吧,也可以知道Ext.extend的繼承只會覆寫構造函數prototype中的對象,使用的時候需要多加注意。
注意下面一段代碼:
if (superFnPrototype.constructor == Object.prototype.constructor) {
superFnPrototype.constructor = superFn;
}
|
這段代碼我在改寫的Ext.extend中省略掉了。原因在于我嘗試了多次,發現參數為兩個參數的時候,只有第一個參數為Object對象或者為3個參數的時候,第二個參數為Object才會進入此段代碼。
但是發現superFn也時function Object(){},在IE和FF下都是如此。那么我就不是很清楚這段代碼到底是什么用的了,若有清楚的,告訴一聲,哈。
上面的有幾段代碼源自網絡,若有版權侵犯,非常抱歉。