您的位置:首页 > Web前端 > JavaScript

extjs3.3.1中继承实现代码的抽取和调用

2011-02-16 21:08 288 查看
今天看了一下extjs中继承部分的代码,并把它抽取出来,加了些注释,并写了调用方法。具体如下:

<script>

Ext = function() { };
Ext.isIE = false;//这里就不去管是不是IE了,不是问题的重点,我是在firefox下调试处理的。
Ext.apply = function(o, c, defaults){
// no "this" reference for friendly out of scope calls
if(defaults){
Ext.apply(o, defaults);
}
//extjs在这里做了子类方法对父类方法的覆盖处理
if(o && c && typeof c == 'object'){
for(var p in c){
o[p] = c[p];
}
}
return o;
};

Ext.override=function(origclass, overrides){
if(overrides){
var p = origclass.prototype;
Ext.apply(p, overrides);
if(Ext.isIE && overrides.hasOwnProperty('toString')){
p.toString = overrides.toString;
}
}
};
Ext.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;
//如果只有两个参数,将第二个参数的constructor作为subclass
//这也出现了另人迷惑的问题:传两个参数时,生成类实例时,sp的constructor会执行,
//而传三个参数时,overrides的constructor不会执行,这也是无奈之举,javascript没有java的overload特性
//extjs的代码注释也有说明:传三个参数的形式下,第一个参数就是subclass的constructor,第二个是superclass,第三个参数用于copied into the subclass's prototype
sb = overrides.constructor != oc ? overrides.constructor : function(){sp.apply(this, arguments);};

}
//造了一个空构造方法的函数,用来接收superclass的prototype
var F = function(){},
sbp,
spp = sp.prototype;

F.prototype = spp;
//原型继承的关键代码在这里,将subclass的原型指向一个F的实例,用F的实例比直接用superclass的实例好,
//原因在于这样处理创建子类时就不用执行superclass的构造函数,而是执行一个空构造函数F
sbp = sb.prototype = new F();
//修正subclass的prototype的constructor指向
sbp.constructor=sb;
//其实subclass的superclass为superclass的prototype
sb.superclass=spp;

//父类在创建完后,其constructor都不会是Object的constructor,为什么要修正父类的constructor,这个搞不明白
if(spp.constructor == oc){
spp.constructor=sp;
}

sb.override = function(o){
Ext.override(sb, o);
};
sbp.superclass = sbp.supr = (function(){
return spp;
});
sbp.override = io;
//这里把overrides的方法拷贝给子类的prototype
Ext.override(sb, overrides);
//给子类添加extend方法,调用时只传overrides参数就可以生成子类的子类
sb.extend = function(o){return Ext.extend(sb, o);};
return sb;
}(); //返回的是匿名方法的执行结果,也就是sb
};

//第一种创建方法,传三个参数创建子类
var Person=function(name){
this.name=name;
}
Person =Ext.extend(Person,Object,{
getName: function(prefix) {
return this.name;
}});

var p=new Person("person");
console.log("name:"+p.getName());

//第二种创建方法,传两个参数创建子类
var Employee =Ext.extend(Person,{
constructor: function(name, employeeID) {
// 调用父类的方法,这个是参照ext源码写出来的调用方法,感觉不是很爽
Employee.superclass.constructor.apply(this,[name]);
this.employeeID = employeeID;
console.log(employeeID);
},
getEmployeeID: function() {
return this.employeeID;
}
});

var ee=new Employee("employee",11);
console.log("name:"+ee.getName()+",id:"+ee.getEmployeeID());

//第三种创建方法,调父类的extend方法创建子类
var Employer =Person.extend({
constructor: function(name, employerID) {
Employer.superclass.constructor.apply(this,[name]);
this.employerID = employerID;
console.log(employerID);
},
getEmployerID: function() {
return this.employerID;
}
});
var er=new Employer("employer",12);
console.log("name:"+er.getName()+",id:"+er.getEmployerID());
</script>

javascript的继承实现可以参考:

1.《悟透javascript》

2.帖子: [原创]JavaScript继承详解

3.还有一本书《Object-Oriented Javascript》(我是还没来得及看,有空再看)
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: