Extjs2继承函数简单分析及疑问

Java代码
Ext = {version: '2.0'};

Ext = {version: '2.0'};

Java代码
/**
* 继承，并由传递的值决定是否覆盖原对象的属性
* 返回的对象中也增加了override()函数，用于覆盖实例的成员
* @param {Object} subclass 子类，用于继承（该类继承了父类所有属性，并最终返回该对象）
* @param {Object} superclass 父类，被继承
* @param {Object} overrides （该参数可选） 一个对象，将它本身携带的属性对子类进行覆盖
* @method extend
*/
extend : function(){
// 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;//@1
F.prototype = spp;//原型链继承基本原理的实现只有这三行的部分代码 其他代码都具有技巧性，都是为了达到一定的效果或者避免一些缺点。
sbp = sb.prototype = new F();//用空函数 可以避免子类或得父类的实例变量 即直接定义在构造函数中的变量 避免浪费，也正是这个原因，我们需要的constructor superclass要采用下面的处理。
sbp.constructor=sb;//@2 设置子函数的构造函数 为什么不是sb.constructor=sb呢,请了解javascript 关于constructor的知识，主意是作为类来使用的，constructor属性为类的实例提供方便，参考@1
sb.superclass=spp;//这里是apply sbp的superclass 这样做不仅sb的实例可以得到superclass sb本身也可以得到
if(spp.constructor == Object.prototype.constructor){//
spp.constructor=sp;//父类sp到达继承链的顶级 如{} 等 得指定他们的spp的构造函数 方便所有继承系列中的子类能正确调用到父类的构造函数 避免调用到Object.prototype.constructor
}
sb.override = function(o){//@3
Ext.override(sb, o);
};//给子类本身加上override方法 方便sb的重载、重写实现
sbp.override = io;

//给sb的子类提供好override方法//@4 @3@4可对比@2并思考区别, 为什么不写成sbp.override=function(o){Ext.apply(this,o);} ？<SPAN>


</SPAN>











Ext.override(sb, overrides);//override属性 类级别的 区别前面 只有一个参数的 是实例级别的 没啥好说的吧？
return sb;
};
}(),

/**
* 继承，并由传递的值决定是否覆盖原对象的属性
* 返回的对象中也增加了override()函数，用于覆盖实例的成员
* @param {Object} subclass 子类，用于继承（该类继承了父类所有属性，并最终返回该对象）
* @param {Object} superclass 父类，被继承
* @param {Object} overrides （该参数可选） 一个对象，将它本身携带的属性对子类进行覆盖
* @method extend
*/
extend : function(){
// 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;//@1
F.prototype = spp;//原型链继承基本原理的实现只有这三行的部分代码 其他代码都具有技巧性，都是为了达到一定的效果或者避免一些缺点。
sbp = sb.prototype = new F();//用空函数 可以避免子类或得父类的实例变量 即直接定义在构造函数中的变量 避免浪费，也正是这个原因，我们需要的constructor superclass要采用下面的处理。
sbp.constructor=sb;//@2 设置子函数的构造函数 为什么不是sb.constructor=sb呢,请了解javascript 关于constructor的知识，主意是作为类来使用的，constructor属性为类的实例提供方便，参考@1
sb.superclass=spp;//这里是apply sbp的superclass 这样做不仅sb的实例可以得到superclass sb本身也可以得到
if(spp.constructor == Object.prototype.constructor){//
spp.constructor=sp;//父类sp到达继承链的顶级 如{} 等 得指定他们的spp的构造函数 方便所有继承系列中的子类能正确调用到父类的构造函数 避免调用到Object.prototype.constructor
}
sb.override = function(o){//@3
Ext.override(sb, o);
};//给子类本身加上override方法 方便sb的重载、重写实现
sbp.override = io;

//给sb的子类提供好override方法//@4 @3@4可对比@2并思考区别, 为什么不写成sbp.override=function(o){Ext.apply(this,o);} ？


Ext.override(sb, overrides);//override属性 类级别的 区别前面 只有一个参数的 是实例级别的 没啥好说的吧？
return sb;
};
}(),

一、关于F的用法
Js中的类是function对象，实现原型链继承，主要要将子类的原型设置为父类的一个实例（这样子类就用有了父类原型的所有成员），并重新将子类原型的构造器设置为子类自己。
如以下代码所示：



Java代码
function Animal(){}
function Tiger(){}
Tiger.prototype = new Animal()//@1
Tiger.prototype.constructor = Tiger//因为@1已经使Tiger.prototype.constructor 变为Animal，需要纠正。

function Animal(){}
function Tiger(){}
Tiger.prototype = new Animal()//@1
Tiger.prototype.constructor = Tiger//因为@1已经使Tiger.prototype.constructor 变为Animal，需要纠正。


问题（一）：为什么不采用如下这种方式呢？



Java代码
function Animal(){}
function Tiger(){}
Tiger.prototype =Animal.prototype//因为@1

function Animal(){}
function Tiger(){}
Tiger.prototype =Animal.prototype//因为@1Java代码
Tiger.prototype.constructor = Tiger//因为@1已经使Tiger.prototype.constructor 变为Animal，需要纠正。

Tiger.prototype.constructor = Tiger//因为@1已经使Tiger.prototype.constructor 变为Animal，需要纠正。


原因：为了避免对sb原型对象的操作,联动影响sp的原型对象。
问题（二）：那么Ext.extent为什么要使用F这个空函数呢？
原因：用空函数，可以避免子类获得父类的实例变量 即直接定义在构造函数中的变量 避免浪费。
二、sb的原型属性是否保留

当typeof sp == "function"时,sb的原型将被替换,不保留任何原型属性,sb的superclass指向sp的原型对象;
3,当typeof sp == "object"时,sb的原型属性将被保留,sb的superclass指向自己的原型对象,效果略等同于override, 区别在于指定了superclass

三、其他要点
（一）apply,applyIf主要用于typeof == "object"时的对象操作
（二）override,extend主要用于typeof == "function"时的对象原型操作
（三）一般有两种方式使用ext.extend，建议尽量使用第二种，省去了config自己操作的麻烦。Component.js

第一种：

Java代码
<SPAN style="FONT-SIZE: medium"> /* // protected
* Function to be implemented by Component subclasses to be part of standard component initialization flow (it is empty by default).
*/
// Traditional constructor:
Ext.Foo = function(config){
// call superclass constructor:
Ext.Foo.superclass.constructor.call(this, config);

this.addEvents({
// add events
});
};
Ext.extend(Ext.Foo, Ext.Bar, {
// class body
}</SPAN>

/* // protected
* Function to be implemented by Component subclasses to be part of standard component initialization flow (it is empty by default).
*/
// Traditional constructor:
Ext.Foo = function(config){
// call superclass constructor:
Ext.Foo.superclass.constructor.call(this, config);

this.addEvents({
// add events
});
};
Ext.extend(Ext.Foo, Ext.Bar, {
// class body
}


第二种：


Java代码
<SPAN style="FONT-SIZE: medium">// initComponent replaces the constructor:
Ext.Foo = Ext.extend(Ext.Bar, {
initComponent : function(){
// call superclass initComponent
Ext.Container.superclass.initComponent.call(this);

this.addEvents({
// add events
});
}
}
</SPAN>

// initComponent replaces the constructor:
Ext.Foo = Ext.extend(Ext.Bar, {
initComponent : function(){
// call superclass initComponent
Ext.Container.superclass.initComponent.call(this);

this.addEvents({
// add events
});
}
}


四、js基础知识总结：

typeof 运算符
返回一个用来表示表达式的数据类型的字符串。

typeof
[(
)expression
[]
] ;


expression 参数是需要查找类型信息的任意表达式 。



http://book.csdn.net/bookfiles/110/1001103362.shtml

ps：js设计的一个小错误，请主意。



原始类型、引用类型 ：http://book.csdn.net/bookfiles/110/1001103364.shtml

这本书可以看看：http://book.csdn.net/bookfiles/110/#c1

说明
typeof 运算符把类型信息当作字符串返回。typeof 返回值有六种可能： "number," "string," "boolean," "object," "function," 和 "undefined."

typeof 语法中的圆括号是可选项。




typeof的结果只有可能是'number','string','boolean','function','object','undefined'。new 生成的对象typeof为object。
instanceof右边一定是Number,String,Boolean,Function,Object,自定义函数对象。
.constructor的结果也只可能是Number,String,Boolean,Function,Object,自定义函数对象。
且Number,String,Boolean,Function,Object,自定义函数对象，她们的.constructor都是Function,typeof 她们 == 'function'。

掌握javascript的prototype链原理及{}.prototype为null//undifined 但是请主意Object.prototype为“object” 因为typeof Object 为"function"，由此可见所以可以使用new的关键字或自定义函数， 如

new Number (),new String (),new Boolean (),new Function (),new Function ()，他们都是函数类型。



五、使用extjs的一点经验

（一）充分理解继承。

（二）尽量照抄例子，从简单到复杂地进行修改，直到得到你需要的界面效果。

（三）碰到问题，快速使用google codesearch等搜索引擎。

（四）尽可能少的使用ext.get 和ext.getcmp,因为你写的类可能要再某些地方复用，避免id冲突

（后续补充中...）



六、一些疑问

（一）if(spp.constructor == Object.prototype.constructor){// 不是很理解，期待有人点拨一下



答：主要是为了解决sp为object时的继承问题 如 AB = Ext.extend(sb,Object,overrides )





（二）sbp.override = io; 为什么要使用io这个函数，类色的函数不是本来就有了嘛 如Ext.apply



答：的确没有

Js代码
Ext.apply = function(o, c, defaults){
if(defaults){
// no "this" reference for friendly out of scope calls
Ext.apply(o, defaults);
}
if(o && c && typeof c == 'object'){
for(var p in c){
o[p] = c[p];
}
}
return o;
};

Ext.apply = function(o, c, defaults){
if(defaults){
// no "this" reference for friendly out of scope calls
Ext.apply(o, defaults);
}
if(o && c && typeof c == 'object'){
for(var p in c){
o[p] = c[p];
}
}
return o;
}; 有

Js代码
typeof c == 'object'

typeof c == 'object' 这个限制，

applyif 虽然没这个限制，但是该函数的目的是没有的属性才会增加。

Js代码
applyIf : function(o, c){
if(o && c){
for(var p in c){
if(typeof o[p] == "undefined"){ o[p] = c[p]; }
}
}
return o;
},

applyIf : function(o, c){
if(o && c){
for(var p in c){
if(typeof o[p] == "undefined"){ o[p] = c[p]; }
}
}
return o;
},

override 是针对object.prototype的 所以只能这里写一个了。

Js代码
override : function(origclass, overrides){
if(overrides){
var p = origclass.prototype;
for(var method in overrides){
p[method] = overrides[method];
}
}
},

override : function(origclass, overrides){
if(overrides){
var p = origclass.prototype;
for(var method in overrides){
p[method] = overrides[method];
}
}
},

（三）a.superclass.constructor是c而访问不到b
把
sb.superclass=spp;
if(spp.constructor == Object.prototype.constructor){
spp.constructor=sp;
}
换成
sb.superclass=sp;
岂不是更好？

答：而且ext用的是原型链继承 subclass就是通过prototype的技巧性处理来继承superclass的 这本身是一个逐级向上的递归过程
所以指定superclass指定到superclass的prototype比较合理，而且以后调用也方便 只需要subclass.superclass.method.call
如果像你那样指定的话就需要subclass.superclass.prototype.method.call 反而更复杂了 。

subclass.superclass.call(this) 的方式没有subclass.superclass.constructor.call(this)的方式直观

而且构造函数constructor我感觉也是显示调用比较好，风格比较一致，而且少点潜规则也更容易看懂吧，没必要学java的那种方式，
而且如果superclass没有构造函数的话 按照ext的方式会逐级向更上层的父类调用，直到最顶端。