EXT 笔记 构造方法，类继承，类实例方法重写

构造方法

构造方法就是在初始化一个对象同时执行的方法。

 

java中是这样的

Java代码 

1. public  Person(String name, String sex) {  
2.     this .name = name;  
3.     this .sex = sex;  
4. }  

 

看Ext是怎么实现的

Js代码 

1. Ext.namespace( "com.meizhi" );  
2.   
3. //构造方法   
4. com.meizhi.Person = function (_cfg) {  
5.     Ext.apply(this , _cfg);  
6. }  
7.   
8. //类静态方法   
9. com.meizhi.Person.print = function (_name, _sex) {  
10.     var  _person =  new  com.meizhi.Person({name:_name,sex:_sex});  
11.     _person.print();  
12. }  
13.   
14. Ext.apply(com.meizhi.Person.prototype, {  
15.         print:function (){  
16.             alert(String.format("姓名:{0}, 性别:{1}" ,  this .name,  this .sex));  
17.         }  
18.     });  

 

 

这里看起来有一点点不一样哦，和之前的类实例化代码有差别，name和sex属性在 Ext.apply(com.meizhi.Person.prototype, {}) 过程中并没有被构造，而是通过构造方法的参数 _cfg 将这两个属性传进去的，事实上，构造类实例的时候将对象的一组属性作为一个对象传到构造方法中， _cfg 参数就是传进来的属性对象  。

 

调用，因为print方法是类静态方法，所以采用这种方式来调用

Js代码 

1. <script type= "text/javascript" >     
2.     new  com.meizhi.Person.print( "meizhi" , "男" );     
3.     new  com.meizhi.Person.print( "katrana" , "女" );     
4. </script>   

 

 

这种方式在Ext中经常被用到，因为这种方式更加的灵活，在构建对象的时候动态的设置对象的属性，在对象属性比较的多的情况下简化了构造过程。

 

 

类继承

构造几个必要的类来模拟继承的场景，分别是父类Person，子类Teacher和Student，把它们分开来写。

 

Person.js

Js代码 

1. Ext.namespace( "com.meizhi" );  
2.   
3. //构造方法   
4. com.meizhi.Person = function (_cfg) {  
5.     Ext.apply(this , _cfg);  
6. }  
7.   
8. Ext.apply(com.meizhi.Person.prototype, {  
9.         role:"无" ,  
10.         print:function (){  
11.             alert(String.format("姓名:{0}, 性别:{1}, 角色:{2}" ,  this .name,  this .sex,  this .role));  
12.         }  
13.     });  

 

 

Teacher.js

Js代码 

1. Ext.namespace( "com.meizhi" );  
2.   
3. com.meizhi.Teacher = function (_cfg) {  
4.     Ext.apply(this , _cfg);  
5. }  
6.   
7. Ext.extend(com.meizhi.Teacher, com.meizhi.Person, {  
8.         role:"老师"   
9.     });  

 

 

Student.js

Js代码 

1. Ext.namespace( "com.meizhi" );  
2.   
3. com.meizhi.Student = function (_cfg) {  
4.     Ext.apply(this , _cfg);  
5. }  
6.   
7. Ext.extend(com.meizhi.Student, com.meizhi.Person, {  
8.         role:"学生"   
9.     });  

 

子类Teacher和Student中首先定义了一个构造方法，然后声明继承，在extend()方法中还可以将属性重新设置。

 

extend()方法的参数格式：Ext.extend(子类, 父类, { 属性列表 });

 

调用，别忘了引入相关的JS文件

Js代码 

1. <script type= "text/javascript"  src= "person.js" ></script>  
2. <script type="text/javascript"  src= "teacher.js" ></script>  
3. <script type="text/javascript"  src= "student.js" ></script>  
4. <script type="text/javascript" >  
5.     var  _teacher =  new  com.meizhi.Teacher({name: "陈治文" , sex: "男" });  
6.     _teacher.print();  
7.       
8.     var  _student =  new  com.meizhi.Student({name: "katrana" , sex: "女" });  
9.     _student.print();  
10. </script>  

 

 

Ext中使用extend来实现继承，Dojo中的方式比较简便，一个 dojo.declare() 方法完成了类的声明和继承两件事，区别只在于参数上。

 

 

 类实例方法重写

 直接看代码：

 

Person.js

Js代码 

1. Ext.namespace( "com.meizhi" );  
2.   
3. //构造方法   
4. com.meizhi.Person = function (_cfg) {  
5.     Ext.apply(this , _cfg);  
6. }  
7.   
8. Ext.apply(com.meizhi.Person.prototype, {  
9.         role:"无" ,  
10.         print:function (){  
11.             alert(String.format("姓名:{0}, 性别:{1}, 角色:{2}" ,  this .name,  this .sex,  this .role));  
12.         }  
13.     });  

 

 

Teacher.js

Js代码 

1. Ext.namespace( "com.meizhi" );  
2.   
3. com.meizhi.Teacher = function (_cfg) {  
4.     Ext.apply(this , _cfg);  
5. }  
6.   
7. Ext.extend(com.meizhi.Teacher, com.meizhi.Person, {  
8.         role:"老师" ,  
9.         print:function (){  
10.             alert(String.format("{0}是一名{1}{2}" ,  this .name,  this .sex,  this .role));  
11.         }  
12.     });  

 

 

Student.js

Js代码 

1. Ext.namespace( "com.meizhi" );  
2.   
3. com.meizhi.Student = function (_cfg) {  
4.     Ext.apply(this , _cfg);  
5. }  
6.   
7. Ext.extend(com.meizhi.Student, com.meizhi.Person, {  
8.         role:"学生" ,  
9.         print:function (){  
10.             alert(String.format("{0}是一名{1}{2}" ,  this .name,  this .sex,  this .role));  
11.         }  
12.     });  

 

调用

Js代码 

1. <script type= "text/javascript"  src= "person.js" ></script>  
2. <script type="text/javascript"  src= "teacher.js" ></script>  
3. <script type="text/javascript"  src= "student.js" ></script>  
4. <script type="text/javascript" >  
5.     var  _person =  new  com.meizhi.Person({name: "meizhi" ,sex: "男" });  
6.     _person.print();  
7.   
8.     var  _teacher =  new  com.meizhi.Teacher({name: "陈治文" , sex: "男" });  
9.     _teacher.print();  
10.       
11.     var  _student =  new  com.meizhi.Student({name: "katrana" , sex: "女" });  
12.     _student.print();  
13. </script>  

 

 

结果会输出“姓名:梅智,性别:男,角色:无”，“陈治文是一名男老师”和“katrana是一名女学生”。

 

可见父类是没有变化的，子类重写父类中的属性和方法，只会改变子类中的属性和方法。

 

 

回顾一下java中的“重写 overwrite”和“重载 override”，简单的说，不是非常准确的解释：

 

重写 overwrite： 重写方法必须和被重写方法具有相同的方法名，参数列表和返回类型。

重载 override：重载方法必须和被重载方法具有相同的方法名和返回类型，但是参数列表不相同  。