JScript中的prototype(原型)屬性研究

我對Javascript有著濃厚的興趣，對她的對象概念和繼承概念一直模糊不清，經常看些代碼中都有prototype這個東東，近來在網上看到了這麼一篇文章，立帖收藏一下，呵呵。。。

文章來自：http://www.cnblogs.com/birdshome/archive/2005/02/17/105403.html

我們知道JScript中對象的prototype屬性，是用來返回物件類型原型的引用的。我們使用prototype屬性提供對象的類的一組準系統。並且對象的新執行個體會"繼承"賦予該對象原型的操作。但是這個prototype到底是怎麼實現和被管理的呢？ 
    對於對象的prototype屬性的說明，JScript手冊上如是說：所有 JScript 內部對象都有唯讀 prototype 屬性。可以向其原型中動態添加功能(屬性和方法)，但該對象不能被賦予不同的原型。然而，使用者定義物件可以被賦給新的原型。

    下面我們看三個經典的prototype屬性的使用樣本。
    1、為指令碼環境內建對象添加方法：

 Array.prototype.max = function()<br /> {<br /> var i, max = this[0];<br /> for (i = 1; i < this.length; i++)<br /> {<br /> if (max < this[i])<br /> max = this[i];<br /> }<br /> return max;<br /> };

2、為使用者自訂類添加方法：

function TestObject(name)<br /> {<br /> this.m_Name = name;<br /> }<br /> TestObject.prototype.ShowName = function()<br /> {<br /> alert(this.m_Name);<br /> };

3、更新自訂類的prototype：

function TestObjectA()<br /> {<br /> this.MethodA = function()<br /> {<br /> alert('TestObjectA.MethodA()');<br /> }<br /> }<br /> function TestObjectB()<br /> {<br /> this.MethodB = function()<br /> {<br /> alert('TestObjectB.MethodB()');<br /> }<br /> }<br /> TestObjectB.prototype = new TestObjectA();

   第三個很眼熟吧？對啊，它就是我們前面介紹的原型繼承法呀~~ 不過今天我們不是研究"繼承"，之所以可以這樣來實現一種繼承，只是利用了prototype屬性的一個副作用而已。
    prototype還有一個預設的屬性：constructor，是用來表示建立對象的函數的(即我們OOP裡說的建構函式)。constructor屬性是所有具有prototype屬性的對象的成員。它們包括除Global和Math對象以外的所有JScript內部對象。constructor屬性儲存了對構造特定對象執行個體的函數的引用。
    弄清楚了JScript中prototype屬性怎麼使用後，下面我們再來深入的研究它。

 

    上文中我羅列了一下prototype屬性在JScript中的各種用法，但是prototype這個東西卻不是JScript創造出來的，JScript實際上是使用了我們設計模式中prototype pattern的一種衍生形式。下面我先簡單的說一下prototype pattern，然後再來看到底JScript中的prototype是怎麼回事?!
    What's prototype pattern?
    Specify the kinds of objects to create using a prototypical instance, and create new objects by copying this prototype.
    用原型執行個體指定建立對象的種類，並且通過拷貝這些原型建立新的對象。
    原型模式允許一個對象再建立另外一個可定製的對象，根本無需知道任何如何建立的細節，工作原理是：通過將一個原型對象傳給那個要發動建立的對象，這個要發動建立的對象通過請求原型對象拷貝它們自己來實施建立。
    繼續瞭解到底什麼是prototype pattern，可以參看'設計模式之Prototype(原型)'這篇文章，即使不懂Java也沒有關係，把它的代碼都當C#看就行了。
    搞清楚什麼是原型了吧？反正記著一點，prototype pattern是的實現是依賴於clone這個操作的，當然要shallow copy還是deep copy的clone看自己的需要了。
    下面我們繼續說JScript裡的prototype，為什麼我們說它和prototype pattern裡的prototype不一樣呢?! 這個不是我說就說出來的，也不是我吹出來的，看看這個樣本，你就能大概糊塗： 

<mce:script language="javascript"><!--<br />function RP()<br />{<br /> RP.PropertyA = 1;<br /> RP.MethodA = function()<br /> {<br /> alert("RP.MethodA ");<br /> };</p><p> this.PropertyA = 100;<br /> this.MethodA = function()<br /> {<br /> alert("this.MethodA");<br /> };<br />}<br />RP.prototype.PropertyA = 10;<br />RP.prototype.MethodA = function()<br />{<br /> alert("RP.prototype.MethodA");<br />};<br />// --></mce:script>

不要著急，還沒有開始做樣本，只是給出了我們用來示範的一個類。RP是什嗎？rpwt嗎？當然不是了，RP是ResearchPrototype了。好了不廢話了，看樣本及結果分析。 

<mce:script language="javascript"><!--<br />rp = new RP();<br />alert(RP.PropertyA);<br />RP.MethodA();<br />alert(rp.PropertyA);<br />rp.MethodA();<br />// --></mce:script> 

運行結果閃亮登場：

   1
   RP.MethodA
   100
   this.MethodA 這個%$@#^$%&^...，不要著急，繼續看哦！ <mce:script language="javascript"><!--<br />rp = new RP();<br />delete RP.PropertyA;<br />alert(RP.PropertyA);<br />delete RP.MethodA;<br />RP.MethodA();<br />delete rp.PropertyA;<br />alert(rp.PropertyA);<br />delete rp.MethodA;<br />rp.MethodA();<br />// --></mce:script> 運行結果再次登場：   undefined
   A Runtime Error has occurred.
   Do you wish to Debug?   Line: 32
   Error: Object doesn't support this property or method
   10
   RP.prototype.MethodA好玩吧，看出來什麼名堂了嗎？這裡的RP.PropertyA和RP.MethodA只是用來做參照的，可是怎麼把this.PropertyA和this.MethodA都delete了，還能出來結果，而且還是prototype匯入的屬性和方法呢？
    這就是JScript的prototype和prototype pattern中prototype最大的不同了，JScript中的這個所謂的prototype屬性其實是個語言本身支援的特性，這裡沒有發生任何的copy，不管shallow還是deep的。對於JScript的解釋引擎，它在處理"."或"[keyName]"引用的對象的屬性和方法時，先在對象本身的執行個體(this)中尋找，如果找到就返回或執行。如果沒有尋找到，就尋找對象的prototype(this.constructor.prototype)裡是否定義了被尋找的對象和方法，如果找到就返回或執行，如果沒有尋找到，就返回undefined(對於屬性)或runtime error(對於方法)。
    正因為prototype匯入類執行個體的屬性或方法是動態尋找的，所以我們才能對系統內部對象添加prototype屬性和方法，比如給String對象添加trim方法：<script lanuage="javascript"><br />String.prototype.trim()<br />{<br /> return this.replace(/(^/s+)|(/s+$)/g, "");<br />}<br /></script>

    顯然JScript中的這種用法也是prototype pattern中的prototype不能解釋和支援的。
    這下對於JScript OOP中原型繼承法的理解因該沒有任何的障礙了吧？同時也應該明白為什麼原型繼承法有那麼大的天生缺陷了吧？當然如果有任何問題，歡迎繼續討論。
    附示範樣本原始碼：

 <html><br /><head><br /> <meta name="author" content="birdshome@部落格園"><br /> <title>JScript Prototype Research</title><br /></head><br /><body><br /><mce:script language="javascript"><!--<br />function RP()<br />{<br /> RP.PropertyA = 1;<br /> RP.MethodA = function()<br /> {<br /> alert("RP.MethodA ");<br /> };</p><p> this.PropertyA = 100;<br /> this.MethodA = function()<br /> {<br /> alert("this.MethodA");<br /> };<br />}<br />RP.prototype.PropertyA = 10;<br />RP.prototype.MethodA = function()<br />{<br /> alert("RP.prototype.MethodA");<br />};<br />// --></mce:script><br /><mce:script language="javascript"><!--<br />rp = new RP();<br />delete RP.PropertyA;<br />alert(RP.PropertyA);<br />delete RP.MethodA;<br />RP.MethodA();<br />delete rp.PropertyA;<br />alert(rp.PropertyA);<br />delete rp.MethodA;<br />rp.MethodA();<br />// --></mce:script><br /></body><br /></html>

The End