JavaScript的Prototype實現

JavaScript的Prototype實現

作者：Jeff.Yan(閻宏),BlueSwing.Liu(劉如鴻）

模式：

    Prototype(原始模型模式或者原型模式） 定義：    通過給出一個原型對象來指明所要建立的對象的類型，然後用這個原型對象的方法建立出更多同類型的對象，原始模型模式屬於對象的建立模式  JavaScript實現：    在Java語言中對象都繼承自java.lang.Object，而java.lang.Object就提供了Clone的方法，只要實現介面Cloneable，即表示支援Clone，否則拋出異常。在這點JavaScript是非常接近的，所有的對象都是從Object繼承，不過Object並不支援Clone的方法，但是我們可以通過自己對於JavaScript通過expanddo的形式實現Clone方法，這樣日後所有的對象建立都實現了Clone方法。     因為JavaScript本身沒有提供Clone的方法，同時對於對象的賦值如var a=new Object();var b=a，這樣的代碼a,b是指向同一對象的，要建立一個對象必須通過 new 這個關鍵字來實現，因此在Clone的實現過程，我內部定義了一個構造子(constructor)CloneModel，同時指定其父物件為要進行Clone活動本身的對象，因此使用了 this關鍵字，在我們定義的構造子CloneModel的基礎上我們建立一個一個對象，因為構造子內部沒有任何代碼，新建立的對象實際上說所有的實現都在父物件中，也就是我們需要進行Clone的對象。到目前為止，我們已經建立了一個需要複製的對象，但是所有的值都是指向父物件的。     在 JavaScript的物件導向方式中 ，我們曾經討論過，如果沒有覆蓋父物件的值，那麼這個時候是直接指向父物件的，在Prototype Pattern是要求Clone之後的對象的內部值是不應該相關的，而只要賦值一次，objClone的值都會在自己的記憶體空間裡頭，而不是還指向父物件。基於如此的考慮，objClone[v]=objClone[v];語句就是實現將父物件的值通過覆蓋的方式拷貝到自己的記憶體來。（這裡提及的記憶體應該是邏輯意義上的)     深複製的實現    在完成上述工作之後，只是實現了淺複製，對象方面依然是指向對象的引用，這個時候可以通過調用指向對象的Clone方法得到cloned對象的屬性對象（因為不知道如何說了）。objClone[v]=objClone[v].Clone(); 這句代碼就是完成如此的功能。

Clone方法的實現

////////////////////////////////////////////////////////////////////////為Object添加Clone的方法，因為所有的對象的頂級對象都是Object//因此所有使用者自訂對象都實現了Clone的方法//////////////////////////////////////////////////////////////////////Object.prototype.Clone=function(){ function CloneModel(){   } CloneModel.prototype=this; var objClone=new CloneModel();  var strMsg=""; for( v in objClone){   switch (typeof objClone[v]){   case "function":    //如果是方法，不需要進行clone    break;   case "object":   ///////////////////////////////////////////////////////////////////////   //如果是對象，採用Clone重新得到，這樣做的目的在於能夠進行深度Clone   //因為JavaScript是一個Object Based的語言，不然內部對象是指向原來的引用   ///////////////////////////////////////////////////////////////////////    objClone[v]=objClone[v].Clone();    break;   default:   ///////////////////////////////////////////////////////////////////////   //其餘資料類型情況下全部重新賦值   //這樣做的目的就是保證數值在記憶體中的存放是在新對象的空間中   //而不僅僅指向Parent Object的一個refrence   ///////////////////////////////////////////////////////////////////////    objClone[v]=objClone[v];  }    } return objClone;}

 對象類的定義

function BookInfo(vCaption){ this.Caption=vCaption;  var curPage=0; this.setPage=function(vData){  curPage=vData; } this.getPage=function(){  return curPage; } }

 測試代碼

////////////////////////////////////test BookInfo 's clone method////////////////////////////////////function test(){ var objTest=new BookInfo("JavaScript Prototype Pattern"); objTest.setPage(1000);  objTest.Author="Ruhong.Liu"; //object expanddo  ShowObject(objTest,"原始對象"); //Clone Object from objTest var objCloned=objTest.Clone(); ShowObject(objCloned,"Clone之後的對象");  //if you changed the objTest's caption //you can find objCloned's caption has be changed objTest.Caption="Changed Base Object"; //show message ShowObject(objTest,"修改Caption之後的原始對象"); ShowObject(objCloned,"修改Caption之後的clone對象");  /* //----------這段代碼可以不工作------------------------// //now you can change objCloned's caption objCloned.Caption="hello,Jeff.Yan"; //show message ShowObject(objTest,"Clone對象Caption修改之後的原始對象"); ShowObject(objCloned,"Clone對象Caption修改以後");*/ }function ShowObject(o,vCaption){ var strMsg=vCaption +"\n"; strMsg+="CurrentPage:        " + o.getPage() +"\n"; strMsg+="Caption:         " + o.Caption +"\n"; strMsg+="Expanddo Property Author:       " + o.Author; alert(strMsg);}

  結束語：    按照我目前的理解和測試，我覺得prototype關鍵字不是prototype模式的實現，這點通過parent object可以得到驗證。

作者Blog：http://blog.csdn.net/liuruhong/相關文章

戰爭與和平——縱觀瀏覽器發展二三語

越過瀏覽器開發的鼎盛時期，迎接RIA時代的到來

Longhorn時代，瀏覽器的終結？——關於Avalon和XAML

C++/CLI會衝擊C#嗎？

在較量中攜手前行——寫給Java 1.5和.NET 2.0

對該文的評論 windseeds ( 2004-05-09) 另外，補充一點，對於對象內部成員變數，最好不要寫成var curPage， 會引起一些問題，具體什麼問題我記不清了，我以前在開發中遇到過。 用底線來區分私人和公用是比較標準的做法，js本身的對象就是這麼 做的，比如Object。也就是說 私人變數：this._curPage = 0; 公開變數：this.curPange = 0; windseeds ( 2004-05-09) 這篇文章寫的艱深了一點，實際上沒有這麼複雜。prototype實際上就是一個對象鏈。 liuruhong ( 2004-01-01) 記得認識Jeff的時候對於這個方面我也沒有興趣，不過後來在做Web Library的時候才發現Design Pattern的功底還是可以派上用場的，雖然我也不太贊成client端的指令碼太多複雜。不過複雜只是相對的，如果是在你的Application開發中，我不太建議程式員在Web 上面的指令碼花費太多的功夫，不過如果是希望編寫一些比較通用的庫檔案提供給其他開發人員使用，我想設計方面的功底要求比其實現功能的功底更加重要吧。大家也應該可以看到網路上提供的指令碼很多吧，如果在實現一些功能方面無法複用和可擴充，那麼還是提供一些教學目的的指令碼似乎更加合適一點。反過來說，Design Pattern的學習對於構件開發人員而言是一個很重要的基礎，不管是windows下面的ActiveX開發，還是Open Source形式的library,對於Web UI Library開發人員而言，似乎也沒有本質的區別 leeeel ( 2003-12-29) 一定要將JS上升到這個境界，實在是高！ 問題是在用戶端JS寫得太長，下載資料和記憶體佔用都太大了 JS能不能簡單地應用在開發中？ kingdomzhf ( 2003-12-27) 是對象進一步拷貝，直到是function和primitive類型（不是對象）