悟透JavaScript （強烈推薦）

引子

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

數據天生就是文靜的，總想保持本身固有的本色；而代碼卻天生活潑，總想改變這個世界。 

你看，數據代碼間的關係與物質能量間的關係有着驚人的類似。數據也是有慣性的，若是沒有代碼來施加外力，她總保持本身原來的狀態。而代碼就象能量，他存在的惟一目的，就是要努力改變數據原來的狀態。在代碼改變數據的同時，也會由於數據的抗拒而反過來影響或改變代碼原有的趨勢。甚至在某些狀況下，數據能夠轉變爲代碼，而代碼卻又有可能被轉變爲數據，或許還存在一個相似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/>標籤將其分紅這樣的兩塊： 

<script> 
function myfunc () 
{ 
alert("hello"); 
}; 
myfunc(); //這裏調用myfunc，輸出hello 
</script> 

<script> 
function myfunc () 
{ 
alert("yeah"); 
}; 
myfunc(); //這裏調用myfunc，輸出yeah 
</script>

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

一段代碼中的定義式函數語句會優先執行，這彷佛有點象靜態語言的編譯概念。因此，這一特徵也被有些人稱爲：JavaScript的「預編譯」。 

大多數狀況下，咱們也沒有必要去糾纏這些細節問題。只要你記住一點：JavaScript裏的代碼也是一種數據，一樣能夠被任意賦值和修改的，而它的值就是代碼的邏輯。只是，與通常數據不一樣的是，函數是能夠被調用執行的。 

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

奇妙的對象  

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

任何一個函數均可覺得其動態地添加或去除屬性，這些屬性能夠是簡單類型，能夠是對象，也能夠是其餘函數。也就是說，函數具備對象的所有特徵，你徹底能夠把函數當對象來用。其實，函數就是對象，只不過比通常的對象多了一個括號「()」操做符，這個操做符用來執行函數的邏輯。即，函數自己還能夠被調用，通常對象卻不能夠被調用，除此以外徹底相同。請看下面的代碼： 

function Sing() 
{ 
with(arguments.callee) 
alert(author + "：" + poem); 
}; 
Sing.author = "李白"; 
Sing.poem = "漢家秦地月，流影照明妃。一上玉關道，天涯去不歸  "; 
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構造函數，這就是至關於調用基類的構造函數。第2一、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;  }