JavaScript的写类方式（5）——转

转自：http://www.cnblogs.com/snandy/archive/2011/03/07/1972508.html

 

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

 

1，Prototype的写类方式

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

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

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

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

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

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

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即可。

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的写类方式

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就行了。

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

 

posted @ 2011-11-08 15:02  贝加  阅读(165)  评论(0)  编辑  收藏  举报