转自：
这篇我们看看各个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 |