JavaScript的寫類方式（5）

這篇我們看看各個JS庫的寫類方式，這也是寫類系列的最後一篇。

 

1，Prototype的寫類方式

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

//類名Personvar Person = Class.create();//通過原型重寫來定義PersonPerson.prototype = {initialize : function(name) {this.name = name;},getName : function() {return this.name;},setName : function(name) {this.name = name;}}//建立對象var p = new Person("jack");console.log(p.constructor == Person);//false

initialize完成對象的初始化（相當於建構函式，必不可少），方法依次往下寫即可。

有個問題，但是p.constructor == Person卻為false，這正是Prototype庫一個小缺陷。原因是重寫了Person的原型。為了使constructor能指向正確的構造器，只需在原型重寫時維護好constructor屬性即可。

Person.prototype = {constructor : Person, //注意這句將修複constructor屬性initialize : function(name) {this.name = name;},getName : function() {return this.name;},setName : function(name) {this.name = name;}}

 

2，Dojo的寫類方式

dojo中用dojo.declare方法來定義一個類。dojo.declare有三個參數
參數1：類名className 
參數2：繼承的類superclass 
參數3：構造器，方法props

單純的定義一個類實際只需傳第一，三兩個參數。因為這裡只討論如何定義一個類，不討論繼承。

//定義類名var className = "Person";//定義構造器及方法var proto = {constructor : function(name){this.name=name;},getName : function(){ return this.name;},setName : function(name){ this.name = name;}}//定義類Persondojo.declare(className,null,proto);//建立一個對象var p = new Person("tom");console.log(p.getName());//tomp.setName("jack");console.log(p.getName());//jack//測試instanceof及p.constructor是否正確指向了Personconsole.log(p instanceof Person);//trueconsole.log(p.constructor === Person);//true

 

3，Ext的寫類方式

Ext中用Ext.extend來定義一個類（當然它更多用來擴充一個類），Ext整個架構各種控制項如Panel，MessageBox等都是用Ext.extend方法來擴充。這裡僅僅用它來定義一個最簡單的類。

這裡只需傳兩個參數即可，第一個參數是根類Object，第二個是原型。比較特殊的是，如果單純的定義一個類，那麼第一個參數永遠傳Object即可。

/** * Person類 * @param {Object} name */var Person = Ext.extend(Object,{constructor : function(name) {this.name = name;},setName : function(name) {this.name = name;},getName : function() {return this.name;}});//建立一個對象 var p = new Person("Lily");console.log(p.getName());//Lilyp.setName("Andy");console.log(p.getName());//Andy//測試instanceof及p.constructor是否正確指向了Person   console.log(p instanceof Person);//trueconsole.log(p.constructor == Person);//true

 

4，YUI的寫類方式

//定義包名YAHOO.namespace("test");//定義類YAHOO.test.Person = function(name) {this.name = name;}YAHOO.test.Person.prototype.setName = function(name){ this.name = name;}YAHOO.test.Person.prototype.getName = function(){ return this.name;}//建立一個對象var p = new YAHOO.test.Person("jack");console.log(p.getName());//jackp.setName('tom');console.log(p.getName());//tom//測試instanceof及p.constructor是否正確指向了YAHOO.test.Person   console.log(p instanceof YAHOO.test.Person);console.log(p.constructor == YAHOO.test.Person);

可以看出除了多了包名，與原始的 建構函式+原型 方式 並無區別。

 

5，Mootools的寫類方式

mootools是被設計成非常緊湊的，模組化的，物件導向的JS庫。mootools中寫類用Class類。匯入後我們寫類時只需要用Class就行了。

/** * Person類 * @param {Object} name */var Person = new Class({    initialize: function(name){        this.name = name;    },setName : function(name) {this.name = name;},getName : function() {return this.name;}})//new一個對象var p = new Person("jack");//測試set，get方法console.log(p.getName());//jacp.setName('andy');console.log(p.getName());//andy//測試instanceof及p.constructor是否正確指向了Person  console.log(p instanceof Person); //trueconsole.log(p.constructor == Person);  //true

 

可以繼續閱讀：

JavaScript繼承方式（1）