當(dāng)前位置：首頁(yè) > 前端技术 > javascript >内容正文

javascript

悟透JavaScript[转]

發(fā)布時(shí)間：2024/1/1 javascript 31 豆豆

生活随笔收集整理的這篇文章主要介紹了悟透JavaScript[转] 小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

轉(zhuǎn)自：
http://www.cnblogs.com/leadzen/archive/2008/02/25/1073404.html
http://www.cnblogs.com/leadzen/archive/2008/06/04/1213090.html

引子

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

????數(shù)據(jù)天生就是文靜的，總想保持自己固有的本色；而代碼卻天生活潑，總想改變這個(gè)世界。
?
?? 你看，數(shù)據(jù)代碼間的關(guān)系與物質(zhì)能量間的關(guān)系有著驚人的相似。數(shù)據(jù)也是有慣性的，如果沒(méi)有代碼來(lái)施加外力，她總保持自己原來(lái)的狀態(tài)。而代碼就象能量，他存在的唯一目的，就是要努力改變數(shù)據(jù)原來(lái)的狀態(tài)。在代碼改變數(shù)據(jù)的同時(shí)，也會(huì)因?yàn)閿?shù)據(jù)的抗拒而反過(guò)來(lái)影響或改變代碼原有的趨勢(shì)。甚至在某些情況下，數(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ī)律正是我們編寫(xiě)的程序邏輯。

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

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

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

回歸簡(jiǎn)單

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

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

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

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

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

??? 先說(shuō)說(shuō)簡(jiǎn)單數(shù)據(jù)類型吧。

??? undefined:?? 代表一切未知的事物，啥都沒(méi)有，無(wú)法想象，代碼也就更無(wú)法去處理了。
????????????????????? 注意：typeof(undefined) 返回也是 undefined。
????????????????????????????? 可以將undefined賦值給任何變量或?qū)傩?#xff0c;但并不意味了清除了該變量，反而會(huì)因此多了一個(gè)屬性。

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

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

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

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

???? 簡(jiǎn)單類型都不是對(duì)象，JavaScript沒(méi)有將對(duì)象化的能力賦予這些簡(jiǎn)單類型。直接被賦予簡(jiǎn)單類型常量值的標(biāo)識(shí)符、變量和參數(shù)都不是一個(gè)對(duì)象。

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

沒(méi)有類

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

????但JavaScript卻沒(méi)有 “類”的概念！

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

??? 這樣，我們先來(lái)看一段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?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程序一開(kāi)始產(chǎn)生了一個(gè)生命對(duì)象life，life誕生時(shí)只是一個(gè)光溜溜的對(duì)象，沒(méi)有任何屬性和方法。在第一次生命過(guò)程中，它有了一個(gè)身體屬性body，并有了一個(gè)say方法，看起來(lái)是一個(gè)“卵細(xì)胞”。在第二次生命過(guò)程中，它又長(zhǎng)出了“尾巴”和“腮”，有了tail和gill屬性，顯然它是一個(gè)“蝌蚪”。在第三次生命過(guò)程中，它的tail和gill屬性消失了，但又長(zhǎng)出了“四條腿”和“肺”，有了legs和lung屬性，從而最終變成了“青蛙”。如果，你的想像力豐富的話，或許還能讓它變成英俊的“王子”，娶個(gè)美麗的“公主”什么的。不過(guò)，在看完這段程序之后，請(qǐng)你思考一個(gè)問(wèn)題：

??? 我們一定需要類嗎？

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

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

??? 所以，JavaScript中沒(méi)有“類”，類已化于無(wú)形，與對(duì)象融為一體。正是由于放下了“類”這個(gè)概念，JavaScript的對(duì)象才有了其他編程語(yǔ)言所沒(méi)有的活力。

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

函數(shù)的魔力

??? 接下來(lái)，我們?cè)儆懻撘幌翵avaScript函數(shù)的魔力吧。

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

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

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

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

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

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

??? 我們來(lái)看看下面的代碼：

????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)了不同的輸出。

??? 好了，我們又來(lái)把上面的代碼改成第一種定義式的函數(shù)形式：

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

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

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

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

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

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

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

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

奇妙的對(duì)象

??? 先來(lái)說(shuō)說(shuō)函數(shù)的對(duì)象化能力。

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

????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è)為不同的作者和詩(shī)句，在調(diào)用Sing()時(shí)就能顯示出不同的結(jié)果。這個(gè)示例用一種詩(shī)情畫(huà)意的方式，讓我們理解了JavaScript函數(shù)就是對(duì)象的本質(zhì)，也感受到了JavaScript語(yǔ)言的優(yōu)美。

??? 好了，以上的講述，我們應(yīng)該算理解了function類型的東西都是和object類型一樣的東西，這種東西被我們稱為“對(duì)象”。我們的確可以這樣去看待這些“對(duì)象”，因?yàn)樗鼈兗扔小皩傩浴币灿小胺椒ā甭铩５旅娴拇a又會(huì)讓我們產(chǎn)生新的疑惑：

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

??? 同樣對(duì)于function類型的對(duì)象也是一樣：

????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)來(lái)訪問(wèn)屬性
????aFunction["aMethod"]();??????????//可以將函數(shù)當(dāng)數(shù)組以方法名作為下標(biāo)來(lái)調(diào)用方法
????for(?var?s?in?aFunction)???????????//遍歷函數(shù)的所有屬性和方法進(jìn)行迭代化處理
????????alert(s?+?"?is?a?"?+?typeof(aFunction[s]));

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

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

??? 如果存在對(duì)象量子論，那么答案一定是：波粒二象性！

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

放下對(duì)象

??? 我們?cè)賮?lái)看看function與object的超然結(jié)合吧。

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

??? 什么？沒(méi)聽(tīng)錯(cuò)吧？對(duì)象有自我意識(shí)？

??? 可能對(duì)許多程序員來(lái)說(shuō)，這的確是第一次聽(tīng)說(shuō)。不過(guò)，請(qǐng)君看看C++、C#和Java的this，DELPHI的self，還有VB的me，或許你會(huì)恍然大悟！當(dāng)然，也可能只是說(shuō)句“不過(guò)如此”而已。

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

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

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

??? 我們來(lái)看下面的代碼：

????function?WhoAmI()???????//定義一個(gè)函數(shù)WhoAmI
????{
????????alert("I'm?"?+?this.name?+?"?of?"?+?typeof(this));
????};
????
????WhoAmI();???//此時(shí)是this當(dāng)前這段代碼的全局對(duì)象，在瀏覽器中就是window對(duì)象，其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è)匿名對(duì)象并設(shè)置屬性后調(diào)用WhoAmI方法。輸出：I'm?nobody?of?object

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

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

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

對(duì)象素描

??? 已經(jīng)說(shuō)了許多了許多話題了，但有一個(gè)很基本的問(wèn)題我們忘了討論，那就是：怎樣建立對(duì)象？

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

??? JSON為創(chuàng)建對(duì)象提供了非常簡(jiǎn)單的方法。例如，
??? 創(chuàng)建一個(gè)沒(méi)有任何屬性的對(duì)象：

var?o?=?{};

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

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

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

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

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

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

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

構(gòu)造對(duì)象
?
??? 好了，接下我們來(lái)討論一下對(duì)象的另一種創(chuàng)建方法。

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

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

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

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

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

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

?1?????function?Person(name)???//帶參數(shù)的構(gòu)造函數(shù)
?2?????{
?3?????????this.name?=?name;???//將參數(shù)值賦給給this對(duì)象的屬性
?4?????????this.SayHello?=?function()?{alert("Hello,?I'm?"?+?this.name);};???//給this對(duì)象定義一個(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對(duì)象
15?????var?SteveJobs?=?new?Employee("Steve?Jobs",?1234);???//用Empolyee構(gòu)造函數(shù)創(chuàng)建SteveJobs對(duì)象
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ù)，還可以為對(duì)象添加成員和方法。其中的第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)造的。對(duì)象內(nèi)置的constructor屬性還指明了構(gòu)造對(duì)象所用的具體函數(shù)！

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

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

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

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

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

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

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

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

初看原型

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

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

??? 我們先來(lái)看看下面的代碼：

????function?Person(name)
????{
????????this.name?=?name;???//設(shè)置對(duì)象屬性，每個(gè)對(duì)象各自一份屬性數(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對(duì)象
????var?SteveJobs?=?new?Person("Steve?Jobs");???//創(chuàng)建SteveJobs對(duì)象

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

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

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

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

??? 我們?cè)賮?lái)看下面的代碼：

?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è)基類的對(duì)象作為子類原型的原型，這里很有意思
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對(duì)象
25?????var?SteveJobs?=?new?Employee("Steve?Jobs",?1234);???//創(chuàng)建子類Employee的SteveJobs對(duì)象
26?
27?????BillGates.SayHello();???????//通過(guò)對(duì)象直接調(diào)用到prototype的方法
28?????SteveJobs.SayHello();???????//通過(guò)子類對(duì)象直接調(diào)用基類prototype的方法，關(guān)注！
29?????SteveJobs.ShowMeTheMoney();?//通過(guò)子類對(duì)象直接調(diào)用子類prototype的方法
30?
31?????alert(BillGates.SayHello?==?SteveJobs.SayHello);?//顯示：true，表明prototype的方法是共享的

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

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

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

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

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

??? “原型繼承”是慈祥而又嚴(yán)厲的。原形對(duì)象將自己的屬性和方法無(wú)私地貢獻(xiàn)給孩子們使用，也并不強(qiáng)迫孩子們必須遵從，允許一些頑皮孩子按自己的興趣和愛(ài)好獨(dú)立行事。從這點(diǎn)上看，原型對(duì)象是一位慈祥的母親。然而，任何一個(gè)孩子雖然可以我行我素，但卻不能動(dòng)原型對(duì)象既有的財(cái)產(chǎn)，因?yàn)槟强赡軙?huì)影響到其他孩子的利益。從這一點(diǎn)上看，原型對(duì)象又象一位嚴(yán)厲的父親。我們來(lái)看看下面的代碼就可以理解這個(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的覆蓋沒(méi)有影響原型對(duì)象，BillGates還是按老樣子輸出

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

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

????function?Person(name)
????{
????????this.name?=?name;
????};
????
????Person.prototype.SayHello?=?function()??//建立對(duì)象前定義的方法
????{
????????alert("Hello,?I'm?"?+?this.name);
????};
????
????var?BillGates?=?new?Person("Bill?Gates");???//建立對(duì)象
????
????BillGates.SayHello();
????
????Person.prototype.Retire?=?function()????//建立對(duì)象后再動(dòng)態(tài)擴(kuò)展原型的方法
????{
????????alert("Poor?"?+?this.name?+?",?bye?bye!");
????};
????
????BillGates.Retire();?//動(dòng)態(tài)擴(kuò)展的方法即可被先前建立的對(duì)象立即調(diào)用

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

原型擴(kuò)展

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

????那么，恭喜你，你得到了！

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

????我們來(lái)看一段摘自MicrosoftAjax.debug.js中的代碼：

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

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

????當(dāng)然，幾乎很少有人去給Object的prototype添加方法，因?yàn)槟菚?huì)影響到所有的對(duì)象，除非在你的架構(gòu)中這種方法的確是所有對(duì)象都需要的。

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

????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);?????//這里不能訪問(wèn)到私有變量

????很顯然，這種模型的類描述特別象C#語(yǔ)言的描述形式，在一個(gè)構(gòu)造函數(shù)里依次定義了私有成員、公共屬性和可用的方法，顯得非常優(yōu)雅嘛。特別是“閉包”機(jī)制可以模擬對(duì)私有成員的保護(hù)機(jī)制，做得非常漂亮。

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

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

????原型模型需要一個(gè)構(gòu)造函數(shù)來(lái)定義對(duì)象的成員，而方法卻依附在該構(gòu)造函數(shù)的原型上。大致寫(xiě)法如下：

????//定義構(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ù)來(lái)建立prototype對(duì)象，實(shí)現(xiàn)繼承的概念
????Employee.prototype?=?new?Person()???//只需要其prototype的方法，此對(duì)象的成員沒(méi)有任何意義！
????
????//子類方法也定義到構(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();

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

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

????唉！世界上沒(méi)有完美的事情啊！

原型真諦

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

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

????要想知道這“語(yǔ)法甘露”為何物，就請(qǐng)君側(cè)耳細(xì)聽(tīng)。

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

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

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

????var?Person?=??//定義一個(gè)對(duì)象來(lái)作為原型類
????{
????????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形式的寫(xiě)法多么象一個(gè)C#的類啊！既有構(gòu)造函數(shù)，又有各種方法。如果可以用某種形式來(lái)創(chuàng)建對(duì)象，并將對(duì)象的內(nèi)置的原型設(shè)置為上面這個(gè)“類”對(duì)象，不就相當(dāng)于創(chuàng)建該類的對(duì)象了嗎？

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

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

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

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

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

????可是，如果我們將這些代碼寫(xiě)成一個(gè)通用函數(shù)，而那個(gè)函數(shù)軀殼也就成了函數(shù)內(nèi)的函數(shù)，這個(gè)內(nèi)部函數(shù)不就可以在外層函數(shù)退出作用域后自動(dòng)消亡嗎？而且，我們可以將原型對(duì)象作為通用函數(shù)的參數(shù)，讓通用函數(shù)返回創(chuàng)建的對(duì)象。我們需要的就是下面這個(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)原型對(duì)象
????????return?new?new_();??????????//返回建立最終建立的對(duì)象
????};
????
????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)建對(duì)象，并以數(shù)組形式傳遞構(gòu)造參數(shù)
????BillGates.SayHello();
????BillGates.HowOld();

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

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

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

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

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

????//語(yǔ)法甘露：
????var?object?=????//定義小寫(xiě)的object基本類，用于實(shí)現(xiàn)最基礎(chǔ)的方法等
????{
????????isA:?function(aType)???//一個(gè)判斷類與類之間以及對(duì)象與類之間關(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)建對(duì)象的函數(shù)，用于任意類的對(duì)象創(chuàng)建
????{
????????function?new_()?????//創(chuàng)建對(duì)象的臨時(shí)函數(shù)殼
????????{
????????????this.Type?=?aClass;????//我們也給每一個(gè)對(duì)象約定一個(gè)Type屬性，據(jù)此可以訪問(wèn)到對(duì)象所屬的類
????????????if?(aClass.Create)
??????????????aClass.Create.apply(this,?aParams);???//我們約定所有類的構(gòu)造函數(shù)都叫Create，這和DELPHI比較相似
????????};
????????new_.prototype?=?aClass;
????????return?new?new_();
????};

????//語(yǔ)法甘露的應(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類，是不是和一般對(duì)象語(yǔ)言很相似？
????{
????????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",?53,?1234]);
????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

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

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

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

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

編程的快樂(lè)

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

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

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

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

????驀然回首時(shí)，唯見(jiàn)君拈花微笑...

原著：李戰(zhàn)(leadzen).深圳 2008-2-23
【轉(zhuǎn)載請(qǐng)注明作者及出處】
CNDEV提供PDF? 下載

繼：

注意：如果您尚未閱讀過(guò)原來(lái)那篇老文章《悟透JavaScript》，請(qǐng)先行閱讀該文，以了解上下文關(guān)系。

在上面的示例中，我們定義了兩個(gè)語(yǔ)法甘露，一個(gè)是Class()函數(shù)，一個(gè)是New()函數(shù)。使用Class()甘露，我們已經(jīng)可以用非常優(yōu)雅的格式定義一個(gè)類。例如前例中的：

????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);
????????}
????});

?? ?這種類的寫(xiě)法已經(jīng)和C#或Java的格式非常相似了。不過(guò)，其中調(diào)用基類的構(gòu)造函數(shù)還需要用“Person.Create.call(this, name, age)”這樣的方式來(lái)表達(dá)。這需要用到基類的類名，并要用call這種特殊的方式來(lái)傳遞this指針。這和C#的base()以及Java的super()那樣的簡(jiǎn)介調(diào)用方式比起來(lái)，還需要進(jìn)一步美化。

?? ?而New()函數(shù)的使用也不是很爽。前例中需要用“New(Employee, ["Steve Jobs", 53, 1234])”這樣的方式來(lái)創(chuàng)建對(duì)象，其中第一個(gè)參數(shù)是類，其他構(gòu)造參數(shù)需要用數(shù)組包起來(lái)。這和JavaScript本來(lái)那種自然的“new Employee("Steve Jobs", 53, 1234)”比起來(lái)，丑陋多了。這也需要美化。

?? ?為了實(shí)現(xiàn)這些美化工作，我們需要回顧一下new一個(gè)對(duì)象的實(shí)質(zhì)。前面我們說(shuō)過(guò)：
??? var anObj = new aClass();
?? ?相當(dāng)于先創(chuàng)建一個(gè)空白對(duì)象anObj，然后將其作為this指針調(diào)用aClass()函數(shù)。其實(shí)，這個(gè)過(guò)程中還有一個(gè)關(guān)鍵步驟就是將aClass的prototype屬性，賦值給anObj內(nèi)置的prototype屬性。盡管我們無(wú)法訪問(wèn)到anObj內(nèi)置的prototype屬性，但它卻為對(duì)象提供了可以調(diào)用的方法。

?? ?由于前例中的Class()語(yǔ)法甘露實(shí)際上是構(gòu)造了一個(gè)原型，并將這個(gè)原型掛在了相應(yīng)的原型鏈上。由于它返回的是一個(gè)對(duì)象而不是函數(shù)，因此由它定義出來(lái)的Person和Employee類也都只是對(duì)象而不是函數(shù)，無(wú)法用new Person()或new Employee()這樣的方式來(lái)創(chuàng)建對(duì)象。要?jiǎng)?chuàng)基于一個(gè)原型來(lái)創(chuàng)建對(duì)象，就需要借助New()語(yǔ)法甘露來(lái)中轉(zhuǎn)這個(gè)原型。

?? ?那么，如果我們讓Class()語(yǔ)法甘露返回一個(gè)函數(shù)而不是對(duì)象，不就可以用new Person()和new Employee()這種方式來(lái)創(chuàng)建對(duì)象了嗎？而且，我們可為這個(gè)返回函數(shù)創(chuàng)建一個(gè)繼承至相關(guān)原型鏈的原型對(duì)象，并設(shè)置到該函數(shù)的prototype屬性。這樣，我們用new方式創(chuàng)建這個(gè)類函數(shù)的對(duì)象時(shí)，就自然地繼承了該類的原型了。

?? ?那么，我們讓Class()語(yǔ)法甘露返回什么函數(shù)呢？因?yàn)镃lass()語(yǔ)法甘露返回的函數(shù)是用來(lái)創(chuàng)建對(duì)象的，當(dāng)然應(yīng)該返回該類的構(gòu)造函數(shù)了，正好可以是類定義參數(shù)中的Create方法啊。這樣一來(lái)，我們也無(wú)需在New()語(yǔ)法甘露中間接調(diào)用Create構(gòu)造函數(shù)了，事實(shí)上New()語(yǔ)法甘露可以完全扔掉了。

?? ?于是，我們就有了下面這個(gè)精簡(jiǎn)甘露模型的例子：

http://www.leadzen.cn/Books/WuTouJavaScript/1/JS24.htm

??? 這個(gè)精簡(jiǎn)甘露模型模擬出來(lái)的類更加自然和諧，而且比前面的甘露模型更加精簡(jiǎn)。其中的Class()函數(shù)雖然很簡(jiǎn)短，但卻是整個(gè)模型的關(guān)鍵：

?? ?Class()函數(shù)將最后一個(gè)參數(shù)當(dāng)作類定義，如果有兩個(gè)參數(shù)，則第一個(gè)參數(shù)就表示繼承的基類。如果多于兩個(gè)參數(shù)，則第一個(gè)和最后一個(gè)之間的參數(shù)都可以用作類需要實(shí)現(xiàn)的接口聲明，保留給將來(lái)擴(kuò)展甘露模型使用吧。

?? ?使用Class()函數(shù)來(lái)定義一個(gè)類，實(shí)際上就是為創(chuàng)建對(duì)象準(zhǔn)備了一個(gè)構(gòu)造函數(shù)，而該構(gòu)造函數(shù)的prototype已經(jīng)初始化為方法表，并可繼承上層類的方法表。這樣，當(dāng)用new操作符創(chuàng)建一個(gè)該類對(duì)象時(shí)，也就很自然地將此構(gòu)造函數(shù)的原型鏈傳遞給了新構(gòu)造的對(duì)象。于是，就可以采用象“new Person("Bill Gates", 53)”這樣的語(yǔ)法來(lái)創(chuàng)建對(duì)象了。

?? ?類定義中名為Create的函數(shù)是特別對(duì)待的，因?yàn)檫@就是構(gòu)造函數(shù)。如果沒(méi)有定義Create構(gòu)造函數(shù)，Class()函數(shù)也會(huì)創(chuàng)建一個(gè)默認(rèn)構(gòu)造函數(shù)。事實(shí)上，這個(gè)構(gòu)造函數(shù)就代表了類。除此之外，我們還為其定義了一個(gè)Base屬性，以方便追溯繼承關(guān)系。

?? ?在本例中的根類object的原型中，我們定義了一個(gè)base方法。有了這個(gè)方法之后，在類定義的構(gòu)造函數(shù)中，就可以使用“this.base()”這樣的方式來(lái)調(diào)用基類的構(gòu)造函數(shù)。這種調(diào)用基類的方式和C#的base及Java的super就非常相似了。

?? ?不過(guò)，Class()函數(shù)中還是有個(gè)小問(wèn)題，那就是不支持toString()方法的覆寫(xiě)。也就是說(shuō)，如果我們?yōu)橐粋€(gè)類定義了自己的toString()方法，調(diào)用Class()函數(shù)來(lái)生成類時(shí)，toString()方法會(huì)丟失。

原來(lái)toString()方法被JavaScript規(guī)定為不可枚舉的內(nèi)置方法。除此之外還有還有toLocaleString(), valueOf(), hasOwnProperty(), isPrototypeOf(), propertyIsEnumerable()等，都是不能枚舉的內(nèi)置方法。這樣在Class()函數(shù)中的那個(gè)for(…in…)語(yǔ)句就不能遍歷到這些屬性，導(dǎo)致問(wèn)題的產(chǎn)生。

因此，這個(gè)Class()語(yǔ)法甘露還不能支持不可枚舉內(nèi)置方法的覆寫(xiě)。這不能不說(shuō)是一個(gè)小小的遺憾。當(dāng)然，遇到需要完全覆寫(xiě)這些內(nèi)置方法的情況并不多。頂多偶爾會(huì)有toString(), toLocaleString(), valueOf()這三個(gè)方法的覆寫(xiě)，其他幾個(gè)幾乎不會(huì)有覆寫(xiě)的情況。

除此之外，object根類的base()方法也還有個(gè)小問(wèn)題。這個(gè)方法用到了函數(shù)的caller屬性，以此判斷構(gòu)造函數(shù)的層次。而Opera瀏覽器不支持函數(shù)的caller屬性，因此base方法不適合于Opera瀏覽器，這不能不說(shuō)是另一個(gè)更大的遺憾。

?? ?如果在甘露模型中留有這樣的問(wèn)題，想必觀音姐姐也會(huì)遺憾。我們還需要繼續(xù)努力，別讓觀音姐姐失望啊。

?? ?其實(shí)，要解決不能覆寫(xiě)非枚舉屬性的問(wèn)題也并非難事。既然這些屬性是特殊的，我們就可以對(duì)其進(jìn)行特殊處理。我們可以在復(fù)制完可枚舉的屬性之后，加上類似下面的特殊判斷處理語(yǔ)句：

??????? if(aDefine.toString != Object.prototype.toString)
??????????? aPrototype.toString = aDefine.toString;

?? ?因?yàn)?#xff0c;如果覆寫(xiě)了toString方法，那么它就肯定不等于原生的toString方法，這時(shí)就可復(fù)制toString方法。當(dāng)然，我們也可以不通過(guò)比較，而是用hasOwnProperty來(lái)判斷是否覆寫(xiě)了toString方法：

??????? if(aDefine.hasOwnProperty("toString"))
??????????? aPrototype.toString = aDefine.toString;

?? ?使用哪種判斷方式可以任選。我們建議采用直接比較方式，這樣可以避免萬(wàn)一遇到覆寫(xiě)Object.prototype.hasOwnProperty的情況，也不至于出問(wèn)題。當(dāng)然，這也似乎有點(diǎn)太鉆牛角尖了。
?? ?在實(shí)際的應(yīng)用中，我們建議根據(jù)具體應(yīng)用情況來(lái)決定是否需要支持特殊屬性的覆寫(xiě)。如果在應(yīng)用中根本不會(huì)覆寫(xiě)這些特殊屬性，就無(wú)需加上這樣的特殊處理。如果是打造專業(yè)的AJAX類庫(kù)，最多支持toString(), toLocaleString(), valueOf()這三個(gè)方法的覆寫(xiě)就可以了。千萬(wàn)不要玩畫(huà)蛇添足的游戲。

?? ?最頭痛的是對(duì)base()函數(shù)的重寫(xiě)，也就要兼容不支持caller屬性的Opera瀏覽器。雖然Opera瀏覽器目前只占很小的市場(chǎng)范圍，但也算有名的四大瀏覽器之列。如果甘露模型不支持Opera瀏覽器，顯然無(wú)法彰顯觀音菩薩的法力，也更不好意思說(shuō)自己是觀音老師的弟子。

?? ?其實(shí)，base()方法之所以要使用自身的caller屬性，就是為了確定當(dāng)前構(gòu)造函數(shù)的層次，從而可以知道該調(diào)用更上層的構(gòu)造函數(shù)。有沒(méi)有別的辦法來(lái)知道是那層構(gòu)造函數(shù)調(diào)用了base()方法呢？殘酷的事實(shí)告訴我們，除了函數(shù)自身的caller屬性，沒(méi)有辦法知道是誰(shuí)調(diào)用了自己。

?? ?既然改變不了別人，那就改變自己！我們?yōu)槭裁淳筒荒茉谶\(yùn)行中改變base()自身呢？

?? ?事實(shí)上，第一層構(gòu)造函數(shù)調(diào)用this.base()時(shí)，我們是可以過(guò)this.Type屬性知道地一層構(gòu)造函數(shù)的，而this.Type.Base就是第二層構(gòu)造函數(shù)。只是，第二層構(gòu)造函數(shù)又會(huì)調(diào)用this.base()，其本來(lái)是想調(diào)用第三層的構(gòu)造函數(shù)，但再次進(jìn)入base()函數(shù)時(shí)，就無(wú)法知曉構(gòu)造函數(shù)的層次了。

如果我們?cè)诘谝粚訕?gòu)造函數(shù)調(diào)用進(jìn)入this.base()時(shí)，先改變this.base本身，讓其在下次被調(diào)用時(shí)能掉到第三層構(gòu)造函數(shù)。完成這個(gè)變身動(dòng)作之后再調(diào)第二層構(gòu)造函數(shù)，而第二層構(gòu)造函數(shù)再調(diào)用this.base()時(shí)就能調(diào)用到第三層構(gòu)造函數(shù)了。這樣，只要我們?cè)诿看蔚腷ase()調(diào)用中都完成一個(gè)自我的變身動(dòng)作，就可以按正確的順序完成對(duì)構(gòu)造函數(shù)的調(diào)用。這是多么有趣的調(diào)用方式啊！

?? ?于是，我們可以將原來(lái)的base()函數(shù)改寫(xiě)成下面的形式：

????object.prototype.base?=?function()??//調(diào)用基類構(gòu)造函數(shù)
????{
????????var?Base?=?this.Type.Base;??//獲取當(dāng)前對(duì)象的基類??
????????if(!Base.Base)??//若基類已沒(méi)有基類
????????????Base.apply(this,?arguments)?????//則直接調(diào)用基類構(gòu)造函數(shù)
????????else????//若基類還有基類?????????
????????{
????????????this.base?=?MakeBase(Base);?????//先覆寫(xiě)this.base
????????????Base.apply(this,?arguments);????//再調(diào)用基類構(gòu)造函數(shù)
????????????delete?this.base;???????????????//刪除覆寫(xiě)的base屬性
????????};
????????function?MakeBase(Type)?//包裝基類構(gòu)造函數(shù)
????????{
????????????var?Base?=?Type.Base;
????????????if(!Base.Base)?return?Base;?//基類已無(wú)基類，就無(wú)需包裝
????????????return?function()???//包裝為引用臨時(shí)變量Base的閉包函數(shù)
????????????{
????????????????this.base?=?MakeBase(Base);?????//先覆寫(xiě)this.base
????????????????Base.apply(this,?arguments);????//再調(diào)用基類構(gòu)造函數(shù)
????????????};
????????};
????};

?? ?原來(lái)的base()函數(shù)只有兩行代碼，而新的base()函數(shù)卻又十幾行代碼。看來(lái)為了支持Opera瀏覽器確實(shí)也付出了代價(jià)，好在這些代碼只有十來(lái)行，代價(jià)并不是太大。當(dāng)然，如果無(wú)須支持Opera瀏覽器，也就不必用這個(gè)base()函數(shù)了。

?? ?在這個(gè)新的base()函數(shù)中，對(duì)this.base的覆寫(xiě)實(shí)際上只是在this對(duì)象身上創(chuàng)建了一個(gè)臨時(shí)的base方法。這個(gè)臨時(shí)方法暫時(shí)遮住了object.prototype.base方法，而object.prototype.base方法卻一直存在。而每次對(duì)this.base的變身操作，都是針對(duì)這個(gè)臨時(shí)的方法的。當(dāng)所有層次構(gòu)造函數(shù)的調(diào)用都完成之后，即可刪除this對(duì)象的這個(gè)臨時(shí)base方法。

?? ?其中的MakeBase()函數(shù)非常有意思，如果基類還有基類，它就返回一個(gè)閉包函數(shù)。下次this.base()被構(gòu)造函數(shù)調(diào)用時(shí)，即調(diào)用的是這個(gè)閉包函數(shù)。但這個(gè)閉包函數(shù)又可能會(huì)調(diào)用MakeBase()形成另一個(gè)閉包函數(shù)，直到基類再無(wú)基類。

?? ?如果說(shuō)這是遞歸調(diào)用呢？卻并非那種函數(shù)自身對(duì)自身的直接或間接調(diào)用，而是調(diào)用一個(gè)函數(shù)卻返回另一個(gè)函數(shù)，再調(diào)用返回的函數(shù)又會(huì)在其中產(chǎn)生新的返回函數(shù)。如果說(shuō)是函數(shù)式編程中的高階函數(shù)調(diào)用呢？這函數(shù)的嵌套階數(shù)卻是與類層次相關(guān)的不確定數(shù)，而每一個(gè)階梯都有新生成的函數(shù)。

這可真是閉包中嵌套著閉包，貌似遞歸卻又不是遞歸，是高階函數(shù)卻又高不可測(cè)。一旦整個(gè)對(duì)象創(chuàng)建完成，用過(guò)的內(nèi)存狀態(tài)都釋放得干干凈凈，只得到一塵不染的新建對(duì)象。JavaScript玩到這樣的境界，方顯觀音大士的法力！

?? ?下面就是是重寫(xiě)后的完美甘露模型代碼：

http://www.leadzen.cn/Books/WuTouJavaScript/1/JS25.htm

?? ?當(dāng)今的JavaScript世界里，各式各樣的AJAX類庫(kù)不斷出現(xiàn)。同時(shí)，在開(kāi)放Web API的大潮中，AJAX類庫(kù)作為Web API最重要的形式，起著舉足輕重的作用。這些AJAX類庫(kù)是否方便引用，是否易于擴(kuò)展，是否書(shū)寫(xiě)優(yōu)雅，都成了衡量Web API質(zhì)量的重要指標(biāo)。

?? ?甘露模型基于JavaScript原型機(jī)制，用及其簡(jiǎn)單的Class()函數(shù)，構(gòu)造了一個(gè)非常優(yōu)雅的面向?qū)ο蟮念悪C(jī)制。事實(shí)上，我們完全可以在這個(gè)甘露模型的基礎(chǔ)上打造相關(guān)的的AJAX類庫(kù)，為開(kāi)發(fā)人員提供簡(jiǎn)潔而優(yōu)雅的Web API接口。

想必微軟那些設(shè)計(jì)AJAX架構(gòu)的工程師看到這個(gè)甘露模型時(shí)，肯定后悔沒(méi)有早點(diǎn)把AJAX部門從美國(guó)搬到咱中國(guó)的觀音廟來(lái)，錯(cuò)過(guò)了觀音菩薩的點(diǎn)化。

??? 當(dāng)然，我們也只能是在代碼的示例中，把Bill Gates當(dāng)作對(duì)象玩玩，真要讓他放棄上帝轉(zhuǎn)而皈依我佛肯定是不容易的，機(jī)緣未到啊！如果哪天你在微軟新出的AJAX類庫(kù)中看到這種甘露模型，那才是真正的緣分！

廣告時(shí)間：《悟透JavaScript》一書(shū)，共分三部分，
??? ?? 第一部分 JavaScript真經(jīng) (博客原文擴(kuò)編)
??? ?? 第二部分手談JavaScript （講述JavaScript操縱DOM）
??? ?? 第三部分點(diǎn)化AJAX （AJAX思維升華）

就算你不看，也可以給孩子當(dāng)故事書(shū)。
如果你還沒(méi)孩子，就當(dāng)給自己買本幽默的漫畫(huà)書(shū)。

原創(chuàng)槍手：李戰(zhàn)(leadzen)
幕后指使：電子工業(yè)出版社-博文視點(diǎn)公司
原文：http://www.cnblogs.com/leadzen/archive/2008/06/04/1213090.html
【轉(zhuǎn)載請(qǐng)注明作者及出處】

轉(zhuǎn)載于:https://www.cnblogs.com/net205/articles/1535265.html

總結(jié)

以上是生活随笔為你收集整理的悟透JavaScript[转]的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：心海的PHP教程1
下一篇： gradle idea java ssm