(1)Ext.define的继承extend

详细实例:

Ext.onReady(function(){
//Sup Class 父类
Ext.define('Person',{
config:{
name:'bjsxt'
} ,
constructor:function(config){
var me = this ;
me.initConfig(config);
}
});
//Sub Class 子类
Ext.define('Boy',{
//使用Ext的继承
extend:'Person',//直接继承
config:{
sex:'男',
age:20
}
});
var b = Ext.create('Boy',{
name:'张三',
age:25
});
alert('姓名:'+b.name+'--性别:'+b.sex+'--年龄:'+b.age);
});

实例结果:

ExtJS学习------Ext.define的继承extend,用javascript实现相似Ext的继承-LMLPHP

(2)使用javascript实现类似Ext的继承

实例:

Ext.onReady(function(){
//javascript : prototype(原型) :实现继承
//SupClass
var Person = function(name){
this.name = name;
};
//alert(Person.prototype.constructor); //原型对象的构造器,默认是当前的类的模板
//SupClass prototype object
Person.prototype = {
constructor:Person ,
id:100
}; //SubClass
var Boy = function(name,sex,age){
//借用构造函数继承的方式
Person.call(this,name);
this.sex = sex ;
this.age = age ;
}; //实现原型继承: 继承了父类的模板和父类的原型对象
//Boy.prototype = new Person();
//自己实现extend的方法
function myextend(sub , sup){
var F = function() {}, //定义一个空函数做为中转函数
subclassProto, //子类的原型对象 //把父类的原型对象 交给了superclassProto变量
superclassProto = sup.prototype; // 做中转的位置:把父类的原型对象 赋值给了 F这个空函数的原型对象
//进行原型继承
F.prototype = superclassProto;
subclassProto = sub.prototype = new F();
subclassProto.constructor = sub; //还原构造器
sub.superclass = superclassProto; //做了一个保存,保存了父类的原型对象
//目的是为了防止你大意了
if (superclassProto.constructor === Object.prototype.constructor) {
superclassProto.constructor = sup;
}
};
myextend(Boy ,Person);//自己实现的继承方法
var b = new Boy('李四','男',25);//
/* 注:传统的javascript方法实现继承
* Boy.prototype=new Person('李四');
* var b=new Boy('男',25);
*/
alert('姓名:'+b.name+'--性别:'+b.sex+'--id:'+b.id+'--年龄:'+b.age);
});

实例结果:

ExtJS学习------Ext.define的继承extend,用javascript实现相似Ext的继承-LMLPHP

04-27 00:49