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

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

2017-04-20 15:50 429 查看
(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);
});


实例结果:



(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);
});


实例结果:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: