ExtJs4学习笔记(三) 面向对象

• 创建一个类

• • 简单示例

//加载成功后执行
        	Ext.onReady(function(){
        		//创建一个student类
        		Ext.define('student',{        		
        			name:'lock',	//定义姓名
        			age:15,		//定义年龄
        			getInfo:function(){		//定义一个getInfo方法
        				//弹出一个对话框，标题为‘学生信息’,内容为此对象的姓名和年龄
        				Ext.Msg.alert('学生信息','姓名:'+this.name+' 年龄'+this.age)
        			}
        		})
        		//创建student对象
        		var stu=new student();
        		//调用getInfo()方法
        		stu.getInfo();
        		//控制台输出stu对象
        		console.info(stu);
        	})

效果如下图：

由于在js中写了console.info(stu)，所以stu对象被我们在浏览器的控制台输出了，下面我们看下我们在stu中定义的属性和方法是否可以打印出来

• • 对象嵌套

上面我们所定义的类，属性都是字符串或者数字，下面我将演示如何一个属性如果是对象应该如何使用

//加载成功后执行
        	Ext.onReady(function(){
        		//创建一个student类
        		Ext.define('student',{        		
        			name:'lock',	//定义姓名
        			age:15,		//定义年龄
        			getInfo:function(){		//定义一个getInfo方法
        				//弹出一个对话框，标题为‘学生信息’,内容为此对象的姓名和年龄
        				Ext.Msg.alert('学生信息','姓名:'+this.name+' 年龄'+this.age)
        			}
        		})
        		//创建student对象
        		var stu=new student();
        		//创建老师类
        		Ext.define('teacher',{        		
        			name:'teacher',	//定义姓名
        			age:55,		//定义年龄
        			stu:stu,	//定义学生
        			getInfo:function(){		//定义一个getInfo方法
        				//弹出一个对话框，标题为‘学生信息’,内容为此对象的姓名和年龄
        				Ext.Msg.alert('老师信息','姓名:'+this.name+' 年龄'+this.age+' 学生姓名:'+this.stu.name+' 学生年龄:'+this.stu.age)
        			}
        		})
        		var tea=new teacher();
        		tea.getInfo();
        		//控制台输出stu对象
        		console.info(tea);
        	})

效果如下图：

下面我们来看一下控制台打印出的teacher对象：

• • 匿名对象

我们发现stu直接指向一个object对象，该对象和简单示例中的student对象一样。由于js是弱类型语言，对于js来说如果2个类型的属性和方法一样，那么这2个类型实际是相同的，所以我们可以简化上面的语句。

//加载成功后执行
        	Ext.onReady(function(){
        		//创建老师类
        		Ext.define('teacher',{        		
        			name:'teacher',	//定义姓名
        			age:55,		//定义年龄
        			//简化部分开始
        			stu:{
        				name:'lock',	//定义姓名
        				age:15
        			},
        			//简化部分结束
        			getInfo:function(){		//定义一个getInfo方法
        				//弹出一个对话框，标题为‘学生信息’,内容为此对象的姓名和年龄
        				Ext.Msg.alert('老师信息','姓名:'+this.name+' 年龄'+this.age+' 学生姓名:'+this.stu.name+' 学生年龄:'+this.stu.age)
        			}
        		})
        		var tea=new teacher();
        		tea.getInfo();
        		//控制台输出stu对象
        		console.info(tea);
        	})

我们实际上直接用{}来简化声明类并创建对象的过程，实际效果和对象嵌套中示例一样：

• 对象继承

  • 单继承

下面我们演示一个简单的单继承，首先我们创建一个person类，该类中包括name,age属性和一个say()方法，下面我们创建一个student类，然后让该类继承person类，并添加一个school属性，看看student能否从student类中继承name,age属性和一个say()方法.

//加载成功后执行
        	Ext.onReady(function(){
        		//创建person类
        		Ext.define('person',{
        			name:'name1',	//姓名
        			age:15,		//年龄
        			say:function(){		//说方法
        				Ext.Msg.alert('person类say方法','Hello my name is'+this.name)
        			}
        		})
        		Ext.define('student',{
        			extend:'person',	//继承类
        			school:'school1'	//学校
        		})
        		var stu=new student();	//创建对象
        		stu.say();
        		console.info(stu);	//控制台输出对象
        	})

运行效果如图：

下面我们看看控制台输出的student对象：

通过控制台输出结果我们可以看出，父类的属性和方法都被继承了。

• • 多重继承

虽然define()方法和java一样遵守着单根继承，但是我们可以通过mixin方法来实现多重继承，下面我们在单继承例子的基础上增加一个Son类，让student同时继承person和son类，意思为学生不仅是一个人同时还是一个儿子。

//加载成功后执行
        	Ext.onReady(function(){
        		//创建person类
        		Ext.define('person',{
        			name:'personName',	//姓名
        			age:15,		//年龄
        			say:function(){		//说方法
        				Ext.Msg.alert('person类say方法','Hello my name is'+this.name)
        			}
        		})
        		Ext.define('son',{
        			father:'fa',	//姓名
        			mother:'mother',		//年龄
        			name:'sonName',
        			say:function(){		//说方法
        				Ext.Msg.alert('son类say方法','Hello my parents is'+this.father+' '+this.mother)
        			}
        		})
        		Ext.define('student',{
        			extend:'person',	//继承类
        			mixins:['son'],
        			school:'school1'	//学校
        		})
        		var stu=new student();	//创建对象
        		stu.say();
        		console.info(stu);	//控制台输出对象
        	})

我们先看下打印出的student对象：

首先我们来关注下第一个红框标记处，我们发现mixins是一个对象数组，所以我们如果需要更多的继承时只需要像这样 mixins[类1,类2,类3...]，把类型按逗号隔开就可以无限多重继承了。

在person和son类中我们分别设置了相同的属性name和方法say()，那么student类中究竟是谁的属性和方法呢。通过第二个红色标记我们可以看出，如果存在重复现象他会保留extend类中的属性或方法，这也就变相说明extend类要晚于mixin继承，所以才会覆盖掉mixin中的属性或方法。当然如果student中存在与父类相同的属性或方法，则会以保留子类student的属性。下面我们看下上面js代码的效果图：

上图也验证了结论的正确