JavaScript的写类方式（5）—

本文对比了Prototype、Dojo、Ext、YUI和Mootools等JavaScript库中定义类的方式，包括各自的语法特点和实例操作，展示了这些库在实现面向对象编程时的不同方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

1，Prototype的写类方式

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

 
     01//类名Person 

     02var Person = Class.create(); 

     03  

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

     05Person.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//创建对象 

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

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

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

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

 
     01Person.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//定义类名 

     02var className = "Person"; 

     03//定义构造器及方法 

     04var 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 

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

     12  

     13//创建一个对象 

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

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

     16p.setName("jack"); 

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

     18  

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

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

     21console.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 */

     05var 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//创建一个对象  

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

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

     14p.setName("Andy"); 

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

     16  

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

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

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

4，YUI的写类方式

 
     01//定义包名 

     02YAHOO.namespace("test"); 

     03  

     04//定义类 

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

     06    this.name = name; 

     07} 

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

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

     10  

     11  

     12//创建一个对象 

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

     14  

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

     16p.setName('tom'); 

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

     18  

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

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

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

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

5，Mootools的写类方式

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

 
     01/** 

     02 * Person类 

     03 * @param {Object} name 

     04 */

     05var 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一个对象 

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

     19  

     20//测试set，get方法 

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

     22p.setName('andy'); 

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

     24  

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

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

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