-
创建一个类
-
简单示例
-
//加载成功后执行 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代码的效果图:
上图也验证了结论的正确