extjs底层源码实现继承分析

时间:2021-03-25 16:45:18

先说明一下在js中一般的继承是怎么写的

var farther=function(name){
this.name=name
};
farther.prototype={
constructor:farther, //还原构造器
id:10
};
var child=function(sex,age){
this.sex=sex;
this.age=age;
}
child.prototype=new farther('tom'); //实现原型继承。
var mychild=new child('男',23);
alert(mychild.name); //tom
alert(mychild.sex); //男
alert(mychild.age);//23
alert(mychild.id);//10

这种js中不符合我们的习惯,我们想要实现实例化的时候,写成这样  var mychild=new child('tom','男',23);

要实现上面这种模式,js有一种在子类引用父类的一种方法,这样父类十分庞大的时候。效率是很低的。下面来看一下ext是怎么实现的。

function myextend(sub , sup){
var F = function() {}, //定义一个空函数做为中转函数
subclassProto, //子类的原型对象
superclassProto = sup.prototype; //把父类的原型对象 交给了superclassProto变量
F.prototype = superclassProto; // 做中转的位置:把父类的原型对象 赋值给了 F这个空函数的原型对象
subclassProto = sub.prototype = new F(); //进行原型继承
subclassProto.constructor = sub; //还原构造器
sub.superclass = superclassProto; //做了一个保存,保存了父类的原型对象
//目的是为了防止你大意了
if (superclassProto.constructor === Object.prototype.constructor) {
superclassProto.constructor = sup;
}
};
myextend(child,farther);
var mychild=new child('tom','男','25');
alert(mychild.name);//tom
alert(mychild.sex);//男
alert(mychild.age);//25

ext巧妙的用了中转函数来实现。

来正式用ext实现继承

Ext.define('father',{
config:{
name:'f1',
age:34
},
say:function(){
alert('father is saying')
},
//给当前定义的类加一个构造器,构造器的用途是接受参数,初始化信息.
constructor:function(config){
var me=this;
me.initConfig(config);
}
});
Ext.define('child',{
extend:'father',
config:{
sex:'男'
},
constructor:function(config){
var me=this;
me.initConfig(config);
}
});
var mychild=Ext.create('child',{ });
alert(mychild.getName()); //f1
alert(mychild.getAge()); //34
mychild.say(); //father is saying