當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

悟透JavaScript[转]

發布時間：2024/1/1 javascript 29 豆豆

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

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

引子

??? 編程世界里只存在兩種基本元素，一個是數據，一個是代碼。編程世界就是在數據和代碼千絲萬縷的糾纏中呈現出無限的生機和活力。

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

??? 不過，由于不同程序員有著不同的世界觀，這些數據和代碼看起來也就不盡相同。于是，不同世界觀的程序員們運用各自的方法論，推動著編程世界的進化和發展。
?
??? 眾所周知，當今最流行的編程思想莫過于面向對象編程的思想。為什么面向對象的思想能迅速風靡編程世界呢？因為面向對象的思想首次把數據和代碼結合成統一體，并以一個簡單的對象概念呈現給編程者。這一下子就將原來那些雜亂的算法與子程序，以及糾纏不清的復雜數據結構，劃分成清晰而有序的對象結構，從而理清了數據與代碼在我們心中那團亂麻般的結。我們又可以有一個更清晰的思維，在另一個思想高度上去探索更加浩瀚的編程世界了。

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

??? 后來，慧能果然不負師父厚望，在南方開創了禪宗另一個廣闊的天空。而慧能當年帶走的軟件真經中就有一本是《JavaScript真經》！

回歸簡單

??? 要理解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/>標簽將其分成這樣的兩塊：

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

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

??? 大多數情況下，我們也沒有必要去糾纏這些細節問題。只要你記住一點：JavaScript里的代碼也是一種數據，同樣可以被任意賦值和修改的，而它的值就是代碼的邏輯。只是，與一般數據不同的是，函數是可以被調用執行的。

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

奇妙的對象

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

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

????function?Sing()
????{
????????with(arguments.callee)
??????????alert(author?+?"："?+?poem);
????};
????Sing.author?=?"李白";
????Sing.poem?=?"漢家秦地月，流影照明妃。一上玉關道，天涯去不歸";
????Sing();
????Sing.author?=?"李戰";
????Sing.poem?=?"日出漢家天，月落陰山前。女兒琵琶怨，已唱三千年";
????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也將最終消失或演化成其他形式的語言。但不管編程語言如何發展和演化，編程世界永遠都會在“數據”與“代碼”這千絲萬縷的糾纏中保持著無限的生機。只要我們能看透這一點，我們就能很容易地學習和理解軟件世界的各種新事物。不管是已熟悉的過程式編程，還是正在發展的函數式編程，以及未來量子糾纏態的大規模并行式編程，我們都有足夠的法力來化解一切復雜的難題。

????佛最后淡淡地說：只要我們放下那些表面的“類”，放下那些對象的“自我”，就能達到一種“對象本無根，類型亦無形”的境界，從而將自我融入到整個宇宙的生命輪循環中。我們將沒有自我，也沒有自私的欲望，你就是我，我就是你，你中有我，我中有你。這時，我們再看這生機勃勃的編程世界時，我們的內心將自然生起無限的慈愛之心，這種慈愛之心不是虛偽而是真誠的。關愛他人就是關愛自己，就是關愛這世界中的一切。那么，我們的心是永遠快樂的，我們的程序是永遠快樂的，我們的類是永遠快樂的，我們的對象也是永遠快樂的。這就是編程的極樂！

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

????驀然回首時，唯見君拈花微笑...

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

繼：

注意：如果您尚未閱讀過原來那篇老文章《悟透JavaScript》，請先行閱讀該文，以了解上下文關系。

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

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

?? ?這種類的寫法已經和C#或Java的格式非常相似了。不過，其中調用基類的構造函數還需要用“Person.Create.call(this, name, age)”這樣的方式來表達。這需要用到基類的類名，并要用call這種特殊的方式來傳遞this指針。這和C#的base()以及Java的super()那樣的簡介調用方式比起來，還需要進一步美化。

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

?? ?為了實現這些美化工作，我們需要回顧一下new一個對象的實質。前面我們說過：
??? var anObj = new aClass();
?? ?相當于先創建一個空白對象anObj，然后將其作為this指針調用aClass()函數。其實，這個過程中還有一個關鍵步驟就是將aClass的prototype屬性，賦值給anObj內置的prototype屬性。盡管我們無法訪問到anObj內置的prototype屬性，但它卻為對象提供了可以調用的方法。

?? ?由于前例中的Class()語法甘露實際上是構造了一個原型，并將這個原型掛在了相應的原型鏈上。由于它返回的是一個對象而不是函數，因此由它定義出來的Person和Employee類也都只是對象而不是函數，無法用new Person()或new Employee()這樣的方式來創建對象。要創基于一個原型來創建對象，就需要借助New()語法甘露來中轉這個原型。

?? ?那么，如果我們讓Class()語法甘露返回一個函數而不是對象，不就可以用new Person()和new Employee()這種方式來創建對象了嗎？而且，我們可為這個返回函數創建一個繼承至相關原型鏈的原型對象，并設置到該函數的prototype屬性。這樣，我們用new方式創建這個類函數的對象時，就自然地繼承了該類的原型了。

?? ?那么，我們讓Class()語法甘露返回什么函數呢？因為Class()語法甘露返回的函數是用來創建對象的，當然應該返回該類的構造函數了，正好可以是類定義參數中的Create方法啊。這樣一來，我們也無需在New()語法甘露中間接調用Create構造函數了，事實上New()語法甘露可以完全扔掉了。

?? ?于是，我們就有了下面這個精簡甘露模型的例子：

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

??? 這個精簡甘露模型模擬出來的類更加自然和諧，而且比前面的甘露模型更加精簡。其中的Class()函數雖然很簡短，但卻是整個模型的關鍵：

?? ?Class()函數將最后一個參數當作類定義，如果有兩個參數，則第一個參數就表示繼承的基類。如果多于兩個參數，則第一個和最后一個之間的參數都可以用作類需要實現的接口聲明，保留給將來擴展甘露模型使用吧。

?? ?使用Class()函數來定義一個類，實際上就是為創建對象準備了一個構造函數，而該構造函數的prototype已經初始化為方法表，并可繼承上層類的方法表。這樣，當用new操作符創建一個該類對象時，也就很自然地將此構造函數的原型鏈傳遞給了新構造的對象。于是，就可以采用象“new Person("Bill Gates", 53)”這樣的語法來創建對象了。

?? ?類定義中名為Create的函數是特別對待的，因為這就是構造函數。如果沒有定義Create構造函數，Class()函數也會創建一個默認構造函數。事實上，這個構造函數就代表了類。除此之外，我們還為其定義了一個Base屬性，以方便追溯繼承關系。

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

?? ?不過，Class()函數中還是有個小問題，那就是不支持toString()方法的覆寫。也就是說，如果我們為一個類定義了自己的toString()方法，調用Class()函數來生成類時，toString()方法會丟失。

原來toString()方法被JavaScript規定為不可枚舉的內置方法。除此之外還有還有toLocaleString(), valueOf(), hasOwnProperty(), isPrototypeOf(), propertyIsEnumerable()等，都是不能枚舉的內置方法。這樣在Class()函數中的那個for(…in…)語句就不能遍歷到這些屬性，導致問題的產生。

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

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

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

?? ?其實，要解決不能覆寫非枚舉屬性的問題也并非難事。既然這些屬性是特殊的，我們就可以對其進行特殊處理。我們可以在復制完可枚舉的屬性之后，加上類似下面的特殊判斷處理語句：

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

?? ?因為，如果覆寫了toString方法，那么它就肯定不等于原生的toString方法，這時就可復制toString方法。當然，我們也可以不通過比較，而是用hasOwnProperty來判斷是否覆寫了toString方法：

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

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

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

?? ?其實，base()方法之所以要使用自身的caller屬性，就是為了確定當前構造函數的層次，從而可以知道該調用更上層的構造函數。有沒有別的辦法來知道是那層構造函數調用了base()方法呢？殘酷的事實告訴我們，除了函數自身的caller屬性，沒有辦法知道是誰調用了自己。

?? ?既然改變不了別人，那就改變自己！我們為什么就不能在運行中改變base()自身呢？

?? ?事實上，第一層構造函數調用this.base()時，我們是可以過this.Type屬性知道地一層構造函數的，而this.Type.Base就是第二層構造函數。只是，第二層構造函數又會調用this.base()，其本來是想調用第三層的構造函數，但再次進入base()函數時，就無法知曉構造函數的層次了。

如果我們在第一層構造函數調用進入this.base()時，先改變this.base本身，讓其在下次被調用時能掉到第三層構造函數。完成這個變身動作之后再調第二層構造函數，而第二層構造函數再調用this.base()時就能調用到第三層構造函數了。這樣，只要我們在每次的base()調用中都完成一個自我的變身動作，就可以按正確的順序完成對構造函數的調用。這是多么有趣的調用方式啊！

?? ?于是，我們可以將原來的base()函數改寫成下面的形式：

????object.prototype.base?=?function()??//調用基類構造函數
????{
????????var?Base?=?this.Type.Base;??//獲取當前對象的基類??
????????if(!Base.Base)??//若基類已沒有基類
????????????Base.apply(this,?arguments)?????//則直接調用基類構造函數
????????else????//若基類還有基類?????????
????????{
????????????this.base?=?MakeBase(Base);?????//先覆寫this.base
????????????Base.apply(this,?arguments);????//再調用基類構造函數
????????????delete?this.base;???????????????//刪除覆寫的base屬性
????????};
????????function?MakeBase(Type)?//包裝基類構造函數
????????{
????????????var?Base?=?Type.Base;
????????????if(!Base.Base)?return?Base;?//基類已無基類，就無需包裝
????????????return?function()???//包裝為引用臨時變量Base的閉包函數
????????????{
????????????????this.base?=?MakeBase(Base);?????//先覆寫this.base
????????????????Base.apply(this,?arguments);????//再調用基類構造函數
????????????};
????????};
????};

?? ?原來的base()函數只有兩行代碼，而新的base()函數卻又十幾行代碼。看來為了支持Opera瀏覽器確實也付出了代價，好在這些代碼只有十來行，代價并不是太大。當然，如果無須支持Opera瀏覽器，也就不必用這個base()函數了。

?? ?在這個新的base()函數中，對this.base的覆寫實際上只是在this對象身上創建了一個臨時的base方法。這個臨時方法暫時遮住了object.prototype.base方法，而object.prototype.base方法卻一直存在。而每次對this.base的變身操作，都是針對這個臨時的方法的。當所有層次構造函數的調用都完成之后，即可刪除this對象的這個臨時base方法。

?? ?其中的MakeBase()函數非常有意思，如果基類還有基類，它就返回一個閉包函數。下次this.base()被構造函數調用時，即調用的是這個閉包函數。但這個閉包函數又可能會調用MakeBase()形成另一個閉包函數，直到基類再無基類。

?? ?如果說這是遞歸調用呢？卻并非那種函數自身對自身的直接或間接調用，而是調用一個函數卻返回另一個函數，再調用返回的函數又會在其中產生新的返回函數。如果說是函數式編程中的高階函數調用呢？這函數的嵌套階數卻是與類層次相關的不確定數，而每一個階梯都有新生成的函數。

這可真是閉包中嵌套著閉包，貌似遞歸卻又不是遞歸，是高階函數卻又高不可測。一旦整個對象創建完成，用過的內存狀態都釋放得干干凈凈，只得到一塵不染的新建對象。JavaScript玩到這樣的境界，方顯觀音大士的法力！

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

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

?? ?當今的JavaScript世界里，各式各樣的AJAX類庫不斷出現。同時，在開放Web API的大潮中，AJAX類庫作為Web API最重要的形式，起著舉足輕重的作用。這些AJAX類庫是否方便引用，是否易于擴展，是否書寫優雅，都成了衡量Web API質量的重要指標。

?? ?甘露模型基于JavaScript原型機制，用及其簡單的Class()函數，構造了一個非常優雅的面向對象的類機制。事實上，我們完全可以在這個甘露模型的基礎上打造相關的的AJAX類庫，為開發人員提供簡潔而優雅的Web API接口。

想必微軟那些設計AJAX架構的工程師看到這個甘露模型時，肯定后悔沒有早點把AJAX部門從美國搬到咱中國的觀音廟來，錯過了觀音菩薩的點化。

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

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

就算你不看，也可以給孩子當故事書。
如果你還沒孩子，就當給自己買本幽默的漫畫書。

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

轉載于:https://www.cnblogs.com/net205/articles/1535265.html

總結

以上是生活随笔為你收集整理的悟透JavaScript[转]的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：心海的PHP教程1
下一篇： Visual Studio Code+d