首页 > 代码库 > ExtJS学习------Ext.define的继承extend,用javascript实现类似Ext的继承

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

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

实例结果: