`
yujia123
  • 浏览: 33365 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

Ext学习笔记02 - 构造方法，类继承，类实例方法重写

EXTJavaScriptprototypeDojoITeye 
阅读更多

刚刚走了个大弯路，朋友们见笑，我这见识实在太少了，开始想找个有语法提示的IDE，就直接想到了Aptana，下载一个最新版本，然后就弹出来一大堆东西要更新，更新就更新吧，更新一半就报错，看他给的提示，说xxx本机已经装了不能再装，那个版本不新了不能装，好长的一溜，找了半天，终于把非法的插件都去掉了，安装了一半又出问题了，我倒，faint，怒了，又跑回MyEclipse安装Spket（参考：http://www.iteye.com/topic/188454 ），终于搞定，本来几分钟搞定的问题，让我白费了半天力气。废话少说，开始学习。

 

书接上回，走你....

 

构造方法

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

 

java中是这样的

Java代码 复制代码 收藏代码
  1. public Person(String name, String sex) {   
  2.     this.name = name;   
  3.     this.sex = sex;   
  4. }  
public Person(String name, String sex) {
	this.name = name;
	this.sex = sex;
}

 

看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.     });  
Ext.namespace("com.meizhi");

//构造方法
com.meizhi.Person = function(_cfg) {
	Ext.apply(this, _cfg);
}

//类静态方法
com.meizhi.Person.print = function(_name, _sex) {
	var _person = new com.meizhi.Person({name:_name,sex:_sex});
	_person.print();
}

Ext.apply(com.meizhi.Person.prototype, {
		print:function(){
			alert(String.format("姓名:{0}, 性别:{1}", this.name, this.sex));
		}
	});

 

 

这里看起来有一点点不一样哦，和之前的类实例化代码有差别，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>   
<script type="text/javascript">   
	new com.meizhi.Person.print("meizhi","男");   
	new com.meizhi.Person.print("katrana","女");   
</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.     });  
Ext.namespace("com.meizhi");

//构造方法
com.meizhi.Person = function(_cfg) {
	Ext.apply(this, _cfg);
}

Ext.apply(com.meizhi.Person.prototype, {
		role:"无",
		print:function(){
			alert(String.format("姓名:{0}, 性别:{1}, 角色:{2}", this.name, this.sex, this.role));
		}
	});

 

 

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.     });  
Ext.namespace("com.meizhi");

com.meizhi.Teacher = function(_cfg) {
	Ext.apply(this, _cfg);
}

Ext.extend(com.meizhi.Teacher, com.meizhi.Person, {
		role:"老师"
	});

 

 

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.     });  
Ext.namespace("com.meizhi");

com.meizhi.Student = function(_cfg) {
	Ext.apply(this, _cfg);
}

Ext.extend(com.meizhi.Student, com.meizhi.Person, {
		role:"学生"
	});

 

子类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>  
<script type="text/javascript" src="person.js"></script>
<script type="text/javascript" src="teacher.js"></script>
<script type="text/javascript" src="student.js"></script>
<script type="text/javascript">
	var _teacher = new com.meizhi.Teacher({name:"陈治文", sex:"男"});
	_teacher.print();
	
	var _student = new com.meizhi.Student({name:"katrana", sex:"女"});
	_student.print();
</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.     });  
Ext.namespace("com.meizhi");

//构造方法
com.meizhi.Person = function(_cfg) {
	Ext.apply(this, _cfg);
}

Ext.apply(com.meizhi.Person.prototype, {
		role:"无",
		print:function(){
			alert(String.format("姓名:{0}, 性别:{1}, 角色:{2}", this.name, this.sex, this.role));
		}
	});

 

 

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.     });  
Ext.namespace("com.meizhi");

com.meizhi.Teacher = function(_cfg) {
	Ext.apply(this, _cfg);
}

Ext.extend(com.meizhi.Teacher, com.meizhi.Person, {
		role:"老师",
		print:function(){
			alert(String.format("{0}是一名{1}{2}", this.name, this.sex, this.role));
		}
	});

 

 

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.     });  
Ext.namespace("com.meizhi");

com.meizhi.Student = function(_cfg) {
	Ext.apply(this, _cfg);
}

Ext.extend(com.meizhi.Student, com.meizhi.Person, {
		role:"学生",
		print:function(){
			alert(String.format("{0}是一名{1}{2}", this.name, this.sex, this.role));
		}
	});

 

调用

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>  
<script type="text/javascript" src="person.js"></script>
<script type="text/javascript" src="teacher.js"></script>
<script type="text/javascript" src="student.js"></script>
<script type="text/javascript">
	var _person = new com.meizhi.Person({name:"meizhi",sex:"男"});
	_person.print();

	var _teacher = new com.meizhi.Teacher({name:"陈治文", sex:"男"});
	_teacher.print();
	
	var _student = new com.meizhi.Student({name:"katrana", sex:"女"});
	_student.print();
</script>

 

 

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

 

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

 

 

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

 

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

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

 

详细的解释参考一下：http://kiddwyl.iteye.com/blog/179325

分享到：
| Ext学习笔记01 - NameSpace，类实例属性， ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics