<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    隨筆-48  評論-26  文章-0  trackbacks-0

    首先說明,這是別人寫的一篇文章,寫得很好,對理解JavaScript很有好處,所以轉(zhuǎn)帖過來。

    引子
        編程世界里只存在兩種基本元素,一個(gè)是數(shù)據(jù),一個(gè)是代碼。編程世界就是在數(shù)據(jù)和代碼千絲萬縷的糾纏中呈現(xiàn)出無限的生機(jī)和活力。

        數(shù)據(jù)天生就是文靜的,總想保持自己固有的本色;而代碼卻天生活潑,總想改變這個(gè)世界。
     
       你看,數(shù)據(jù)代碼間的關(guān)系與物質(zhì)能量間的關(guān)系有著驚人的相似。數(shù)據(jù)也是有慣性的,如果沒有代碼來施加外力,她總保持自己原來的狀態(tài)。而代碼就象能量,他存在 的唯一目的,就是要努力改變數(shù)據(jù)原來的狀態(tài)。在代碼改變數(shù)據(jù)的同時(shí),也會因?yàn)閿?shù)據(jù)的抗拒而反過來影響或改變代碼原有的趨勢。甚至在某些情況下,數(shù)據(jù)可以轉(zhuǎn) 變?yōu)榇a,而代碼卻又有可能被轉(zhuǎn)變?yōu)閿?shù)據(jù),或許還存在一個(gè)類似E=MC2形式的數(shù)碼轉(zhuǎn)換方程呢。然而,就是在數(shù)據(jù)和代碼間這種即矛盾又統(tǒng)一的運(yùn)轉(zhuǎn)中,總能 體現(xiàn)出計(jì)算機(jī)世界的規(guī)律,這些規(guī)律正是我們編寫的程序邏輯。

        不過,由于不同程序員有著不同的世界觀,這些數(shù)據(jù)和代碼看起來也就不盡相同。于是,不同世界觀的程序員們運(yùn)用各自的方法論,推動(dòng)著編程世界的進(jìn)化和發(fā)展。
     
        眾所周知,當(dāng)今最流行的編程思想莫過于面向?qū)ο缶幊痰乃枷搿槭裁疵嫦驅(qū)ο蟮乃枷肽苎杆亠L(fēng)靡編程世界呢?因?yàn)槊嫦驅(qū)ο蟮乃枷胧状伟褦?shù)據(jù)和代碼結(jié)合成統(tǒng)一 體,并以一個(gè)簡單的對象概念呈現(xiàn)給編程者。這一下子就將原來那些雜亂的算法與子程序,以及糾纏不清的復(fù)雜數(shù)據(jù)結(jié)構(gòu),劃分成清晰而有序的對象結(jié)構(gòu),從而理清 了數(shù)據(jù)與代碼在我們心中那團(tuán)亂麻般的結(jié)。我們又可以有一個(gè)更清晰的思維,在另一個(gè)思想高度上去探索更加浩瀚的編程世界了。

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

        后來,慧能果然不負(fù)師父厚望,在南方開創(chuàng)了禪宗另一個(gè)廣闊的天空。而慧能當(dāng)年帶走的軟件真經(jīng)中就有一本是《JavaScript真經(jīng)》!

    回歸簡單

        要理解JavaScript,你得首先放下對象和類的概念,回到數(shù)據(jù)和代碼的本原。前面說過,編程世界只有數(shù)據(jù)和代碼兩種基本元素,而這兩種元素又有著糾纏不清的關(guān)系。JavaScript就是把數(shù)據(jù)和代碼都簡化到最原始的程度。

        JavaScript中的數(shù)據(jù)很簡潔的。簡單數(shù)據(jù)只有 undefined, null, boolean, number和string這五種,而復(fù)雜數(shù)據(jù)只有一種,即object。這就好比中國古典的樸素唯物思想,把世界最基本的元素歸為金木水火土,其他復(fù)雜 的物質(zhì)都是由這五種基本元素組成。

        JavaScript中的代碼只體現(xiàn)為一種形式,就是function。

        注意:以上單詞都是小寫的,不要和Number, String, Object, Function等JavaScript內(nèi)置函數(shù)混淆了。要知道,JavaScript語言是區(qū)分大小寫的呀!

        任何一個(gè)JavaScript的標(biāo)識、常量、變量和參數(shù)都只是unfined, null, bool, number, string, object 和 function類型中的一種,也就typeof返回值表明的類型。除此之外沒有其他類型了。

        先說說簡單數(shù)據(jù)類型吧。

        undefined:   代表一切未知的事物,啥都沒有,無法想象,代碼也就更無法去處理了。
                          注意:typeof(undefined) 返回也是 undefined。
                                  可以將undefined賦值給任何變量或?qū)傩裕⒉灰馕读饲宄嗽撟兞浚炊鴷虼硕嗔艘粋€(gè)屬性。

        null:            有那么一個(gè)概念,但沒有東西。無中似有,有中還無。雖難以想象,但已經(jīng)可以用代碼來處理了。
                          注意:typeof(null)返回object,但null并非object,具有null值的變量也并非object。

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

        number:      線性的事物,大小和次序分明,多而不亂。便于代碼進(jìn)行批量處理,也控制代碼的迭代和循環(huán)等。
                          注意:typeof(NaN)和typeof(Infinity)都返回number 。
                                  NaN參與任何數(shù)值計(jì)算的結(jié)構(gòu)都是NaN,而且 NaN != NaN 。
                                  Infinity / Infinity = NaN 。

        string:         面向人類的理性事物,而不是機(jī)器信號。人機(jī)信息溝通,代碼據(jù)此理解人的意圖等等,都靠它了。

         簡單類型都不是對象,JavaScript沒有將對象化的能力賦予這些簡單類型。直接被賦予簡單類型常量值的標(biāo)識符、變量和參數(shù)都不是一個(gè)對象。

        所謂“對象化”,就是可以將數(shù)據(jù)和代碼組織成復(fù)雜結(jié)構(gòu)的能力。JavaScript中只有object類型和function類型提供了對象化的能力。

    沒有類

        object就是對象的類型。在JavaScript中不管多么復(fù)雜的數(shù)據(jù)和代碼,都可以組織成object形式的對象。

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

        對 于許多面向?qū)ο蟮某绦騿T來說,這恐怕是JavaScript中最難以理解的地方。是啊,幾乎任何講面向?qū)ο蟮臅校谝粋€(gè)要講的就是“類”的概念,這可是 面向?qū)ο蟮闹е_@突然沒有了“類”,我們就象一下子沒了精神支柱,感到六神無主。看來,要放下對象和類,達(dá)到“對象本無根,類型亦無形”的境界確實(shí)是件 不容易的事情啊。

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

        var life = {};
        
    for(life.age = 1; life.age <= 3; life.age++)
        {
            
    switch(life.age)
            {
                
    case 1: life.body = "卵細(xì)胞";
                        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 3delete 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程序一開始產(chǎn)生了一個(gè)生命對象life,life誕生時(shí)只是一個(gè)光溜溜的對象,沒有任何屬性和方法。在第一次生命過程中,它有了 一個(gè)身體屬性body,并有了一個(gè)say方法,看起來是一個(gè)“卵細(xì)胞”。在第二次生命過程中,它又長出了“尾巴”和“腮”,有了tail和gill屬性, 顯然它是一個(gè)“蝌蚪”。在第三次生命過程中,它的tail和gill屬性消失了,但又長出了“四條腿”和“肺”,有了legs和lung屬性,從而最終變 成了“青蛙”。如果,你的想像力豐富的話,或許還能讓它變成英俊的“王子”,娶個(gè)美麗的“公主”什么的。不過,在看完這段程序之后,請你思考一個(gè)問題:

        我們一定需要類嗎?

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

        “類”,的確可以幫助我們理解復(fù)雜的現(xiàn)實(shí)世界,這紛亂的現(xiàn)實(shí)世界也的確需要進(jìn)行分類。但如果我們的思想被“類”束縛住了,“類”也就變成了“累”。想象一 下,如果一個(gè)生命對象開始的時(shí)就被規(guī)定了固定的“類”,那么它還能演化嗎?蝌蚪還能變成青蛙嗎?還可以給孩子們講小蝌蚪找媽媽的故事嗎?

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

        如果,此時(shí)你的內(nèi)心深處開始有所感悟,那么你已經(jīng)逐漸開始理解JavaScript的禪機(jī)了。

    函數(shù)的魔力

        接下來,我們再討論一下JavaScript函數(shù)的魔力吧。

        JavaScript的代碼就只有function一種形式,function就是函數(shù)的類型。也許其他編程語言還有procedure或 method等代碼概念,但在JavaScript里只有function一種形式。當(dāng)我們寫下一個(gè)函數(shù)的時(shí)候,只不過是建立了一個(gè)function類型 的實(shí)體而已。請看下面的程序:

        function myfunc()
        {
            alert(
    "hello");
        };
        
        alert(
    typeof(myfunc));


        這個(gè)代碼運(yùn)行之后可以看到typeof(myfunc)返回的是function。以上的函數(shù)寫法我們稱之為“定義式”的,如果我們將其改寫成下面的“變量式”的,就更容易理解了:

        var myfunc = function ()
            {
                alert(
    "hello");
            };
        
        alert(
    typeof(myfunc));


        這里明確定義了一個(gè)變量myfunc,它的初始值被賦予了一個(gè)function的實(shí)體。因此,typeof(myfunc)返回的也是function。 其實(shí),這兩種函數(shù)的寫法是等價(jià)的,除了一點(diǎn)細(xì)微差別,其內(nèi)部實(shí)現(xiàn)完全相同。也就是說,我們寫的這些JavaScript函數(shù)只是一個(gè)命了名的變量而已,其 變量類型即為function,變量的值就是我們編寫的函數(shù)代碼體。

        聰明的你或許立即會進(jìn)一步的追問:既然函數(shù)只是變量,那么變量就可以被隨意賦值并用到任意地方啰?

        我們來看看下面的代碼:

        var myfunc = function ()
            {
                alert(
    "hello");
            };
        myfunc(); 
    //第一次調(diào)用myfunc,輸出hello
        
        myfunc 
    = function ()
            {
                alert(
    "yeah");
            };    
        myfunc(); 
    //第二次調(diào)用myfunc,將輸出yeah


        這個(gè)程序運(yùn)行的結(jié)果告訴我們:答案是肯定的!在第一次調(diào)用函數(shù)之后,函數(shù)變量又被賦予了新的函數(shù)代碼體,使得第二次調(diào)用該函數(shù)時(shí),出現(xiàn)了不同的輸出。

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

        function myfunc ()
        {
            alert(
    "hello");
        };
        myfunc(); 
    //這里調(diào)用myfunc,輸出yeah而不是hello
        
        
    function myfunc ()
        {
            alert(
    "yeah");
        };    
        myfunc(); 
    //這里調(diào)用myfunc,當(dāng)然輸出yeah


        按理說,兩個(gè)簽名完全相同的函數(shù),在其他編程語言中應(yīng)該是非法的。但在JavaScript中,這沒錯(cuò)。不過,程序運(yùn)行之后卻發(fā)現(xiàn)一個(gè)奇怪的現(xiàn)象:兩次調(diào)用都只是最后那個(gè)函數(shù)里輸出的值!顯然第一個(gè)函數(shù)沒有起到任何作用。這又是為什么呢?

        原來,JavaScript執(zhí)行引擎并非一行一行地分析和執(zhí)行程序,而是一段一段地分析執(zhí)行的。而且,在同一段程序的分析執(zhí)行中,定義式的函數(shù)語句會被提 取出來優(yōu)先執(zhí)行。函數(shù)定義執(zhí)行完之后,才會按順序執(zhí)行其他語句代碼。也就是說,在第一次調(diào)用myfunc之前,第一個(gè)函數(shù)語句定義的代碼邏輯,已被第二個(gè) 函數(shù)定義語句覆蓋了。所以,兩次都調(diào)用都是執(zhí)行最后一個(gè)函數(shù)邏輯了。

        如果把這個(gè)JavaScript代碼分成兩段,例如將它們寫在一個(gè)html中,并用<script/>標(biāo)簽將其分成這樣的兩塊:

    <script>
        
    function myfunc ()
        {
            alert(
    "hello");
        };
        myfunc(); 
    //這里調(diào)用myfunc,輸出hello
    </script>

    <script>
        
    function myfunc ()
        {
            alert(
    "yeah");
        };    
        myfunc(); 
    //這里調(diào)用myfunc,輸出yeah
    </script>


        這時(shí),輸出才是各自按順序來的,也證明了JavaScript的確是一段段地執(zhí)行的。

        一段代碼中的定義式函數(shù)語句會優(yōu)先執(zhí)行,這似乎有點(diǎn)象靜態(tài)語言的編譯概念。所以,這一特征也被有些人稱為:JavaScript的“預(yù)編譯”。

        大多數(shù)情況下,我們也沒有必要去糾纏這些細(xì)節(jié)問題。只要你記住一點(diǎn):JavaScript里的代碼也是一種數(shù)據(jù),同樣可以被任意賦值和修改的,而它的值就是代碼的邏輯。只是,與一般數(shù)據(jù)不同的是,函數(shù)是可以被調(diào)用執(zhí)行的。

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

    奇妙的對象

        先來說說函數(shù)的對象化能力。

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

        function Sing()
        {
            
    with(arguments.callee)
              alert(author 
    + "" + poem);
        };
        Sing.author 
    = "李白";
        Sing.poem 
    = "漢家秦地月,流影照明妃。一上玉關(guān)道,天涯去不歸";
        Sing();
        Sing.author 
    = "李戰(zhàn)";
        Sing.poem 
    = "日出漢家天,月落陰山前。女兒琵琶怨,已唱三千年";
        Sing();


        在這段代碼中,Sing函數(shù)被定義后,又給Sing函數(shù)動(dòng)態(tài)地增加了author和poem屬性。將author和poem屬性設(shè)為不同的作者和詩句,在 調(diào)用Sing()時(shí)就能顯示出不同的結(jié)果。這個(gè)示例用一種詩情畫意的方式,讓我們理解了JavaScript函數(shù)就是對象的本質(zhì),也感受到了 JavaScript語言的優(yōu)美。

        好了,以上的講述,我們應(yīng)該算理解了function類型的東西都是和object類型一樣的東西,這種東西被我們稱為“對象”。我們的確可以這樣去看待這些“對象”,因?yàn)樗鼈兗扔?#8220;屬性”也有“方法”嘛。但下面的代碼又會讓我們產(chǎn)生新的疑惑:

        var anObject = {};  //一個(gè)對象
        anObject.aProperty = "Property of object";  //對象的一個(gè)屬性
        anObject.aMethod = function(){alert("Method of object")}; //對象的一個(gè)方法
        //主要看下面:
        alert(anObject["aProperty"]);   //可以將對象當(dāng)數(shù)組以屬性名作為下標(biāo)來訪問屬性
        anObject["aMethod"]();          //可以將對象當(dāng)數(shù)組以方法名作為下標(biāo)來調(diào)用方法
        forvar s in anObject)           //遍歷對象的所有屬性和方法進(jìn)行迭代化處理
            alert(s + " is a " + typeof(anObject[s]));


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

        var aFunction = function() {};  //一個(gè)函數(shù)
        aFunction.aProperty = "Property of function";  //函數(shù)的一個(gè)屬性
        aFunction.aMethod = function(){alert("Method of function")}; //函數(shù)的一個(gè)方法
        //主要看下面:
        alert(aFunction["aProperty"]);   //可以將函數(shù)當(dāng)數(shù)組以屬性名作為下標(biāo)來訪問屬性
        aFunction["aMethod"]();          //可以將函數(shù)當(dāng)數(shù)組以方法名作為下標(biāo)來調(diào)用方法
        forvar s in aFunction)           //遍歷函數(shù)的所有屬性和方法進(jìn)行迭代化處理
            alert(s + " is a " + typeof(aFunction[s]));


        是的,對象和函數(shù)可以象數(shù)組一樣,用屬性名或方法名作為下標(biāo)來訪問并處理。那么,它到底應(yīng)該算是數(shù)組呢,還是算對象?

        我們知道,數(shù)組應(yīng)該算是線性數(shù)據(jù)結(jié)構(gòu),線性數(shù)據(jù)結(jié)構(gòu)一般有一定的規(guī)律,適合進(jìn)行統(tǒng)一的批量迭代操作等,有點(diǎn)像波。而對象是離散數(shù)據(jù)結(jié)構(gòu),適合描述分散的和個(gè)性化的東西,有點(diǎn)像粒子。因此,我們也可以這樣問:JavaScript里的對象到底是波還是粒子?

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

        因此,JavaScript里的函數(shù)和對象既有對象的特征也有數(shù)組的特征。這里的數(shù)組被稱為“字典”,一種可以任意伸縮的名稱值對兒的集合。其實(shí), object和function的內(nèi)部實(shí)現(xiàn)就是一個(gè)字典結(jié)構(gòu),但這種字典結(jié)構(gòu)卻通過嚴(yán)謹(jǐn)而精巧的語法表現(xiàn)出了豐富的外觀。正如量子力學(xué)在一些地方用粒子來 解釋和處理問題,而在另一些地方卻用波來解釋和處理問題。你也可以在需要的時(shí)候,自由選擇用對象還是數(shù)組來解釋和處理問題。只要善于把握 JavaScript的這些奇妙特性,就可以編寫出很多簡潔而強(qiáng)大的代碼來。

    放下對象

        我們再來看看function與object的超然結(jié)合吧。

        在面向?qū)ο蟮木幊淌澜缋铮瑪?shù)據(jù)與代碼的有機(jī)結(jié)合就構(gòu)成了對象的概念。自從有了對象,編程世界就被劃分成兩部分,一個(gè)是對象內(nèi)的世界,一個(gè)是對象外的世界。 對象天生具有自私的一面,外面的世界未經(jīng)允許是不可訪問對象內(nèi)部的。對象也有大方的一面,它對外提供屬性和方法,也為他人服務(wù)。不過,在這里我們要談到一 個(gè)有趣的問題,就是“對象的自我意識”。

        什么?沒聽錯(cuò)吧?對象有自我意識?

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

        然而,就在對象將世界劃分為內(nèi)外兩部分的同時(shí),對象的“自我”也就隨之產(chǎn)生。“自我意識”是生命的最基本特征!正是由于對象這種強(qiáng)大的生命力,才使得編程世界充滿無限的生機(jī)和活力。

        但對象的“自我意識”在帶給我們快樂的同時(shí)也帶來了痛苦和煩惱。我們給對象賦予了太多欲望,總希望它們能做更多的事情。然而,對象的自私使得它們互相爭搶 系統(tǒng)資源,對象的自負(fù)讓對象變得復(fù)雜和臃腫,對象的自欺也往往帶來揮之不去的錯(cuò)誤和異常。我們?yōu)槭裁磿羞@么多的痛苦和煩惱呢?
     
        為此,有一個(gè)人,在對象樹下,整整想了九九八十一天,終于悟出了生命的痛苦來自于欲望,但究其欲望的根源是來自于自我意識。于是他放下了“自我”,在對象 樹下成了佛,從此他開始普度眾生,傳播真經(jīng)。他的名字就叫釋迦摩尼,而《JavaScript真經(jīng)》正是他所傳經(jīng)書中的一本。

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

        我們來看下面的代碼:

        function WhoAmI()       //定義一個(gè)函數(shù)WhoAmI
        {
            alert(
    "I'm " + this.name + " of " + typeof(this));
        };
        
        WhoAmI();   
    //此時(shí)是this當(dāng)前這段代碼的全局對象,在瀏覽器中就是window對象,其name屬性為空字符串。輸出:I'm of object

        
    var BillGates = {name: "Bill Gates"};
        BillGates.WhoAmI 
    = WhoAmI;  //將函數(shù)WhoAmI作為BillGates的方法。
        BillGates.WhoAmI();         //此時(shí)的this是BillGates。輸出:I'm Bill Gates of object
        
        
    var SteveJobs = {name: "Steve Jobs"};
        SteveJobs.WhoAmI 
    = WhoAmI;  //將函數(shù)WhoAmI作為SteveJobs的方法。
        SteveJobs.WhoAmI();         //此時(shí)的this是SteveJobs。輸出:I'm Steve Jobs of object

        WhoAmI.call(BillGates);     
    //直接將BillGates作為this,調(diào)用WhoAmI。輸出:I'm Bill Gates of object
        WhoAmI.call(SteveJobs);     //直接將SteveJobs作為this,調(diào)用WhoAmI。輸出:I'm Steve Jobs of object
        
        BillGates.WhoAmI.call(SteveJobs);   
    //將SteveJobs作為this,卻調(diào)用BillGates的WhoAmI方法。輸出:I'm Steve Jobs of object
        SteveJobs.WhoAmI.call(BillGates);   //將BillGates作為this,卻調(diào)用SteveJobs的WhoAmI方法。輸出:I'm Bill Gates of object

        WhoAmI.WhoAmI 
    = WhoAmI;     //將WhoAmI函數(shù)設(shè)置為自身的方法。
        WhoAmI.name = "WhoAmI";
        WhoAmI.WhoAmI();            
    //此時(shí)的this是WhoAmI函數(shù)自己。輸出:I'm WhoAmI of function
            
        ({name: 
    "nobody", WhoAmI: WhoAmI}).WhoAmI();    //臨時(shí)創(chuàng)建一個(gè)匿名對象并設(shè)置屬性后調(diào)用WhoAmI方法。輸出:I'm nobody of object


        從上面的代碼可以看出,同一個(gè)函數(shù)可以從不同的角度來調(diào)用,this并不一定是函數(shù)本身所屬的對象。this只是在任意對象和function元素結(jié)合時(shí)的一個(gè)概念,是種結(jié)合比起一般對象語言的默認(rèn)結(jié)合更加靈活,顯得更加超然和灑脫。

        在JavaScript函數(shù)中,你只能把this看成當(dāng)前要服務(wù)的“這個(gè)”對象。this是一個(gè)特殊的內(nèi)置參數(shù),根據(jù)this參數(shù),您可以訪問到“這個(gè)” 對象的屬性和方法,但卻不能給this參數(shù)賦值。在一般對象語言中,方法體代碼中的this可以省略的,成員默認(rèn)都首先是“自己”的。但 JavaScript卻不同,由于不存在“自我”,當(dāng)訪問“這個(gè)”對象時(shí),this不可省略!

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

    對象素描

        已經(jīng)說了許多了許多話題了,但有一個(gè)很基本的問題我們忘了討論,那就是:怎樣建立對象?

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

        JSON為創(chuàng)建對象提供了非常簡單的方法。例如,
        創(chuàng)建一個(gè)沒有任何屬性的對象:

    var o = {};


        創(chuàng)建一個(gè)對象并設(shè)置屬性及初始值:

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


        創(chuàng)建一個(gè)對象并設(shè)置屬性和方法:

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


         創(chuàng)建一個(gè)更復(fù)雜的對象,嵌套其他對象和對象數(shù)組等:

        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的形式就是用大括“{}”號包括起來的項(xiàng)目列表,每一個(gè)項(xiàng)目間并用逗號“,”分隔,而項(xiàng)目就是用冒號“:”分隔的屬性名和屬性值。這是典型的字典 表示形式,也再次表明了 JavaScript里的對象就是字典結(jié)構(gòu)。不管多么復(fù)雜的對象,都可以被一句JSON代碼來創(chuàng)建并賦值。

        其 實(shí),JSON就是JavaScript對象最好的序列化形式,它比XML更簡潔也更省空間。對象可以作為一個(gè)JSON形式的字符串,在網(wǎng)絡(luò)間自由傳遞和交 換信息。而當(dāng)需要將這個(gè)JSON字符串變成一個(gè)JavaScript對象時(shí),只需要使用eval函數(shù)這個(gè)強(qiáng)大的數(shù)碼轉(zhuǎn)換引擎,就立即能得到一個(gè) JavaScript內(nèi)存對象。正是由于JSON的這種簡單樸素的天生麗質(zhì),才使得她在AJAX舞臺上成為璀璨奪目的明星。

        JavaScript就是這樣,把面向?qū)ο竽切┛此茝?fù)雜的東西,用及其簡潔的形式表達(dá)出來。卸下對象浮華的濃妝,還對象一個(gè)眉目清晰!

    構(gòu)造對象
     
        好了,接下我們來討論一下對象的另一種創(chuàng)建方法。

        除JSON外,在JavaScript中我們可以使用new操作符結(jié)合一個(gè)函數(shù)的形式來創(chuàng)建對象。例如:

        function MyFunc() {};         //定義一個(gè)空函數(shù)
        var anObj = new MyFunc();  //使用new操作符,借助MyFun函數(shù),就創(chuàng)建了一個(gè)對象


        JavaScript的這種創(chuàng)建對象的方式可真有意思,如何去理解這種寫法呢?
     
       其實(shí),可以把上面的代碼改寫成這種等價(jià)形式:

        function MyFunc(){};
        
    var anObj = {};     //創(chuàng)建一個(gè)對象
        MyFunc.call(anObj); //將anObj對象作為this指針調(diào)用MyFunc函數(shù)


        我們就可以這樣理解,JavaScript先用new操作符創(chuàng)建了一個(gè)對象,緊接著就將這個(gè)對象作為this參數(shù)調(diào)用了后面的函數(shù)。其 實(shí),JavaScript內(nèi)部就是這么做的,而且任何函數(shù)都可以被這樣調(diào)用!但從 “anObj = new MyFunc()” 這種形式,我們又看到一個(gè)熟悉的身影,C++和C#不就是這樣創(chuàng)建對象的嗎?原來,條條大路通靈山,殊途同歸啊!

        君看到此處也許會想,我們?yōu)槭裁床豢梢园堰@個(gè)MyFunc當(dāng)作構(gòu)造函數(shù)呢?恭喜你,答對了!JavaScript也是這么想的!請看下面的代碼: 

     1     function Person(name)   //帶參數(shù)的構(gòu)造函數(shù)
     2     {
     3         this.name = name;   //將參數(shù)值賦給給this對象的屬性
     4         this.SayHello = function() {alert("Hello, I'm " + this.name);};   //給this對象定義一個(gè)SayHello方法。
     5     };
     6 
     7     function Employee(name, salary)     //子構(gòu)造函數(shù)
     8     {
     9         Person.call(this, name);        //將this傳給父構(gòu)造函數(shù)
    10         this.salary = salary;       //設(shè)置一個(gè)this的salary屬性
    11         this.ShowMeTheMoney = function() {alert(this.name + " $" + this.salary);};  //添加ShowMeTheMoney方法。
    12     };
    13     
    14     var BillGates = new Person("Bill Gates");   //用Person構(gòu)造函數(shù)創(chuàng)建BillGates對象
    15     var SteveJobs = new Employee("Steve Jobs"1234);   //用Empolyee構(gòu)造函數(shù)創(chuàng)建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


        這段代碼表明,函數(shù)不但可以當(dāng)作構(gòu)造函數(shù),而且還可以帶參數(shù),還可以為對象添加成員和方法。其中的第9行,Employee構(gòu)造函數(shù)又將自己接收的 this作為參數(shù)調(diào)用Person構(gòu)造函數(shù),這就是相當(dāng)于調(diào)用基類的構(gòu)造函數(shù)。第21、22行還表明這樣一個(gè)意思:BillGates是由Person構(gòu) 造的,而SteveJobs是由Employee構(gòu)造的。對象內(nèi)置的constructor屬性還指明了構(gòu)造對象所用的具體函數(shù)!

        其實(shí),如果你愿意把函數(shù)當(dāng)作“類”的話,她就是“類”,因?yàn)樗緛砭陀?#8220;類”的那些特征。難道不是嗎?她生出的兒子各個(gè)都有相同的特征,而且構(gòu)造函數(shù)也與類同名嘛!

        但要注意的是,用構(gòu)造函數(shù)操作this對象創(chuàng)建出來的每一個(gè)對象,不但具有各自的成員數(shù)據(jù),而且還具有各自的方法數(shù)據(jù)。換句話說,方法的代碼體(體現(xiàn)函數(shù) 邏輯的數(shù)據(jù))在每一個(gè)對象中都存在一個(gè)副本。盡管每一個(gè)代碼副本的邏輯是相同的,但對象們確實(shí)是各自保存了一份代碼體。上例中的最后一句說明了這一實(shí)事, 這也解釋了JavaScript中的函數(shù)就是對象的概念。

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

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

        function SayHello()     //先定義一份SayHello函數(shù)代碼
        {
            alert(
    "Hello, I'm " + this.name);
        };
        
        
    function Person(name)   //帶參數(shù)的構(gòu)造函數(shù)
        {
            
    this.name = name;   //將參數(shù)值賦給給this對象的屬性
            this.SayHello = SayHello;   //給this對象SayHello方法賦值為前面那份SayHello代碼。
        };

        
    var BillGates = new Person("Bill Gates");   //創(chuàng)建BillGates對象
        var SteveJobs = new Person("Steve Jobs");   //創(chuàng)建SteveJobs對象
        
        alert(BillGates.SayHello 
    == SteveJobs.SayHello); //顯示:true


        其 中,最后一行的輸出結(jié)果表明兩個(gè)對象確實(shí)共享了一個(gè)函數(shù)對象。雖然,這段程序達(dá)到了共享了一份方法代碼的目的,但卻不怎么優(yōu)雅。 因?yàn)椋xSayHello方法時(shí)反映不出其與Person類的關(guān)系。“優(yōu)雅”這個(gè)詞用來形容代碼,也不知道是誰先提出來的。不過,這個(gè)詞反映了程序員已 經(jīng)從追求代碼的正確、高效、可靠和易讀等基礎(chǔ)上,向著追求代碼的美觀感覺和藝術(shù)境界的層次發(fā)展,程序人生又多了些浪漫色彩。

       顯然,JavaScript早想到了這一問題,她的設(shè)計(jì)者們?yōu)榇颂峁┝艘粋€(gè)有趣的prototype概念。

    初看原型

        prototype源自法語,軟件界的標(biāo)準(zhǔn)翻譯為“原型”,代表事物的初始形態(tài),也含有模型和樣板的意義。JavaScript中的prototype概念恰如其分地反映了這個(gè)詞的內(nèi)含,我們不能將其理解為C++的prototype那種預(yù)先聲明的概念。

        JavaScript的所有function類型的對象都有一個(gè)prototype屬性。這個(gè)prototype屬性本身又是一個(gè)object類型的對 象,因此我們也可以給這個(gè)prototype對象添加任意的屬性和方法。既然prototype是對象的“原型”,那么由該函數(shù)構(gòu)造出來的對象應(yīng)該都會具 有這個(gè)“原型”的特性。事實(shí)上,在構(gòu)造函數(shù)的prototype上定義的所有屬性和方法,都是可以通過其構(gòu)造的對象直接訪問和調(diào)用的。也可以這么 說,prototype提供了一群同類對象共享屬性和方法的機(jī)制。

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

        function Person(name)
        {
            
    this.name = name;   //設(shè)置對象屬性,每個(gè)對象各自一份屬性數(shù)據(jù)
        };
        
        Person.prototype.SayHello 
    = function()  //給Person函數(shù)的prototype添加SayHello方法。
        {
            alert(
    "Hello, I'm " + this.name);
        }

        
    var BillGates = new Person("Bill Gates");   //創(chuàng)建BillGates對象
        var SteveJobs = new Person("Steve Jobs");   //創(chuàng)建SteveJobs對象

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

        alert(BillGates.SayHello 
    == SteveJobs.SayHello); //因?yàn)閮蓚€(gè)對象是共享prototype的SayHello,所以顯示:true


        程序運(yùn)行的結(jié)果表明,構(gòu)造函數(shù)的prototype上定義的方法確實(shí)可以通過對象直接調(diào)用到,而且代碼是共享的。顯然,把方法設(shè)置到prototype的 寫法顯得優(yōu)雅多了,盡管調(diào)用形式?jīng)]有變,但邏輯上卻體現(xiàn)了方法與類的關(guān)系,相對前面的寫法,更容易理解和組織代碼。

        那么,對于多層次類型的構(gòu)造函數(shù)情況又如何呢?

        我們再來看下面的代碼:

     1     function Person(name)   //基類構(gòu)造函數(shù)
     2     {
     3         this.name = name;
     4     };
     5     
     6     Person.prototype.SayHello = function()  //給基類構(gòu)造函數(shù)的prototype添加方法
     7     {
     8         alert("Hello, I'm " + this.name);
     9     };
    10     
    11     function Employee(name, salary) //子類構(gòu)造函數(shù)
    12     {
    13         Person.call(this, name);    //調(diào)用基類構(gòu)造函數(shù)
    14         this.salary = salary;
    15     };
    16     
    17     Employee.prototype = new Person();  //建一個(gè)基類的對象作為子類原型的原型,這里很有意思
    18     
    19     Employee.prototype.ShowMeTheMoney = function()  //給子類添構(gòu)造函數(shù)的prototype添加方法
    20     {
    21         alert(this.name + " $" + this.salary);
    22     };
    23 
    24     var BillGates = new Person("Bill Gates");   //創(chuàng)建基類Person的BillGates對象
    25     var SteveJobs = new Employee("Steve Jobs"1234);   //創(chuàng)建子類Employee的SteveJobs對象
    26 
    27     BillGates.SayHello();       //通過對象直接調(diào)用到prototype的方法
    28     SteveJobs.SayHello();       //通過子類對象直接調(diào)用基類prototype的方法,關(guān)注!
    29     SteveJobs.ShowMeTheMoney(); //通過子類對象直接調(diào)用子類prototype的方法
    30 
    31     alert(BillGates.SayHello == SteveJobs.SayHello); //顯示:true,表明prototype的方法是共享的


        這段代碼的第17行,構(gòu)造了一個(gè)基類的對象,并將其設(shè)為子類構(gòu)造函數(shù)的prototype,這是很有意思的。這樣做的目的就是為了第28行,通過子類對象也可以直接調(diào)用基類prototype的方法。為什么可以這樣呢?

        原來,在JavaScript中,prototype不但能讓對象共享自己財(cái)富,而且prototype還有尋根問祖的天性,從而使得先輩們的遺產(chǎn)可以代 代相傳。當(dāng)從一個(gè)對象那里讀取屬性或調(diào)用方法時(shí),如果該對象自身不存在這樣的屬性或方法,就會去自己關(guān)聯(lián)的prototype對象那里尋找;如果 prototype沒有,又會去prototype自己關(guān)聯(lián)的前輩prototype那里尋找,直到找到或追溯過程結(jié)束為止。

        在JavaScript內(nèi)部,對象的屬性和方法追溯機(jī)制是通過所謂的prototype鏈來實(shí)現(xiàn)的。當(dāng)用new操作符構(gòu)造對象時(shí),也會同時(shí)將構(gòu)造函數(shù)的 prototype對象指派給新創(chuàng)建的對象,成為該對象內(nèi)置的原型對象。對象內(nèi)置的原型對象應(yīng)該是對外不可見的,盡管有些瀏覽器(如Firefox)可以 讓我們訪問這個(gè)內(nèi)置原型對象,但并不建議這樣做。內(nèi)置的原型對象本身也是對象,也有自己關(guān)聯(lián)的原型對象,這樣就形成了所謂的原型鏈。

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

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

        “原型繼承”是慈祥而又嚴(yán)厲的。原形對象將自己的屬性和方法無私地貢獻(xiàn)給孩子們使用,也并不強(qiáng)迫孩子們必須遵從,允許一些頑皮孩子按自己的興趣和愛好獨(dú)立 行事。從這點(diǎn)上看,原型對象是一位慈祥的母親。然而,任何一個(gè)孩子雖然可以我行我素,但卻不能動(dòng)原型對象既有的財(cái)產(chǎn),因?yàn)槟强赡軙绊懙狡渌⒆拥睦妗? 從這一點(diǎn)上看,原型對象又象一位嚴(yán)厲的父親。我們來看看下面的代碼就可以理解這個(gè)意思了:

        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();   
    //由于繼承了原型的東西,規(guī)規(guī)矩矩輸出:Hello, I'm Bill Gates
        
        
    var SteveJobs = new Person("Steve Jobs");
        SteveJobs.company 
    = "Apple";    //設(shè)置自己的company屬性,掩蓋了原型的company屬性
        SteveJobs.SayHello = function() //實(shí)現(xiàn)了自己的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還是按老樣子輸出


        對象可以掩蓋原型對象的那些屬性和方法,一個(gè)構(gòu)造函數(shù)原型對象也可以掩蓋上層構(gòu)造函數(shù)原型對象既有的屬性和方法。這種掩蓋其實(shí)只是在對象自己身上創(chuàng)建了新 的屬性和方法,只不過這些屬性和方法與原型對象的那些同名而已。JavaScript就是用這簡單的掩蓋機(jī)制實(shí)現(xiàn)了對象的“多態(tài)”性,與靜態(tài)對象語言的虛 函數(shù)和重載(override)概念不謀而合。

        然而,比靜態(tài)對象語言更神奇的是,我們可以隨時(shí)給原型對象動(dòng)態(tài)添加新的屬性和方法,從而動(dòng)態(tài)地?cái)U(kuò)展基類的功能特性。這在靜態(tài)對象語言中是很難想象的。我們來看下面的代碼:

        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()    //建立對象后再動(dòng)態(tài)擴(kuò)展原型的方法
        {
            alert(
    "Poor " + this.name + ", bye bye!");
        };
        
        BillGates.Retire(); 
    //動(dòng)態(tài)擴(kuò)展的方法即可被先前建立的對象立即調(diào)用


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

    原型擴(kuò)展

        想必君的悟性極高,可能你會這樣想:如果在JavaScript內(nèi)置的那些如Object和Function等函數(shù)的prototype上添加些新的方法和屬性,是不是就能擴(kuò)展JavaScript的功能呢?

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

        在 AJAX技術(shù)迅猛發(fā)展的今天,許多成功的AJAX項(xiàng)目的JavaScript運(yùn)行庫都大量擴(kuò)展了內(nèi)置函數(shù)的prototype功能。比如微軟的 ASP.NET AJAX,就給這些內(nèi)置函數(shù)及其prototype添加了大量的新特性,從而增強(qiáng)了JavaScript的功能。

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

    String.prototype.trim = function String$trim() {
        
    if (arguments.length !== 0throw Error.parameterCount();
        
    return this.replace(/^"s+|"s+$/g, '');
    }


        這 段代碼就是給內(nèi)置String函數(shù)的prototype擴(kuò)展了一個(gè)trim方法,于是所有的String類對象都有了trim方 法了。有了這個(gè)擴(kuò)展,今后要去除字符串兩段的空白,就不用再分別處理了,因?yàn)槿魏巫址加辛诉@個(gè)擴(kuò)展功能,只要調(diào)用即可,真的很方便。

        當(dāng)然,幾乎很少有人去給Object的prototype添加方法,因?yàn)槟菚绊懙剿械膶ο螅窃谀愕募軜?gòu)中這種方法的確是所有對象都需要的。

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

        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#語言的描述形式,在一個(gè)構(gòu)造函數(shù)里依次定義了私有成員、公共屬性和可用的方法,顯得非常優(yōu)雅嘛。特別是“閉包”機(jī)制可以模擬對私有成員的保護(hù)機(jī)制,做得非常漂亮。

        所 謂的“閉包”,就是在構(gòu)造函數(shù)體內(nèi)定義另外的函數(shù)作為目標(biāo)對象的方法函數(shù),而這個(gè)對象的方法函數(shù)反過來引用外層外層函數(shù)體中的臨時(shí)變量。這使得只要目標(biāo)對 象在生存期內(nèi)始終能保持其方法,就能間接保持原構(gòu)造函數(shù)體當(dāng)時(shí)用到的臨時(shí)變量值。盡管最開始的構(gòu)造函數(shù)調(diào)用已經(jīng)結(jié)束,臨時(shí)變量的名稱也都消失了,但在目標(biāo) 對象的方法內(nèi)卻始終能引用到該變量的值,而且該值只能通這種方法來訪問。即使再次調(diào)用相同的構(gòu)造函數(shù),但只會生成新對象和方法,新的臨時(shí)變量只是對應(yīng)新的 值,和上次那次調(diào)用的是各自獨(dú)立的。的確很巧妙!

        但是前面我們說過,給每一個(gè)對象設(shè)置一份方法是一種很大的浪費(fèi)。還有,“閉包” 這種間接保持變量值的機(jī)制,往往會給JavaSript的垃圾回收器制造難題。特別是遇到對象間復(fù)雜的循環(huán)引用時(shí),垃圾回收的判斷邏輯非常復(fù)雜。無獨(dú)有 偶,IE瀏覽器早期版本確實(shí)存在JavaSript垃圾回收方面的內(nèi)存泄漏問題。再加上“閉包”模型在性能測試方面的表現(xiàn)不佳,微軟最終放棄了“閉包”模 型,而改用“原型”模型。正所謂“有得必有失”嘛。

        原型模型需要一個(gè)構(gòu)造函數(shù)來定義對象的成員,而方法卻依附在該構(gòu)造函數(shù)的原型上。大致寫法如下:

        //定義構(gòu)造函數(shù)
        function Person(name)
        {
            
    this.name = name;   //在構(gòu)造函數(shù)中定義成員
        };
        
        
    //方法定義到構(gòu)造函數(shù)的prototype上
        Person.prototype.SayHello = function()
        {
            alert(
    "Hello, I'm " + this.name);
        };    
        
        
    //子類構(gòu)造函數(shù)
        function Employee(name, salary)
        {
            Person.call(
    this, name);    //調(diào)用上層構(gòu)造函數(shù)
            this.salary = salary;       //擴(kuò)展的成員
        };
        
        
    //子類構(gòu)造函數(shù)首先需要用上層構(gòu)造函數(shù)來建立prototype對象,實(shí)現(xiàn)繼承的概念
        Employee.prototype = new Person()   //只需要其prototype的方法,此對象的成員沒有任何意義!
        
        
    //子類方法也定義到構(gòu)造函數(shù)之上
        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();

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

        在 原型模型中,為了實(shí)現(xiàn)類繼承,必須首先將子類構(gòu)造函數(shù)的prototype設(shè)置為一個(gè)父類的對象實(shí)例。創(chuàng)建這個(gè)父類對象實(shí)例的目的就是為 了構(gòu)成原型鏈,以起到共享上層原型方法作用。但創(chuàng)建這個(gè)實(shí)例對象時(shí),上層構(gòu)造函數(shù)也會給它設(shè)置對象成員,這些對象成員對于繼承來說是沒有意義的。雖然,我 們也沒有給構(gòu)造函數(shù)傳遞參數(shù),但確實(shí)創(chuàng)建了若干沒有用的成員,盡管其值是undefined,這也是一種浪費(fèi)啊。

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

    原型真諦

        正當(dāng)我們感概萬分時(shí),天空中一道紅光閃過,祥云中出現(xiàn)了觀音菩薩。只見她手持玉凈瓶,輕拂翠柳枝,灑下幾滴甘露,頓時(shí)讓JavaScript又添新的靈氣。

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

        要想知道這“語法甘露”為何物,就請君側(cè)耳細(xì)聽。

        在理解這些語法甘露之前,我們需要重新再回顧一下JavaScript構(gòu)造對象的過程。

        我 們已經(jīng)知道,用 var anObject = new aFunction() 形式創(chuàng)建對象的過程實(shí)際上可以分為三步:第一步是建立一個(gè)新對象;第二步將該對象內(nèi)置的原型對象設(shè)置為構(gòu)造函數(shù)prototype引用的那個(gè)原型對象;第 三步就是將該對象作為this參數(shù)調(diào)用構(gòu)造函數(shù),完成成員設(shè)置等初始化工作。對象建立之后,對象上的任何訪問和操作都只與對象自身及其原型鏈上的那串對象 有關(guān),與構(gòu)造函數(shù)再扯不上關(guān)系了。換句話說,構(gòu)造函數(shù)只是在創(chuàng)建對象時(shí)起到介紹原型對象和初始化對象兩個(gè)作用。

        那么,我們能否自己定義一個(gè)對象來當(dāng)作原型,并在這個(gè)原型上描述類,然后將這個(gè)原型設(shè)置給新創(chuàng)建的對象,將其當(dāng)作對象的類呢?我們又能否將這個(gè)原型中的一個(gè)方法當(dāng)作構(gòu)造函數(shù),去初始化新建的對象呢?例如,我們定義這樣一個(gè)原型對象:

        var Person =  //定義一個(gè)對象來作為原型類
        {
            Create: 
    function(name, age)  //這個(gè)當(dāng)構(gòu)造函數(shù)
            {
                
    this.name = name;
                
    this.age = age;
            },
            SayHello: 
    function()  //定義方法
            {
                alert(
    "Hello, I'm " + this.name);
            },
            HowOld: 
    function()  //定義方法
            {
                alert(
    this.name + " is " + this.age + " years old.");
            }
        };

        這個(gè)JSON形式的寫法多么象一個(gè)C#的類啊!既有構(gòu)造函數(shù),又有各種方法。如果可以用某種形式來創(chuàng)建對象,并將對象的內(nèi)置的原型設(shè)置為上面這個(gè)“類”對象,不就相當(dāng)于創(chuàng)建該類的對象了嗎?

        但遺憾的是,我們幾乎不能訪問到對象內(nèi)置的原型屬性!盡管有些瀏覽器可以訪問到對象的內(nèi)置原型,但這樣做的話就只能限定了用戶必須使用那種瀏覽器。這也幾乎不可行。

        那么,我們可不可以通過一個(gè)函數(shù)對象來做媒介,利用該函數(shù)對象的prototype屬性來中轉(zhuǎn)這個(gè)原型,并用new操作符傳遞給新建的對象呢?

        其實(shí),象這樣的代碼就可以實(shí)現(xiàn)這一目標(biāo):

        function anyfunc(){};           //定義一個(gè)函數(shù)軀殼
        anyfunc.prototype = Person;     //將原型對象放到中轉(zhuǎn)站prototype
        var BillGates = new anyfunc();  //新建對象的內(nèi)置原型將是我們期望的原型對象

        不過,這個(gè)anyfunc函數(shù)只是一個(gè)軀殼,在使用過這個(gè)軀殼之后它就成了多余的東西了,而且這和直接使用構(gòu)造函數(shù)來創(chuàng)建對象也沒啥不同,有點(diǎn)不爽。

        可是,如果我們將這些代碼寫成一個(gè)通用函數(shù),而那個(gè)函數(shù)軀殼也就成了函數(shù)內(nèi)的函數(shù),這個(gè)內(nèi)部函數(shù)不就可以在外層函數(shù)退出作用域后自動(dòng)消亡嗎?而且,我們可以將原型對象作為通用函數(shù)的參數(shù),讓通用函數(shù)返回創(chuàng)建的對象。我們需要的就是下面這個(gè)形式:

        function New(aClass, aParams)    //通用創(chuàng)建函數(shù)
        {
            
    function new_()     //定義臨時(shí)的中轉(zhuǎn)函數(shù)殼
            {
                aClass.Create.apply(
    this, aParams);   //調(diào)用原型中定義的的構(gòu)造函數(shù),中轉(zhuǎn)構(gòu)造邏輯及構(gòu)造參數(shù)
            };
            new_.prototype 
    = aClass;    //準(zhǔn)備中轉(zhuǎn)原型對象
            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]);  //調(diào)用通用函數(shù)創(chuàng)建對象,并以數(shù)組形式傳遞構(gòu)造參數(shù)
        BillGates.SayHello();
        BillGates.HowOld();

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

        這里的通用函數(shù)New()就是一個(gè)“語法甘露”!這個(gè)語法甘露不但中轉(zhuǎn)了原型對象,還中轉(zhuǎn)了構(gòu)造函數(shù)邏輯及構(gòu)造參數(shù)。

        有 趣的是,每次創(chuàng)建完對象退出New函數(shù)作用域時(shí),臨時(shí)的new_函數(shù)對象會被自動(dòng)釋放。由于new_的prototype屬性被設(shè)置為新的原型對象,其原 來的原型對象和new_之間就已解開了引用鏈,臨時(shí)函數(shù)及其原來的原型對象都會被正確回收了。上面代碼的最后一句證明,新創(chuàng)建的對象的 constructor屬性返回的是Object函數(shù)。其實(shí)新建的對象自己及其原型里沒有constructor屬性,那返回的只是最頂層原型對象的構(gòu)造 函數(shù),即Object。

        有了New這個(gè)語法甘露,類的定義就很像C#那些靜態(tài)對象語言的形式了,這樣的代碼顯得多么文靜而優(yōu)雅啊!

        當(dāng)然,這個(gè)代碼僅僅展示了“語法甘露”的概念。我們還需要多一些的語法甘露,才能實(shí)現(xiàn)用簡潔而優(yōu)雅的代碼書寫類層次及其繼承關(guān)系。好了,我們再來看一個(gè)更豐富的示例吧:

        //語法甘露:
        var object =    //定義小寫的object基本類,用于實(shí)現(xiàn)最基礎(chǔ)的方法等
        {
            isA: 
    function(aType)   //一個(gè)判斷類與類之間以及對象與類之間關(guān)系的基礎(chǔ)方法
            {
                
    var self = this;
                
    while(self)
                {
                    
    if (self == aType)
                      
    return true;
                    self 
    = self.Type;
                };
                
    return false;
            }
        };
        
        
    function Class(aBaseClass, aClassDefine)    //創(chuàng)建類的函數(shù),用于聲明類及繼承關(guān)系
        {
            
    function class_()   //創(chuàng)建類的臨時(shí)函數(shù)殼
            {
                
    this.Type = aBaseClass;    //我們給每一個(gè)類約定一個(gè)Type屬性,引用其繼承的類
                for(var member in aClassDefine)
                    
    this[member] = aClassDefine[member];    //復(fù)制類的全部定義到當(dāng)前創(chuàng)建的類
            };
            class_.prototype 
    = aBaseClass;
            
    return new class_();
        };
        
        
    function New(aClass, aParams)   //創(chuàng)建對象的函數(shù),用于任意類的對象創(chuàng)建
        {
            
    function new_()     //創(chuàng)建對象的臨時(shí)函數(shù)殼
            {
                
    this.Type = aClass;    //我們也給每一個(gè)對象約定一個(gè)Type屬性,據(jù)此可以訪問到對象所屬的類
                if (aClass.Create)
                  aClass.Create.apply(
    this, aParams);   //我們約定所有類的構(gòu)造函數(shù)都叫Create,這和DELPHI比較相似
            };
            new_.prototype 
    = aClass;
            
    return new new_();
        };

        
    //語法甘露的應(yīng)用效果:    
        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);  //調(diào)用基類的構(gòu)造函數(shù)
                this.salary = salary;
            },
            ShowMeTheMoney: 
    function()
            {
                alert(
    this.name + " $" + this.salary);
            }
        });

        
    var BillGates = New(Person, ["Bill Gates"53]);
        
    var SteveJobs = New(Employee, ["Steve Jobs"531234]);
        BillGates.SayHello();
        SteveJobs.SayHello();
        SteveJobs.ShowMeTheMoney();
        
        
    var LittleBill = New(BillGates.Type, ["Little Bill"6]);   //根據(jù)BillGate的類型創(chuàng)建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

        “語法甘露”不用太多,只要那么一點(diǎn)點(diǎn),就能改觀整個(gè)代碼的易讀性和流暢性,從而讓代碼顯得更優(yōu)雅。有了這些語法甘露,JavaScript就很像一般對象語言了,寫起代碼了感覺也就爽多了!

        令 人高興的是,受這些甘露滋養(yǎng)的JavaScript程序效率會更高。因?yàn)槠湓蛯ο罄锛葲]有了毫無用處的那些對象級的成員,而且還不存在 constructor屬性體,少了與構(gòu)造函數(shù)間的牽連,但依舊保持了方法的共享性。這讓JavaScript在追溯原型鏈和搜索屬性及方法時(shí),少費(fèi)許多 工夫啊。

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

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

    編程的快樂

        在軟件工業(yè)迅猛發(fā)展的今天,各式各樣的編程語言層出不 窮,新語言的誕生,舊語言的演化,似乎已經(jīng)讓我們眼花繚亂。為了適應(yīng)面向?qū)ο缶幊痰某绷鳎琂avaScript語言也在向完全面向?qū)ο蟮姆较虬l(fā)展,新的 JavaScript標(biāo)準(zhǔn)已經(jīng)從語義上擴(kuò)展了許多面向?qū)ο蟮男略亍Ec此相反的是,許多靜態(tài)的對象語言也在向JavaScript的那種簡潔而幽雅的方向 發(fā)展。例如,新版本的C#語言就吸收了JSON那樣的簡潔表示法,以及一些其他形式的JavaScript特性。

        我們應(yīng)該看到, 隨著RIA(強(qiáng)互聯(lián)應(yīng)用)的發(fā)展和普及,AJAX技術(shù)也將逐漸淡出江湖,JavaScript也將最終消失或演化成其他形式的語言。但不管編程語言如何發(fā) 展和演化,編程世界永遠(yuǎn)都會在“數(shù)據(jù)”與“代碼”這千絲萬縷的糾纏中保持著無限的生機(jī)。只要我們能看透這一點(diǎn),我們就能很容易地學(xué)習(xí)和理解軟件世界的各種 新事物。不管是已熟悉的過程式編程,還是正在發(fā)展的函數(shù)式編程,以及未來量子糾纏態(tài)的大規(guī)模并行式編程,我們都有足夠的法力來化解一切復(fù)雜的難題。

        佛 最后淡淡地說:只要我們放下那些表面的“類”,放下那些對象的“自我”,就能達(dá)到一種“對象本無根,類型亦無形”的境界,從而將自我融入到整個(gè)宇宙的生命 輪循環(huán)中。我們將沒有自我,也沒有自私的欲望,你就是我,我就是你,你中有我,我中有你。這時(shí),我們再看這生機(jī)勃勃的編程世界時(shí),我們的內(nèi)心將自然生起無 限的慈愛之心,這種慈愛之心不是虛偽而是真誠的。關(guān)愛他人就是關(guān)愛自己,就是關(guān)愛這世界中的一切。那么,我們的心是永遠(yuǎn)快樂的,我們的程序是永遠(yuǎn)快樂的, 我們的類是永遠(yuǎn)快樂的,我們的對象也是永遠(yuǎn)快樂的。這就是編程的極樂!

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

        驀然回首時(shí),唯見君拈花微笑...

       原著:李戰(zhàn)(leadzen).深圳 2008-2-23

    posted on 2009-09-26 14:45 Worker 閱讀(206) 評論(0)  編輯  收藏 所屬分類: 拾人牙慧

    主站蜘蛛池模板: 114一级毛片免费| 日韩精品福利片午夜免费观着| 色影音免费色资源| 国产成人啪精品视频免费网| 亚洲乱码无码永久不卡在线 | 亚洲爆乳无码专区| 一区二区亚洲精品精华液| 欧洲美女大片免费播放器视频| 亚洲黄色免费网站| 亚洲国产成人久久一区久久| 亚洲欧洲精品视频在线观看| 免费精品久久久久久中文字幕| 99久久免费中文字幕精品| 国产一级淫片a免费播放口之| 免费福利电影在线观看| 最新中文字幕电影免费观看| 亚洲色欲色欲www在线丝| 国产日本亚洲一区二区三区| 高清永久免费观看| 日韩a级毛片免费观看| 国产jizzjizz免费视频| 亚洲人成网站在线播放影院在线 | 亚洲人成色4444在线观看| 成人无码a级毛片免费| 国产青草视频免费观看97| 亚洲精品无码久久久久久久| 麻豆一区二区三区蜜桃免费| 国产在线观看免费观看不卡| 国产亚洲一区二区手机在线观看| 亚洲精品无码mⅴ在线观看| 日韩免费高清大片在线| 亚洲无码精品浪潮| 亚洲精品无码久久久久牙蜜区| 精品无码国产污污污免费网站| 国产精品亚洲w码日韩中文| 亚洲小说图区综合在线| 18禁成人网站免费观看| 亚洲婷婷五月综合狠狠爱| 羞羞漫画小舞被黄漫免费| 成熟女人特级毛片www免费| 久久精品蜜芽亚洲国产AV |