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