天天看點

關于Javascript的學習

引子

    程式設計世界裡隻存在兩種基本元素,一個是資料,一個是代碼。程式設計世界就是在資料和代碼千絲萬縷的糾纏中呈現出無限的生機和活力。

    資料天生就是文靜的,總想保持自己固有的本色;而代碼卻天生活潑,總想改變這個世界。

   你看,資料代碼間的關系與物質能量間的關系有着驚人的相似。資料也是有慣性的,如果沒有代碼來施加外力,她總保持自己原來的狀态。而代碼就象能量,他存在的唯一目的,就是要努力改變資料原來的狀态。在代碼改變資料的同時,也會因為資料的抗拒而反過來影響或改變代碼原有的趨勢。甚至在某些情況下,資料可以轉變為代碼,而代碼卻又有可能被轉變為資料,或許還存在一個類似E=MC2形式的數位轉換方程呢。然而,就是在資料和代碼間這種即沖突又統一的運轉中,總能展現出計算機世界的規律,這些規律正是我們編寫的程式邏輯。

    不過,由于不同程式員有着不同的世界觀,這些資料和代碼看起來也就不盡相同。于是,不同世界觀的程式員們運用各自的方法論,推動着程式設計世界的進化和發展。

    衆所周知,當今最流行的程式設計思想莫過于面向對象程式設計的思想。為什麼面向對象的思想能迅速風靡程式設計世界呢?因為面向對象的思想首次把資料和代碼結合成統一體,并以一個簡單的對象概念呈現給程式設計者。這一下子就将原來那些雜亂的算法與子程式,以及糾纏不清的複雜資料結構,劃分成清晰而有序的對象結構,進而理清了資料與代碼在我們心中那團亂麻般的結。我們又可以有一個更清晰的思維,在另一個思想高度上去探索更加浩瀚的程式設計世界了。

    在五祖弘忍講授完《對象真經》之後的一天,他對衆弟子們說:“經已講完,想必爾等應該有所感悟,請各自寫個偈子來看”。大弟子神秀是被大家公認為悟性最高的師兄,他的偈子寫道:“身是對象樹,心如類般明。朝朝勤拂拭,莫讓惹塵埃!”。此偈一出,立即引起師兄弟們的轟動,大家都說寫得太好了。隻有火頭僧慧能看後,輕輕地歎了口氣,又随手在牆上寫道:“對象本無根,類型亦無形。本來無一物,何處惹塵埃?”。然後搖了搖頭,揚長而去。大家看了慧能的偈子都說: “寫的什麼亂七八糟的啊,看不懂”。師父弘忍看了神秀的詩偈也點頭稱贊,再看慧能的詩偈之後默然搖頭。就在當天夜裡,弘忍卻悄悄把慧能叫到自己的禅房,将珍藏多年的軟體真經傳授于他,然後讓他趁着月色連夜逃走...

    後來,慧能果然不負師父厚望,在南方開創了禅宗另一個廣闊的天空。而慧能當年帶走的軟體真經中就有一本是《JavaScript真經》!

這篇文章确實不錯,以哲學的思維講述了javascript腳本語言的學習,是學習javasscript語言少有的上乘之作

原文出處:點選連結

回歸簡單

    要了解JavaScript,你得首先放下對象和類的概念,回到資料和代碼的本原。前面說過,程式設計世界隻有資料和代碼兩種基本元素,而這兩種元素又有着糾纏不清的關系。JavaScript就是把資料和代碼都簡化到最原始的程度。

    JavaScript中的資料很簡潔的。簡單資料隻有 undefined, null, boolean, number和string這五種,而複雜資料隻有一種,即object。這就好比中國古典的樸素唯物思想,把世界最基本的元素歸為金木水火土,其他複雜的物質都是由這五種基本元素組成。

    JavaScript中的代碼隻展現為一種形式,就是function。

    注意:以上單詞都是小寫的,不要和Number, String, Object, Function等JavaScript内置函數混淆了。要知道,JavaScript語言是區分大小寫的呀!

    任何一個JavaScript的辨別、常量、變量和參數都隻是unfined, null, bool, number, string, object 和 function類型中的一種,也就typeof傳回值表明的類型。除此之外沒有其他類型了。

    先說說簡單資料類型吧。

    undefined:   代表一切未知的事物,啥都沒有,無法想象,代碼也就更無法去處理了。

                      注意:typeof(undefined) 傳回也是 undefined。

                              可以将undefined指派給任何變量或屬性,但并不意味了清除了該變量,反而會是以多了一個屬性。

    null:            有那麼一個概念,但沒有東西。無中似有,有中還無。雖難以想象,但已經可以用代碼來處理了。

                      注意:typeof(null)傳回object,但null并非object,具有null值的變量也并非object。

    boolean:      是就是,非就非,沒有疑義。對就對,錯就錯,絕對明确。既能被代碼處理,也可以控制代碼的流程。

    number:      線性的事物,大小和次序分明,多而不亂。便于代碼進行批量處理,也控制代碼的疊代和循環等。

                      注意:typeof(NaN)和typeof(Infinity)都傳回number 。

                              NaN參與任何數值計算的結構都是NaN,而且 NaN != NaN 。

                              Infinity / Infinity = NaN 。

    string:         面向人類的理性事物,而不是機器信号。人機資訊溝通,代碼據此了解人的意圖等等,都靠它了。

     簡單類型都不是對象,JavaScript沒有将對象化的能力賦予這些簡單類型。直接被賦予簡單類型常量值的辨別符、變量和參數都不是一個對象。

    所謂“對象化”,就是可以将資料和代碼組織成複雜結構的能力。JavaScript中隻有object類型和function類型提供了對象化的能力。

沒有類

    object就是對象的類型。在JavaScript中不管多麼複雜的資料和代碼,都可以組織成object形式的對象。

    但JavaScript卻沒有 “類”的概念!

    對于許多面向對象的程式員來說,這恐怕是JavaScript中最難以了解的地方。是啊,幾乎任何講面向對象的書中,第一個要講的就是“類”的概念,這可是面向對象的支柱。這突然沒有了“類”,我們就象一下子沒了精神支柱,感到六神無主。看來,要放下對象和類,達到“對象本無根,類型亦無形”的境界确實是件不容易的事情啊。

    這樣,我們先來看一段JavaScript程式:

     var  life  =  {};

     for (life.age  =   1 ; life.age  <=   3 ; life.age ++ )

    {

         switch (life.age)

        {

             case   1 : life.body  =   " 卵細胞 " ;

                    life.say  =   function (){alert( this .age + this .body)};

                     break ;

             case   2 : life.tail  =   " 尾巴 " ;

                    life.gill  =   " 腮 " ;

                    life.body  =   " 蝌蚪 " ;

                    life.say  =   function (){alert( this .age + this .body + " - " + this .tail + " , " + this .gill)};

                     break ;

             case   3 :  delete  life.tail;

                     delete  life.gill;

                    life.legs  =   " 四條腿 " ;

                    life.lung  =   " 肺 " ;

                    life.body  =   " 青蛙 " ;

                    life.say  =   function (){alert( this .age + this .body + " - " + this .legs + " , " + this .lung)};

                     break ;

        };

        life.say();

    };

    這段JavaScript程式一開始産生了一個生命對象life,life誕生時隻是一個光溜溜的對象,沒有任何屬性和方法。在第一次生命過程中,它有了一個身體屬性body,并有了一個say方法,看起來是一個“卵細胞”。在第二次生命過程中,它又長出了“尾巴”和“腮”,有了tail和gill屬性,顯然它是一個“蝌蚪”。在第三次生命過程中,它的tail和gill屬性消失了,但又長出了“四條腿”和“肺”,有了legs和lung屬性,進而最終變成了“青蛙”。如果,你的想像力豐富的話,或許還能讓它變成英俊的“王子”,娶個美麗的“公主”什麼的。不過,在看完這段程式之後,請你思考一個問題:

    我們一定需要類嗎?

    還記得兒時那個“小蝌蚪找媽媽”的童話嗎?也許就在昨天晚,你的孩子剛好是在這個美麗的童話中進入夢鄉的吧。可愛的小蝌蚪也就是在其自身類型不斷演化過程中,逐漸變成了和媽媽一樣的“類”,進而找到了自己的媽媽。這個童話故事中蘊含的程式設計哲理就是:對象的“類”是從無到有,又不斷演化,最終又消失于無形之中的...

    “類”,的确可以幫助我們了解複雜的現實世界,這紛亂的現實世界也的确需要進行分類。但如果我們的思想被“類”束縛住了,“類”也就變成了“累”。想象一下,如果一個生命對象開始的時就被規定了固定的“類”,那麼它還能演化嗎?蝌蚪還能變成青蛙嗎?還可以給孩子們講小蝌蚪找媽媽的故事嗎?

    是以,JavaScript中沒有“類”,類已化于無形,與對象融為一體。正是由于放下了“類”這個概念,JavaScript的對象才有了其他程式設計語言所沒有的活力。

    如果,此時你的内心深處開始有所感悟,那麼你已經逐漸開始了解JavaScript的禅機了。

函數的魔力

    接下來,我們再讨論一下JavaScript函數的魔力吧。

    JavaScript的代碼就隻有function一種形式,function就是函數的類型。也許其他程式設計語言還有procedure或 method等代碼概念,但在JavaScript裡隻有function一種形式。當我們寫下一個函數的時候,隻不過是建立了一個function類型的實體而已。請看下面的程式:

     function  myfunc()

    {

        alert( " hello " );

    };

    alert( typeof (myfunc));

    這個代碼運作之後可以看到typeof(myfunc)傳回的是function。以上的函數寫法我們稱之為“定義式”的,如果我們将其改寫成下面的“變量式”的,就更容易了解了:

     var  myfunc  =   function  ()

        {

            alert( " hello " );

        };

    alert( typeof (myfunc));

    這裡明确定義了一個變量myfunc,它的初始值被賦予了一個function的實體。是以,typeof(myfunc)傳回的也是function。其實,這兩種函數的寫法是等價的,除了一點細微差别,其内部實作完全相同。也就是說,我們寫的這些JavaScript函數隻是一個命了名的變量而已,其變量類型即為function,變量的值就是我們編寫的函數代碼體。

    聰明的你或許立即會進一步的追問:既然函數隻是變量,那麼變量就可以被随意指派并用到任意地方啰?

    我們來看看下面的代碼:

     var  myfunc  =   function  ()

        {

            alert( " hello " );

        };

    myfunc();  // 第一次調用myfunc,輸出hello

    myfunc  =   function  ()

        {

            alert( " yeah " );

        };    

    myfunc();  // 第二次調用myfunc,将輸出yeah

    這個程式運作的結果告訴我們:答案是肯定的!在第一次調用函數之後,函數變量又被賦予了新的函數代碼體,使得第二次調用該函數時,出現了不同的輸出。

    好了,我們又來把上面的代碼改成第一種定義式的函數形式:

     function  myfunc ()

    {

        alert( " hello " );

    };

    myfunc();  // 這裡調用myfunc,輸出yeah而不是hello

     function  myfunc ()

    {

        alert( " yeah " );

    };    

    myfunc();  // 這裡調用myfunc,當然輸出yeah

    按理說,兩個簽名完全相同的函數,在其他程式設計語言中應該是非法的。但在JavaScript中,這沒錯。不過,程式運作之後卻發現一個奇怪的現象:兩次調用都隻是最後那個函數裡輸出的值!顯然第一個函數沒有起到任何作用。這又是為什麼呢?

    原來,JavaScript執行引擎并非一行一行地分析和執行程式,而是一段一段地分析執行的。而且,在同一段程式的分析執行中,定義式的函數語句會被提取出來優先執行。函數定義執行完之後,才會按順序執行其他語句代碼。也就是說,在第一次調用myfunc之前,第一個函數語句定義的代碼邏輯,已被第二個函數定義語句覆寫了。是以,兩次都調用都是執行最後一個函數邏輯了。

    如果把這個JavaScript代碼分成兩段,例如将它們寫在一個html中,并用<script/>标簽将其分成這樣的兩塊:

< script >

     function  myfunc ()

    {

        alert( " hello " );

    };

    myfunc();  // 這裡調用myfunc,輸出hello

</ script >

< script >

     function  myfunc ()

    {

        alert( " yeah " );

    };    

    myfunc();  // 這裡調用myfunc,輸出yeah

</ script >

    這時,輸出才是各自按順序來的,也證明了JavaScript的确是一段段地執行的。

    一段代碼中的定義式函數語句會優先執行,這似乎有點象靜态語言的編譯概念。是以,這一特征也被有些人稱為:JavaScript的“預編譯”。

    大多數情況下,我們也沒有必要去糾纏這些細節問題。隻要你記住一點:JavaScript裡的代碼也是一種資料,同樣可以被任意指派和修改的,而它的值就是代碼的邏輯。隻是,與一般資料不同的是,函數是可以被調用執行的。

    不過,如果JavaScript函數僅僅隻有這點道行的話,這與C++的函數指針,DELPHI的方法指針,C#的委托相比,又有啥稀奇嘛!然而,JavaScript函數的神奇之處還展現在另外兩個方面:一是函數function類型本身也具有對象化的能力,二是函數function與對象 object超然的結合能力。

奇妙的對象

    先來說說函數的對象化能力。

    任何一個函數都可以為其動态地添加或去除屬性,這些屬性可以是簡單類型,可以是對象,也可以是其他函數。也就是說,函數具有對象的全部特征,你完全可以把函數當對象來用。其實,函數就是對象,隻不過比一般的對象多了一個括号“()”操作符,這個操作符用來執行函數的邏輯。即,函數本身還可以被調用,一般對象卻不可以被調用,除此之外完全相同。請看下面的代碼:

     function  Sing()

    {

         with (arguments.callee)

          alert(author  +   " : "   +  poem);

    };

    Sing.author  =   " 李白 " ;

    Sing.poem  =   " 漢家秦地月,流影照明妃。一上玉關道,天涯去不歸

關于Javascript的學習

" ;

    Sing();

    Sing.author  =   " 李戰 " ;

    Sing.poem  =   " 日出漢家天,月落陰山前。女兒琵琶怨,已唱三千年

關于Javascript的學習

" ;

    Sing();

    在這段代碼中,Sing函數被定義後,又給Sing函數動态地增加了author和poem屬性。将author和poem屬性設為不同的作者和詩句,在調用Sing()時就能顯示出不同的結果。這個示例用一種詩情畫意的方式,讓我們了解了JavaScript函數就是對象的本質,也感受到了 JavaScript語言的優美。

    好了,以上的講述,我們應該算了解了function類型的東西都是和object類型一樣的東西,這種東西被我們稱為“對象”。我們的确可以這樣去看待這些“對象”,因為它們既有“屬性”也有“方法”嘛。但下面的代碼又會讓我們産生新的疑惑:

     var  anObject  =  {};   // 一個對象

    anObject.aProperty  =   " Property of object " ;   // 對象的一個屬性

    anObject.aMethod  =   function (){alert( " Method of object " )};  // 對象的一個方法

     // 主要看下面:

    alert(anObject[ " aProperty " ]);    // 可以将對象當數組以屬性名作為下标來通路屬性

    anObject[ " aMethod " ]();           // 可以将對象當數組以方法名作為下标來調用方法

     for (  var  s  in  anObject)            // 周遊對象的所有屬性和方法進行疊代化處理

        alert(s  +   "  is a  "   +   typeof (anObject[s]));

    同樣對于function類型的對象也是一樣:

     var  aFunction  = function() {};   // 一個函數

    aFunction.aProperty  =   " Property of function " ;   // 函數的一個屬性

    aFunction.aMethod  =   function (){alert( " Method of function " )};  // 函數的一個方法

     // 主要看下面:

    alert(aFunction[ " aProperty " ]);    // 可以将函數當數組以屬性名作為下标來通路屬性

    aFunction[ " aMethod " ]();           // 可以将函數當數組以方法名作為下标來調用方法

     for (  var  s  in  aFunction)            // 周遊函數的所有屬性和方法進行疊代化處理

        alert(s  +   "  is a  "   +   typeof (aFunction[s]));

    是的,對象和函數可以象數組一樣,用屬性名或方法名作為下标來通路并處理。那麼,它到底應該算是數組呢,還是算對象?

    我們知道,數組應該算是線性資料結構,線性資料結構一般有一定的規律,适合進行統一的批量疊代操作等,有點像波。而對象是離散資料結構,适合描述分散的和個性化的東西,有點像粒子。是以,我們也可以這樣問:JavaScript裡的對象到底是波還是粒子?

    如果存在對象量子論,那麼答案一定是:波粒二象性!

    是以,JavaScript裡的函數和對象既有對象的特征也有數組的特征。這裡的數組被稱為“字典”,一種可以任意伸縮的名稱值對兒的集合。其實, object和function的内部實作就是一個字典結構,但這種字典結構卻通過嚴謹而精巧的文法表現出了豐富的外觀。正如量子力學在一些地方用粒子來解釋和處理問題,而在另一些地方卻用波來解釋和處理問題。你也可以在需要的時候,自由選擇用對象還是數組來解釋和處理問題。隻要善于把握 JavaScript的這些奇妙特性,就可以編寫出很多簡潔而強大的代碼來。

放下對象

    我們再來看看function與object的超然結合吧。

    在面向對象的程式設計世界裡,資料與代碼的有機結合就構成了對象的概念。自從有了對象,程式設計世界就被劃分成兩部分,一個是對象内的世界,一個是對象外的世界。對象天生具有自私的一面,外面的世界未經允許是不可通路對象内部的。對象也有大方的一面,它對外提供屬性和方法,也為他人服務。不過,在這裡我們要談到一個有趣的問題,就是“對象的自我意識”。

    什麼?沒聽錯吧?對象有自我意識?

    可能對許多程式員來說,這的确是第一次聽說。不過,請君看看C++、C#和Java的this,DELPHI的self,還有VB的me,或許你會恍然大悟!當然,也可能隻是說句“不過如此”而已。

    然而,就在對象将世界劃分為内外兩部分的同時,對象的“自我”也就随之産生。“自我意識”是生命的最基本特征!正是由于對象這種強大的生命力,才使得程式設計世界充滿無限的生機和活力。

    但對象的“自我意識”在帶給我們快樂的同時也帶來了痛苦和煩惱。我們給對象賦予了太多欲望,總希望它們能做更多的事情。然而,對象的自私使得它們互相争搶系統資源,對象的自負讓對象變得複雜和臃腫,對象的自欺也往往帶來揮之不去的錯誤和異常。我們為什麼會有這麼多的痛苦和煩惱呢?

    為此,有一個人,在對象樹下,整整想了九九八十一天,終于悟出了生命的痛苦來自于欲望,但究其欲望的根源是來自于自我意識。于是他放下了“自我”,在對象樹下成了佛,從此他開始普度衆生,傳播真經。他的名字就叫釋迦摩尼,而《JavaScript真經》正是他所傳經書中的一本。

    JavaScript中也有this,但這個this卻與C++、C#或Java等語言的this不同。一般程式設計語言的this就是對象自己,而 JavaScript的this卻并不一定!this可能是我,也可能是你,可能是他,反正是我中有你,你中有我,這就不能用原來的那個“自我”來了解 JavaScript這個this的含義了。為此,我們必須首先放下原來對象的那個“自我”。

    我們來看下面的代碼:

     function  WhoAmI()        // 定義一個函數WhoAmI

    {

        alert( " I'm  "   +   this .name  +   "  of  "   +   typeof ( this ));

    };

    WhoAmI();    // 此時是this目前這段代碼的全局對象,在浏覽器中就是window對象,其name屬性為空字元串。輸出:I'm of object

     var  BillGates  =  {name:  " Bill Gates " };

    BillGates.WhoAmI  =  WhoAmI;   // 将函數WhoAmI作為BillGates的方法。

    BillGates.WhoAmI();          // 此時的this是BillGates。輸出:I'm Bill Gates of object

     var  SteveJobs  =  {name:  " Steve Jobs " };

    SteveJobs.WhoAmI  =  WhoAmI;   // 将函數WhoAmI作為SteveJobs的方法。

    SteveJobs.WhoAmI();          // 此時的this是SteveJobs。輸出:I'm Steve Jobs of object

    WhoAmI.call(BillGates);      // 直接将BillGates作為this,調用WhoAmI。輸出:I'm Bill Gates of object

    WhoAmI.call(SteveJobs);      // 直接将SteveJobs作為this,調用WhoAmI。輸出:I'm Steve Jobs of object

    BillGates.WhoAmI.call(SteveJobs);    // 将SteveJobs作為this,卻調用BillGates的WhoAmI方法。輸出:I'm Steve Jobs of object

    SteveJobs.WhoAmI.call(BillGates);    // 将BillGates作為this,卻調用SteveJobs的WhoAmI方法。輸出:I'm Bill Gates of object

    WhoAmI.WhoAmI  =  WhoAmI;      // 将WhoAmI函數設定為自身的方法。

    WhoAmI.name  =   " WhoAmI " ;

    WhoAmI.WhoAmI();             // 此時的this是WhoAmI函數自己。輸出:I'm WhoAmI of function

    ({name:  " nobody " , WhoAmI: WhoAmI}).WhoAmI();     // 臨時建立一個匿名對象并設定屬性後調用WhoAmI方法。輸出:I'm nobody of object

    從上面的代碼可以看出,同一個函數可以從不同的角度來調用,this并不一定是函數本身所屬的對象。this隻是在任意對象和function元素結合時的一個概念,是種結合比起一般對象語言的預設結合更加靈活,顯得更加超然和灑脫。

    在JavaScript函數中,你隻能把this看成目前要服務的“這個”對象。this是一個特殊的内置參數,根據this參數,您可以通路到“這個” 對象的屬性和方法,但卻不能給this參數指派。在一般對象語言中,方法體代碼中的this可以省略的,成員預設都首先是“自己”的。但 JavaScript卻不同,由于不存在“自我”,當通路“這個”對象時,this不可省略!

    JavaScript提供了傳遞this參數的多種形式和手段,其中,象BillGates.WhoAmI()和SteveJobs.WhoAmI()這種形式,是傳遞this參數最正規的形式,此時的this就是函數所屬的對象本身。而大多數情況下,我們也幾乎很少去采用那些借花仙佛的調用形式。但隻我們要明白JavaScript的這個“自我”與其他程式設計語言的“自我”是不同的,這是一個放下了的“自我”,這就是JavaScript特有的世界觀。

對象素描

    已經說了許多了許多話題了,但有一個很基本的問題我們忘了讨論,那就是:怎樣建立對象?

    在前面的示例中,我們已經涉及到了對象的建立了。我們使用了一種被稱為JavaScript Object Notation(縮寫JSON)的形式,翻譯為中文就是“JavaScript對象表示法”。

    JSON為建立對象提供了非常簡單的方法。例如,

    建立一個沒有任何屬性的對象:

var  o  =  {};

    建立一個對象并設定屬性及初始值:

var  person  =  {name:  " Angel " , age:  18 , married:  false };

    建立一個對象并設定屬性和方法:

var  speaker  =  {text:  " Hello World " , say:  function (){alert( this .text)}};

     建立一個更複雜的對象,嵌套其他對象和對象數組等:

     var  company  =

    {

        name:  " Microsoft " ,

        product:  " softwares " ,

        chairman: {name:  " Bill Gates " , age:  53 , Married:  true },

        employees: [{name:  " Angel " , age:  26 , Married:  false }, {name:  " Hanson " , age:  32 , Marred:  true }],

        readme:  function () {document.write( this .name  +   "  product  "   +   this .product);}

    };

    JSON的形式就是用大括“{}”号包括起來的項目清單,每一個項目間并用逗号“,”分隔,而項目就是用冒号“:”分隔的屬性名和屬性值。這是典型的字典表示形式,也再次表明了 JavaScript裡的對象就是字典結構。不管多麼複雜的對象,都可以被一句JSON代碼來建立并指派。

    其實,JSON就是JavaScript對象最好的序列化形式,它比XML更簡潔也更省空間。對象可以作為一個JSON形式的字元串,在網絡間自由傳遞和交換資訊。而當需要将這個JSON字元串變成一個JavaScript對象時,隻需要使用eval函數這個強大的數位轉換引擎,就立即能得到一個 JavaScript記憶體對象。正是由于JSON的這種簡單樸素的天生麗質,才使得她在AJAX舞台上成為璀璨奪目的明星。

    JavaScript就是這樣,把面向對象那些看似複雜的東西,用及其簡潔的形式表達出來。卸下對象浮華的濃妝,還對象一個眉目清晰!

構造對象

    好了,接下我們來讨論一下對象的另一種建立方法。

    除JSON外,在JavaScript中我們可以使用new操作符結合一個函數的形式來建立對象。例如:

     function  MyFunc() {};          // 定義一個空函數

     var  anObj  =   new  MyFunc();   // 使用new操作符,借助MyFun函數,就建立了一個對象

    JavaScript的這種建立對象的方式可真有意思,如何去了解這種寫法呢?

   其實,可以把上面的代碼改寫成這種等價形式:

     function  MyFunc(){};

     var  anObj  =  {};      // 建立一個對象

    MyFunc.call(anObj);  // 将anObj對象作為this指針調用MyFunc函數

    我們就可以這樣了解,JavaScript先用new操作符建立了一個對象,緊接着就将這個對象作為this參數調用了後面的函數。其實,JavaScript内部就是這麼做的,而且任何函數都可以被這樣調用!但從 “anObj = new MyFunc()” 這種形式,我們又看到一個熟悉的身影,C++和C#不就是這樣建立對象的嗎?原來,條條大路通靈山,殊途同歸啊!

    君看到此處也許會想,我們為什麼不可以把這個MyFunc當作構造函數呢?恭喜你,答對了!JavaScript也是這麼想的!請看下面的代碼: 

 1       function  Person(name)    // 帶參數的構造函數

 2      {

 3           this .name  =  name;    // 将參數值賦給給this對象的屬性

 4           this .SayHello  =   function () {alert( " Hello, I'm  "   +   this .name);};    // 給this對象定義一個SayHello方法。

 5      };

 6 

 7       function  Employee(name, salary)      // 子構造函數

 8      {

 9          Person.call( this , name);         // 将this傳給父構造函數

10           this .salary  =  salary;        // 設定一個this的salary屬性

11           this .ShowMeTheMoney  =   function () {alert( this .name  +   "  $ "   +   this .salary);};   // 添加ShowMeTheMoney方法。

12      };

13      

14       var  BillGates  =   new  Person( " Bill Gates " );    // 用Person構造函數建立BillGates對象

15       var  SteveJobs  =   new  Employee( " Steve Jobs " ,  1234 );    // 用Empolyee構造函數建立SteveJobs對象

16 

17      BillGates.SayHello();    // 顯示:I'm Bill Gates

18      SteveJobs.SayHello();    // 顯示:I'm Steve Jobs

19      SteveJobs.ShowMeTheMoney();    // 顯示:Steve Jobs $1234

20 

21      alert(BillGates.constructor  ==  Person);   // 顯示:true

22      alert(SteveJobs.constructor  ==  Employee);   // 顯示:true

23      

24      alert(BillGates.SayHello  ==  SteveJobs.SayHello);  // 顯示:false

    這段代碼表明,函數不但可以當作構造函數,而且還可以帶參數,還可以為對象添加成員和方法。其中的第9行,Employee構造函數又将自己接收的 this作為參數調用Person構造函數,這就是相當于調用基類的構造函數。第21、22行還表明這樣一個意思:BillGates是由Person構造的,而SteveJobs是由Employee構造的。對象内置的constructor屬性還指明了構造對象所用的具體函數!

    其實,如果你願意把函數當作“類”的話,她就是“類”,因為她本來就有“類”的那些特征。難道不是嗎?她生出的兒子各個都有相同的特征,而且構造函數也與類同名嘛!

    但要注意的是,用構造函數操作this對象建立出來的每一個對象,不但具有各自的成員資料,而且還具有各自的方法資料。換句話說,方法的代碼體(展現函數邏輯的資料)在每一個對象中都存在一個副本。盡管每一個代碼副本的邏輯是相同的,但對象們确實是各自儲存了一份代碼體。上例中的最後一句說明了這一實事,這也解釋了JavaScript中的函數就是對象的概念。

    同一類的對象各自有一份方法代碼顯然是一種浪費。在傳統的對象語言中,方法函數并不象JavaScript那樣是個對象概念。即使也有象函數指針、方法指針或委托那樣的變化形式,但其實質也是對同一份代碼的引用。一般的對象語言很難遇到這種情況。

    不過,JavaScript語言有大的靈活性。我們可以先定義一份唯一的方法函數體,并在構造this對象時使用這唯一的函數對象作為其方法,就能共享方法邏輯。例如:

     function  SayHello()      // 先定義一份SayHello函數代碼

    {

        alert( " Hello, I'm  "   +   this .name);

    };

     function  Person(name)    // 帶參數的構造函數

    {

         this .name  =  name;    // 将參數值賦給給this對象的屬性

         this .SayHello  =  SayHello;    // 給this對象SayHello方法指派為前面那份SayHello代碼。

    };

     var  BillGates  =   new  Person( " Bill Gates " );    // 建立BillGates對象

     var  SteveJobs  =   new  Person( " Steve Jobs " );    // 建立SteveJobs對象

    alert(BillGates.SayHello  ==  SteveJobs.SayHello);  // 顯示:true

    其中,最後一行的輸出結果表明兩個對象确實共享了一個函數對象。雖然,這段程式達到了共享了一份方法代碼的目的,但卻不怎麼優雅。因為,定義 SayHello方法時反映不出其與Person類的關系。“優雅”這個詞用來形容代碼,也不知道是誰先提出來的。不過,這個詞反映了程式員已經從追求代碼的正确、高效、可靠和易讀等基礎上,向着追求代碼的美觀感覺和藝術境界的層次發展,程式人生又多了些浪漫色彩。

   顯然,JavaScript早想到了這一問題,她的設計者們為此提供了一個有趣的prototype概念。

初看原型

    prototype源自法語,軟體界的标準翻譯為“原型”,代表事物的初始形态,也含有模型和樣闆的意義。JavaScript中的prototype概念恰如其分地反映了這個詞的内含,我們不能将其了解為C++的prototype那種預先聲明的概念。

    JavaScript的所有function類型的對象都有一個prototype屬性。這個prototype屬性本身又是一個object類型的對象,是以我們也可以給這個prototype對象添加任意的屬性和方法。既然prototype是對象的“原型”,那麼由該函數構造出來的對象應該都會具有這個“原型”的特性。事實上,在構造函數的prototype上定義的所有屬性和方法,都是可以通過其構造的對象直接通路和調用的。也可以這麼說,prototype提供了一群同類對象共享屬性和方法的機制。

    我們先來看看下面的代碼:

     function  Person(name)

    {

         this .name  =  name;    // 設定對象屬性,每個對象各自一份屬性資料

    };

    Person.prototype.SayHello  =   function ()   // 給Person函數的prototype添加SayHello方法。

    {

        alert( " Hello, I'm  "   +   this .name);

    }

     var  BillGates  =   new  Person( " Bill Gates " );    // 建立BillGates對象

     var  SteveJobs  =   new  Person( " Steve Jobs " );    // 建立SteveJobs對象

    BillGates.SayHello();    // 通過BillGates對象直接調用到SayHello方法

    SteveJobs.SayHello();    // 通過SteveJobs對象直接調用到SayHello方法

    alert(BillGates.SayHello  ==  SteveJobs.SayHello);  // 因為兩個對象是共享prototype的SayHello,是以顯示:true

    程式運作的結果表明,構造函數的prototype上定義的方法确實可以通過對象直接調用到,而且代碼是共享的。顯然,把方法設定到prototype的寫法顯得優雅多了,盡管調用形式沒有變,但邏輯上卻展現了方法與類的關系,相對前面的寫法,更容易了解群組織代碼。

    那麼,對于多層次類型的構造函數情況又如何呢?

    我們再來看下面的代碼:

 1       function  Person(name)    // 基類構造函數

 2      {

 3           this .name  =  name;

 4      };

 5      

 6      Person.prototype.SayHello  =   function ()   // 給基類構造函數的prototype添加方法

 7      {

 8          alert( " Hello, I'm  "   +   this .name);

 9      };

10      

11       function  Employee(name, salary)  // 子類構造函數

12      {

13          Person.call( this , name);     // 調用基類構造函數

14           this .salary  =  salary;

15      };

16      

17      Employee.prototype  =   new  Person();   // 建一個基類的對象作為子類原型的原型,這裡很有意思

18      

19      Employee.prototype.ShowMeTheMoney  =   function ()   // 給子類添構造函數的prototype添加方法

20      {

21          alert( this .name  +   "  $ "   +   this .salary);

22      };

23 

24       var  BillGates  =   new  Person( " Bill Gates " );    // 建立基類Person的BillGates對象

25       var  SteveJobs  =   new  Employee( " Steve Jobs " ,  1234 );    // 建立子類Employee的SteveJobs對象

26 

27      BillGates.SayHello();        // 通過對象直接調用到prototype的方法

28      SteveJobs.SayHello();        // 通過子類對象直接調用基類prototype的方法,關注!

29      SteveJobs.ShowMeTheMoney();  // 通過子類對象直接調用子類prototype的方法

30 

31      alert(BillGates.SayHello  ==  SteveJobs.SayHello);  // 顯示:true,表明prototype的方法是共享的

    這段代碼的第17行,構造了一個基類的對象,并将其設為子類構造函數的prototype,這是很有意思的。這樣做的目的就是為了第28行,通過子類對象也可以直接調用基類prototype的方法。為什麼可以這樣呢?

    原來,在JavaScript中,prototype不但能讓對象共享自己财富,而且prototype還有尋根問祖的天性,進而使得先輩們的遺産可以代代相傳。當從一個對象那裡讀取屬性或調用方法時,如果該對象自身不存在這樣的屬性或方法,就會去自己關聯的prototype對象那裡尋找;如果 prototype沒有,又會去prototype自己關聯的前輩prototype那裡尋找,直到找到或追溯過程結束為止。

    在JavaScript内部,對象的屬性和方法追溯機制是通過所謂的prototype鍊來實作的。當用new操作符構造對象時,也會同時将構造函數的 prototype對象指派給新建立的對象,成為該對象内置的原型對象。對象内置的原型對象應該是對外不可見的,盡管有些浏覽器(如Firefox)可以讓我們通路這個内置原型對象,但并不建議這樣做。内置的原型對象本身也是對象,也有自己關聯的原型對象,這樣就形成了所謂的原型鍊。

    在原型鍊的最末端,就是Object構造函數prototype屬性指向的那一個原型對象。這個原型對象是所有對象的最老祖先,這個老祖宗實作了諸如 toString等所有對象天生就該具有的方法。其他内置構造函數,如Function, Boolean, String, Date和RegExp等的prototype都是從這個老祖宗傳承下來的,但他們各自又定義了自身的屬性和方法,進而他們的子孫就表現出各自宗族的那些特征。

    這不就是“繼承”嗎?是的,這就是“繼承”,是JavaScript特有的“原型繼承”。

    “原型繼承”是慈祥而又嚴厲的。原形對象将自己的屬性和方法無私地貢獻給孩子們使用,也并不強迫孩子們必須遵從,允許一些頑皮孩子按自己的興趣和愛好獨立行事。從這點上看,原型對象是一位慈祥的母親。然而,任何一個孩子雖然可以我行我素,但卻不能動原型對象既有的财産,因為那可能會影響到其他孩子的利益。從這一點上看,原型對象又象一位嚴厲的父親。我們來看看下面的代碼就可以了解這個意思了:

     function  Person(name)

    {

         this .name  =  name;

    };

    Person.prototype.company  =   " Microsoft " ;  // 原型的屬性

    Person.prototype.SayHello  =   function ()   // 原型的方法

    {

        alert( " Hello, I'm  "   +   this .name  +   "  of  "   +   this .company);

    };

     var  BillGates  =   new  Person( " Bill Gates " );

    BillGates.SayHello();    // 由于繼承了原型的東西,規規矩矩輸出:Hello, I'm Bill Gates

     var  SteveJobs  =   new  Person( " Steve Jobs " );

    SteveJobs.company  =   " Apple " ;     // 設定自己的company屬性,掩蓋了原型的company屬性

    SteveJobs.SayHello  =   function ()  // 實作了自己的SayHello方法,掩蓋了原型的SayHello方法

    {

        alert( " Hi,  "   +   this .name  +   "  like  "   +   this .company  +   " , ha ha ha  " );

    };

    SteveJobs.SayHello();    // 都是自己覆寫的屬性和方法,輸出:Hi, Steve Jobs like Apple, ha ha ha 

    BillGates.SayHello();    // SteveJobs的覆寫沒有影響原型對象,BillGates還是按老樣子輸出

    對象可以掩蓋原型對象的那些屬性和方法,一個構造函數原型對象也可以掩蓋上層構造函數原型對象既有的屬性和方法。這種掩蓋其實隻是在對象自己身上建立了新的屬性和方法,隻不過這些屬性和方法與原型對象的那些同名而已。JavaScript就是用這簡單的掩蓋機制實作了對象的“多态”性,與靜态對象語言的虛函數和重載(override)概念不謀而合。

    然而,比靜态對象語言更神奇的是,我們可以随時給原型對象動态添加新的屬性和方法,進而動态地擴充基類的功能特性。這在靜态對象語言中是很難想象的。我們來看下面的代碼:

     function  Person(name)

    {

         this .name  =  name;

    };

    Person.prototype.SayHello  =   function ()   // 建立對象前定義的方法

    {

        alert( " Hello, I'm  "   +   this .name);

    };

     var  BillGates  =   new  Person( " Bill Gates " );    // 建立對象

    BillGates.SayHello();

    Person.prototype.Retire  =   function ()     // 建立對象後再動态擴充原型的方法

    {

        alert( " Poor  "   +   this .name  +   " , bye bye! " );

    };

    BillGates.Retire();  // 動态擴充的方法即可被先前建立的對象立即調用

    阿彌佗佛,原型繼承竟然可以玩出有這樣的法術!

原型擴充

    想必君的悟性極高,可能你會這樣想:如果在JavaScript内置的那些如Object和Function等函數的prototype上添加些新的方法和屬性,是不是就能擴充JavaScript的功能呢?

    那麼,恭喜你,你得到了!

    在AJAX技術迅猛發展的今天,許多成功的AJAX項目的JavaScript運作庫都大量擴充了内置函數的prototype功能。比如微軟的 ASP.NET AJAX,就給這些内置函數及其prototype添加了大量的新特性,進而增強了JavaScript的功能。

    我們來看一段摘自MicrosoftAjax.debug.js中的代碼:

String.prototype.trim  =   function  String$trim() {

     if  (arguments.length  !==   0 )  throw  Error.parameterCount();

     return   this .replace( / ^/s+|/s+$ / g,  '' );

}

    這段代碼就是給内置String函數的prototype擴充了一個trim方法,于是所有的String類對象都有了trim方法了。有了這個擴充,今後要去除字元串兩段的空白,就不用再分别處理了,因為任何字元串都有了這個擴充功能,隻要調用即可,真的很友善。

    當然,幾乎很少有人去給Object的prototype添加方法,因為那會影響到所有的對象,除非在你的架構中這種方法的确是所有對象都需要的。

    前兩年,微軟在設計AJAX類庫的初期,用了一種被稱為“閉包”(closure)的技術來模拟“類”。其大緻模型如下:

     function  Person(firstName, lastName, age)

    {

         // 私有變量:

         var  _firstName  =  firstName;

         var  _lastName  =  lastName;

         // 公共變量:

         this .age  =  age;

         // 方法:

         this .getName  =   function ()

        {

             return (firstName  +   "   "   +  lastName);

        };

         this .SayHello  =   function ()

        {

            alert( " Hello, I'm  "   +  firstName  +   "   "   +  lastName);

        };

    };

     var  BillGates  =   new  Person( " Bill " ,  " Gates " ,  53 );

     var  SteveJobs  =   new  Person( " Steve " ,  " Jobs " ,  53 );

    BillGates.SayHello();

    SteveJobs.SayHello();

    alert(BillGates.getName()  +   "   "   +  BillGates.age);

    alert(BillGates.firstName);      // 這裡不能通路到私有變量

    很顯然,這種模型的類描述特别象C#語言的描述形式,在一個構造函數裡依次定義了私有成員、公共屬性和可用的方法,顯得非常優雅嘛。特别是“閉包”機制可以模拟對私有成員的保護機制,做得非常漂亮。

    所謂的“閉包”,就是在構造函數體内定義另外的函數作為目标對象的方法函數,而這個對象的方法函數反過來引用外層外層函數體中的臨時變量。這使得隻要目标對象在生存期内始終能保持其方法,就能間接保持原構造函數體當時用到的臨時變量值。盡管最開始的構造函數調用已經結束,臨時變量的名稱也都消失了,但在目标對象的方法内卻始終能引用到該變量的值,而且該值隻能通這種方法來通路。即使再次調用相同的構造函數,但隻會生成新對象和方法,新的臨時變量隻是對應新的值,和上次那次調用的是各自獨立的。的确很巧妙!

    但是前面我們說過,給每一個對象設定一份方法是一種很大的浪費。還有,“閉包”這種間接保持變量值的機制,往往會給JavaSript的垃圾回收器制造難題。特别是遇到對象間複雜的循環引用時,垃圾回收的判斷邏輯非常複雜。無獨有偶,IE浏覽器早期版本确實存在JavaSript垃圾回收方面的記憶體洩漏問題。再加上“閉包”模型在性能測試方面的表現不佳,微軟最終放棄了“閉包”模型,而改用“原型”模型。正所謂“有得必有失”嘛。

    原型模型需要一個構造函數來定義對象的成員,而方法卻依附在該構造函數的原型上。大緻寫法如下:

     // 定義構造函數

     function  Person(name)

    {

         this .name  =  name;    // 在構造函數中定義成員

    };

     // 方法定義到構造函數的prototype上

    Person.prototype.SayHello  =   function ()

    {

        alert( " Hello, I'm  "   +   this .name);

    };    

     // 子類構造函數

     function  Employee(name, salary)

    {

        Person.call( this , name);     // 調用上層構造函數

         this .salary  =  salary;        // 擴充的成員

    };

     // 子類構造函數首先需要用上層構造函數來建立prototype對象,實作繼承的概念

    Employee.prototype  =   new  Person()    // 隻需要其prototype的方法,此對象的成員沒有任何意義!

     // 子類方法也定義到構造函數之上

    Employee.prototype.ShowMeTheMoney  =   function ()

    {

        alert( this .name  +   "  $ "   +   this .salary);

    };

     var  BillGates  =   new  Person( " Bill Gates " );

    BillGates.SayHello();    

     var  SteveJobs  =   new  Employee( " Steve Jobs " ,  1234 );

    SteveJobs.SayHello();

    SteveJobs.ShowMeTheMoney();

    原型類模型雖然不能模拟真正的私有變量,而且也要分兩部分來定義類,顯得不怎麼“優雅”。不過,對象間的方法是共享的,不會遇到垃圾回收問題,而且性能優于“閉包”模型。正所謂“有失必有得”嘛。

    在原型模型中,為了實作類繼承,必須首先将子類構造函數的prototype設定為一個父類的對象執行個體。建立這個父類對象執行個體的目的就是為了構成原型鍊,以起到共享上層原型方法作用。但建立這個執行個體對象時,上層構造函數也會給它設定對象成員,這些對象成員對于繼承來說是沒有意義的。雖然,我們也沒有給構造函數傳遞參數,但确實建立了若幹沒有用的成員,盡管其值是undefined,這也是一種浪費啊。

    唉!世界上沒有完美的事情啊!

原型真谛

    正當我們感概萬分時,天空中一道紅光閃過,祥雲中出現了觀音菩薩。隻見她手持玉淨瓶,輕拂翠柳枝,灑下幾滴甘露,頓時讓JavaScript又添新的靈氣。

    觀音灑下的甘露在JavaScript的世界裡凝結成塊,成為了一種稱為“文法甘露”的東西。這種文法甘露可以讓我們編寫的代碼看起來更象對象語言。

    要想知道這“文法甘露”為何物,就請君側耳細聽。

    在了解這些文法甘露之前,我們需要重新再回顧一下JavaScript構造對象的過程。

    我們已經知道,用 var anObject = new aFunction() 形式建立對象的過程實際上可以分為三步:第一步是建立一個新對象;第二步将該對象内置的原型對象設定為構造函數prototype引用的那個原型對象;第三步就是将該對象作為this參數調用構造函數,完成成員設定等初始化工作。對象建立之後,對象上的任何通路和操作都隻與對象自身及其原型鍊上的那串對象有關,與構造函數再扯不上關系了。換句話說,構造函數隻是在建立對象時起到介紹原型對象和初始化對象兩個作用。

    那麼,我們能否自己定義一個對象來當作原型,并在這個原型上描述類,然後将這個原型設定給新建立的對象,将其當作對象的類呢?我們又能否将這個原型中的一個方法當作構造函數,去初始化建立的對象呢?例如,我們定義這樣一個原型對象:

     var  Person  =    // 定義一個對象來作為原型類

    {

        Create:  function (name, age)   // 這個當構造函數

        {

             this .name  =  name;

             this .age  =  age;

        },

        SayHello:  function ()   // 定義方法

        {

            alert( " Hello, I'm  "   +   this .name);

        },

        HowOld:  function ()   // 定義方法

        {

            alert( this .name  +   "  is  "   +   this .age  +   "  years old. " );

        }

    };

    這個JSON形式的寫法多麼象一個C#的類啊!既有構造函數,又有各種方法。如果可以用某種形式來建立對象,并将對象的内置的原型設定為上面這個“類”對象,不就相當于建立該類的對象了嗎?

    但遺憾的是,我們幾乎不能通路到對象内置的原型屬性!盡管有些浏覽器可以通路到對象的内置原型,但這樣做的話就隻能限定了使用者必須使用那種浏覽器。這也幾乎不可行。

    那麼,我們可不可以通過一個函數對象來做媒介,利用該函數對象的prototype屬性來中轉這個原型,并用new操作符傳遞給建立的對象呢?

    其實,象這樣的代碼就可以實作這一目标:

     function  anyfunc(){};            // 定義一個函數軀殼

    anyfunc.prototype  =  Person;      // 将原型對象放到中轉站prototype

     var  BillGates  =   new  anyfunc();   // 建立對象的内置原型将是我們期望的原型對象

    不過,這個anyfunc函數隻是一個軀殼,在使用過這個軀殼之後它就成了多餘的東西了,而且這和直接使用構造函數來建立對象也沒啥不同,有點不爽。

    可是,如果我們将這些代碼寫成一個通用函數,而那個函數軀殼也就成了函數内的函數,這個内部函數不就可以在外層函數退出作用域後自動消亡嗎?而且,我們可以将原型對象作為通用函數的參數,讓通用函數傳回建立的對象。我們需要的就是下面這個形式:

     function  New(aClass, aParams)     // 通用建立函數

    {

         function  new_()      // 定義臨時的中轉函數殼

        {

            aClass.Create.apply( this , aParams);    // 調用原型中定義的的構造函數,中轉構造邏輯及構造參數

        };

        new_.prototype  =  aClass;     // 準備中轉原型對象

         return   new  new_();           // 傳回建立最終建立的對象

    };

     var  Person  =          // 定義的類

    {

        Create:  function (name, age)

        {

             this .name  =  name;

             this .age  =  age;

        },

        SayHello:  function ()

        {

            alert( " Hello, I'm  "   +   this .name);

        },

        HowOld:  function ()

        {

            alert( this .name  +   "  is  "   +   this .age  +   "  years old. " );

        }

    };

     var  BillGates  =  New(Person, [ " Bill Gates " ,  53 ]);   // 調用通用函數建立對象,并以數組形式傳遞構造參數

    BillGates.SayHello();

    BillGates.HowOld();

    alert(BillGates.constructor  ==  Object);      // 輸出:true

    這裡的通用函數New()就是一個“文法甘露”!這個文法甘露不但中轉了原型對象,還中轉了構造函數邏輯及構造參數。

    有趣的是,每次建立完對象退出New函數作用域時,臨時的new_函數對象會被自動釋放。由于new_的prototype屬性被設定為新的原型對象,其原來的原型對象和new_之間就已解開了引用鍊,臨時函數及其原來的原型對象都會被正确回收了。上面代碼的最後一句證明,新建立的對象的 constructor屬性傳回的是Object函數。其實建立的對象自己及其原型裡沒有constructor屬性,那傳回的隻是最頂層原型對象的構造函數,即Object。

    有了New這個文法甘露,類的定義就很像C#那些靜态對象語言的形式了,這樣的代碼顯得多麼文靜而優雅啊!

    當然,這個代碼僅僅展示了“文法甘露”的概念。我們還需要多一些的文法甘露,才能實作用簡潔而優雅的代碼書寫類層次及其繼承關系。好了,我們再來看一個更豐富的示例吧:

     // 文法甘露:

     var  object  =      // 定義小寫的object基本類,用于實作最基礎的方法等

    {

        isA:  function (aType)    // 一個判斷類與類之間以及對象與類之間關系的基礎方法

        {

             var  self  =   this ;

             while (self)

            {

                 if  (self  ==  aType)

                   return   true ;

                self  =  self.Type;

            };

             return   false ;

        }

    };

     function  Class(aBaseClass, aClassDefine)     // 建立類的函數,用于聲明類及繼承關系

    {

         function  class_()    // 建立類的臨時函數殼

        {

             this .Type  =  aBaseClass;     // 我們給每一個類約定一個Type屬性,引用其繼承的類

             for ( var  member  in  aClassDefine)

                 this [member]  =  aClassDefine[member];     // 複制類的全部定義到目前建立的類

        };

        class_.prototype  =  aBaseClass;

         return   new  class_();

    };

     function  New(aClass, aParams)    // 建立對象的函數,用于任意類的對象建立

    {

         function  new_()      // 建立對象的臨時函數殼

        {

             this .Type  =  aClass;     // 我們也給每一個對象約定一個Type屬性,據此可以通路到對象所屬的類

             if  (aClass.Create)

              aClass.Create.apply( this , aParams);    // 我們約定所有類的構造函數都叫Create,這和DELPHI比較相似

        };

        new_.prototype  =  aClass;

         return   new  new_();

    };

     // 文法甘露的應用效果:    

     var  Person  =  Class(object,       // 派生至object基本類

    {

        Create:  function (name, age)

        {

             this .name  =  name;

             this .age  =  age;

        },

        SayHello:  function ()

        {

            alert( " Hello, I'm  "   +   this .name  +   " ,  "   +   this .age  +   "  years old. " );

        }

    });

     var  Employee  =  Class(Person,     // 派生至Person類,是不是和一般對象語言很相似?

    {

        Create:  function (name, age, salary)

        {

            Person.Create.call( this , name, age);   // 調用基類的構造函數

             this .salary  =  salary;

        },

        ShowMeTheMoney:  function ()

        {

            alert( this .name  +   "  $ "   +   this .salary);

        }

    });

     var  BillGates  =  New(Person, [ " Bill Gates " ,  53 ]);

     var  SteveJobs  =  New(Employee, [ " Steve Jobs " ,  53 ,  1234 ]);

    BillGates.SayHello();

    SteveJobs.SayHello();

    SteveJobs.ShowMeTheMoney();

     var  LittleBill  =  New(BillGates.Type, [ " Little Bill " ,  6 ]);    // 根據BillGate的類型建立LittleBill

    LittleBill.SayHello();

    alert(BillGates.isA(Person));        // true

    alert(BillGates.isA(Employee));      // false

    alert(SteveJobs.isA(Person));        // true

    alert(Person.isA(Employee));         // false

    alert(Employee.isA(Person));         // true

    “文法甘露”不用太多,隻要那麼一點點,就能改觀整個代碼的易讀性和流暢性,進而讓代碼顯得更優雅。有了這些文法甘露,JavaScript就很像一般對象語言了,寫起代碼了感覺也就爽多了!

    令人高興的是,受這些甘露滋養的JavaScript程式效率會更高。因為其原型對象裡既沒有了毫無用處的那些對象級的成員,而且還不存在 constructor屬性體,少了與構造函數間的牽連,但依舊保持了方法的共享性。這讓JavaScript在追溯原型鍊和搜尋屬性及方法時,少費許多工夫啊。

    我們就把這種形式稱為“甘露模型”吧!其實,這種“甘露模型”的原型用法才是符合prototype概念的本意,才是的JavaScript原型的真谛!

    想必微軟那些設計AJAX架構的工程師看到這個甘露模型時,肯定後悔沒有早點把AJAX部門從美國搬到咱中國的觀音廟來,錯過了觀音菩薩的點化。當然,我們也隻能是在代碼的示例中,把Bill Gates當作對象玩玩,真要讓他放棄上帝轉而皈依我佛肯定是不容易的,機緣未到啊!如果哪天你在微軟新出的AJAX類庫中看到這種甘露模型,那才是真正的緣分!

程式設計的快樂

    在軟體工業迅猛發展的今天,各式各樣的程式設計語言層出不窮,新語言的誕生,舊語言的演化,似乎已經讓我們眼花缭亂。為了适應面向對象程式設計的潮流,JavaScript語言也在向完全面向對象的方向發展,新的JavaScript标準已經從語義上擴充了許多面向對象的新元素。與此相反的是,許多靜态的對象語言也在向JavaScript的那種簡潔而幽雅的方向發展。例如,新版本的C#語言就吸收了JSON那樣的簡潔表示法,以及一些其他形式的 JavaScript特性。

    我們應該看到,随着RIA(強互聯應用)的發展和普及,AJAX技術也将逐漸淡出江湖,JavaScript也将最終消失或演化成其他形式的語言。但不管程式設計語言如何發展和演化,程式設計世界永遠都會在“資料”與“代碼”這千絲萬縷的糾纏中保持着無限的生機。隻要我們能看透這一點,我們就能很容易地學習和了解軟體世界的各種新事物。不管是已熟悉的過程式程式設計,還是正在發展的函數式程式設計,以及未來量子糾纏态的大規模并行式程式設計,我們都有足夠的法力來化解一切複雜的難題。

    佛最後淡淡地說:隻要我們放下那些表面的“類”,放下那些對象的“自我”,就能達到一種“對象本無根,類型亦無形”的境界,進而将自我融入到整個宇宙的生命輪循環中。我們将沒有自我,也沒有自私的欲望,你就是我,我就是你,你中有我,我中有你。這時,我們再看這生機勃勃的程式設計世界時,我們的内心将自然生起無限的慈愛之心,這種慈愛之心不是虛僞而是真誠的。關愛他人就是關愛自己,就是關愛這世界中的一切。那麼,我們的心是永遠快樂的,我們的程式是永遠快樂的,我們的類是永遠快樂的,我們的對象也是永遠快樂的。這就是程式設計的極樂!

    說到這裡,在座的比丘都猶如醍醐灌頂,心中豁然開朗。看看左邊這位早已喜不自禁,再看看右邊那位也是心花怒放。

    蓦然回首時,唯見君拈花微笑...

繼續閱讀