当前位置:编程学习 > JAVA >>

JavaScript的写类方式(5)

这篇我们看看各个JS库的写类方式,这也是写类系列的最后一篇。

 

1,Prototype的写类方式

Prototype中使用Class.create方法,如下

view sourceprint?01 //类名Person 

02 var Person = Class.create(); 

03   

04 //通过原型重写来定义Person 

05 Person.prototype = { 

06     initialize : function(name) { 

07         this.name = name; 

08     }, 

09     getName : function() { 

10         return this.name; 

11     }, 

12     setName : function(name) { 

13         this.name = name; 

14     }    

15 } 

16   

17 //创建对象 

18 var p = new Person("jack"); 

19 console.log(p.constructor == Person);//false<BR>

initialize完成对象的初始化(相当于构造函数,必不可少),方法依次往下写即可。

有个问题,但是p.constructor == Person却为false,这正是Prototype库一个小缺陷。原因是重写了Person的原型。为了使constructor能指向正确的构造器,只需在原型重写时维护好constructor属性即可。

view sourceprint?01 Person.prototype = { 

02     constructor : Person, //注意这句将修复constructor属性 

03     initialize : function(name) { 

04         this.name = name; 

05     }, 

06     getName : function() { 

07         return this.name; 

08     }, 

09     setName : function(name) { 

10         this.name = name; 

11     }    

12 }

 


2,Dojo的写类方式

dojo中用dojo.declare方法来定义一个类。dojo.declare有三个参数
参数1:类名className
参数2:继承的类superclass
参数3:构造器,方法props

单纯的定义一个类实际只需传第一,三两个参数。因为这里只讨论如何定义一个类,不讨论继承。

view sourceprint?01 //定义类名 

02 var className = "Person"; 

03 //定义构造器及方法 

04 var proto = { 

05     constructor : function(name){this.name=name;}, 

06     getName : function(){ return this.name;}, 

07     setName : function(name){ this.name = name;} 

08 } 

09   

10 //定义类Person 

11 dojo.declare(className,null,proto); 

12   

13 //创建一个对象 

14 var p = new Person("tom"); 

15 console.log(p.getName());//tom 

16 p.setName("jack"); 

17 console.log(p.getName());//jack 

18   

19 //测试instanceof及p.constructor是否正确指向了Person 

20 console.log(p instanceof Person);//true 

21 console.log(p.constructor === Person);//true

 

3,Ext的写类方式

Ext中用Ext.extend来定义一个类(当然它更多用来扩展一个类),Ext整个框架各种控件如Panel,MessageBox等都是用Ext.extend方法来扩展。这里仅仅用它来定义一个最简单的类。

这里只需传两个参数即可,第一个参数是根类Object,第二个是原型。比较特殊的是,如果单纯的定义一个类,那么第一个参数永远传Object即可。

view sourceprint?01 /** 

02  * Person类 

03  * @param {Object} name 

04  */

05 var Person = Ext.extend(Object,{ 

06     constructor : function(name) {this.name = name;}, 

07     setName : function(name) {this.name = name;}, 

08     getName : function() {return this.name;} 

09 }); 

10   

11 //创建一个对象  

12 var p = new Person("Lily"); 

13 console.log(p.getName());//Lily 

14 p.setName("Andy"); 

15 console.log(p.getName());//Andy 

16   

17 //测试instanceof及p.constructor是否正确指向了Person    

18 console.log(p instanceof Person);//true 

19 console.log(p.constructor == Person);//true

 

4,YUI的写类方式

view sourceprint?01 //定义包名 

02 YAHOO.namespace("test"); 

03   

04 //定义类 

05 YAHOO.test.Person = function(name) { 

06     this.name = name; 

07 } 

08 YAHOO.test.Person.prototype.setName = function(name){ this.name = name;} 

09 YAHOO.test.Person.prototype.getName = function(){ return this.name;} 

10   

11   

12 //创建一个对象 

13 var p = new YAHOO.test.Person("jack"); 

14   

15 console.log(p.getName());//jack 

16 p.setName(tom); 

17 console.log(p.getName());//tom 

18   

19 //测试instanceof及p.constructor是否正确指向了YAHOO.test.Person    

20 console.log(p instanceof YAHOO.test.Person); 

21 console.log(p.constructor == YAHOO.test.Person);

可以看出除了多了包名,与原始的 构造函数+原型 方式 并无区别。

 

5,Mootools的写类方式

mootools是被设计成非常紧凑的,模块化的,面向对象的JS库。mootools中写类用Class类。导入后我们写类时只需要用Class就行了。

view sourceprint?01 /** 

02  * Person类 

03  * @param {Object} name 

04  */

05 var Person = new Class({     

06     initialize: function(name){ 

07         this.name = name; 

08     }, 

09     setName : function(name) { 

10         this.name = name; 

11     }, 

12     getName : function() { 

13         return this.name; 

14     } 

15 }) 

16   

17 //new一个对象 

18 var p = new Person("jack"); 

19   

20 //测试set,get方法 

21 console.log(p.getName());//jac 

22 p.setName(andy); 

23 console.log(p.getName());//andy 

24   

25 //测试instanceof及p.constructor是否正确指向了Person   

26 console.log(p instanceof Person); //true 

27 console.log(p.constructor == Person);  //true

补充:web前端 , JavaScript ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,