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