javascript
悟透JavaScript （强烈推荐）
2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>
引子
編程世界里只存在兩種基本元素，一個是數(shù)據(jù)，一個是代碼。編程世界就是在數(shù)據(jù)和代碼千絲萬縷的糾纏中呈現(xiàn)出無限的生機(jī)和活力。
數(shù)據(jù)天生就是文靜的，總想保持自己固有的本色；而代碼卻天生活潑，總想改變這個世界。
你看，數(shù)據(jù)代碼間的關(guān)系與物質(zhì)能量間的關(guān)系有著驚人的相似。數(shù)據(jù)也是有慣性的，如果沒有代碼來施加外力，她總保持自己原來的狀態(tài)。而代碼就象能量，他存在的唯一目的，就是要努力改變數(shù)據(jù)原來的狀態(tài)。在代碼改變數(shù)據(jù)的同時，也會因為數(shù)據(jù)的抗拒而反過來影響或改變代碼原有的趨勢。甚至在某些情況下，數(shù)據(jù)可以轉(zhuǎn)變?yōu)榇a，而代碼卻又有可能被轉(zhuǎn)變?yōu)閿?shù)據(jù)，或許還存在一個類似E=MC2形式的數(shù)碼轉(zhuǎn)換方程呢。然而，就是在數(shù)據(jù)和代碼間這種即矛盾又統(tǒng)一的運(yùn)轉(zhuǎn)中，總能體現(xiàn)出計算機(jī)世界的規(guī)律，這些規(guī)律正是我們編寫的程序邏輯。
不過，由于不同程序員有著不同的世界觀，這些數(shù)據(jù)和代碼看起來也就不盡相同。于是，不同世界觀的程序員們運(yùn)用各自的方法論，推動著編程世界的進(jìn)化和發(fā)展。
眾所周知，當(dāng)今最流行的編程思想莫過于面向?qū)ο缶幊痰乃枷搿槭裁疵嫦驅(qū)ο蟮乃枷肽苎杆亠L(fēng)靡編程世界呢？因為面向?qū)ο蟮乃枷胧状伟褦?shù)據(jù)和代碼結(jié)合成統(tǒng)一體，并以一個簡單的對象概念呈現(xiàn)給編程者。這一下子就將原來那些雜亂的算法與子程序，以及糾纏不清的復(fù)雜數(shù)據(jù)結(jié)構(gòu)，劃分成清晰而有序的對象結(jié)構(gòu)，從而理清了數(shù)據(jù)與代碼在我們心中那團(tuán)亂麻般的結(jié)。我們又可以有一個更清晰的思維，在另一個思想高度上去探索更加浩瀚的編程世界了。
在五祖弘忍講授完《對象真經(jīng)》之后的一天，他對眾弟子們說：“經(jīng)已講完，想必爾等應(yīng)該有所感悟，請各自寫個偈子來看”。大弟子神秀是被大家公認(rèn)為悟性最高的師兄，他的偈子寫道：“身是對象樹，心如類般明。朝朝勤拂拭，莫讓惹塵埃！”。此偈一出，立即引起師兄弟們的轟動，大家都說寫得太好了。只有火頭僧慧能看后，輕輕地嘆了口氣，又隨手在墻上寫道：“對象本無根，類型亦無形。本來無一物，何處惹塵埃？”。然后搖了搖頭，揚(yáng)長而去。大家看了慧能的偈子都說：“寫的什么亂七八糟的啊，看不懂”。師父弘忍看了神秀的詩偈也點頭稱贊，再看慧能的詩偈之后默然搖頭。就在當(dāng)天夜里，弘忍卻悄悄把慧能叫到自己的禪房，將珍藏多年的軟件真經(jīng)傳授于他，然后讓他趁著月色連夜逃走…
后來，慧能果然不負(fù)師父厚望，在南方開創(chuàng)了禪宗另一個廣闊的天空。而慧能當(dāng)年帶走的軟件真經(jīng)中就有一本是《JavaScript真經(jīng)》！
回歸簡單
要理解JavaScript，你得首先放下對象和類的概念，回到數(shù)據(jù)和代碼的本原。前面說過，編程世界只有數(shù)據(jù)和代碼兩種基本元素，而這兩種元素又有著糾纏不清的關(guān)系。JavaScript就是把數(shù)據(jù)和代碼都簡化到最原始的程度。
JavaScript中的數(shù)據(jù)很簡潔的。簡單數(shù)據(jù)只有 undefined, null, boolean, number和string這五種，而復(fù)雜數(shù)據(jù)只有一種，即object。這就好比中國古典的樸素唯物思想，把世界最基本的元素歸為金木水火土，其他復(fù)雜的物質(zhì)都是由這五種基本元素組成。
JavaScript中的代碼只體現(xiàn)為一種形式，就是function。
注意：以上單詞都是小寫的，不要和Number, String, Object, Function等JavaScript內(nèi)置函數(shù)混淆了。要知道，JavaScript語言是區(qū)分大小寫的呀!
任何一個JavaScript的標(biāo)識、常量、變量和參數(shù)都只是unfined, null, bool, number, string, object 和 function類型中的一種，也就typeof返回值表明的類型。除此之外沒有其他類型了。
先說說簡單數(shù)據(jù)類型吧。
undefined: 代表一切未知的事物，啥都沒有，無法想象，代碼也就更無法去處理了。
注意：typeof(undefined) 返回也是 undefined。
可以將undefined賦值給任何變量或?qū)傩?#xff0c;但并不意味了清除了該變量，反而會因此多了一個屬性。
null: 有那么一個概念，但沒有東西。無中似有，有中還無。雖難以想象，但已經(jīng)可以用代碼來處理了。
注意：typeof(null)返回object，但null并非object，具有null值的變量也并非object。
boolean: 是就是，非就非，沒有疑義。對就對，錯就錯，絕對明確。既能被代碼處理，也可以控制代碼的流程。
number: 線性的事物，大小和次序分明，多而不亂。便于代碼進(jìn)行批量處理，也控制代碼的迭代和循環(huán)等。
注意：typeof(NaN)和typeof(Infinity)都返回number 。
NaN參與任何數(shù)值計算的結(jié)構(gòu)都是NaN，而且 NaN != NaN 。
Infinity / Infinity = NaN 。
string: 面向人類的理性事物，而不是機(jī)器信號。人機(jī)信息溝通，代碼據(jù)此理解人的意圖等等，都靠它了。
簡單類型都不是對象，JavaScript沒有將對象化的能力賦予這些簡單類型。直接被賦予簡單類型常量值的標(biāo)識符、變量和參數(shù)都不是一個對象。
所謂“對象化”，就是可以將數(shù)據(jù)和代碼組織成復(fù)雜結(jié)構(gòu)的能力。JavaScript中只有object類型和function類型提供了對象化的能力。
沒有類
object就是對象的類型。在JavaScript中不管多么復(fù)雜的數(shù)據(jù)和代碼，都可以組織成object形式的對象。
但JavaScript卻沒有 “類”的概念！
對于許多面向?qū)ο蟮某绦騿T來說，這恐怕是JavaScript中最難以理解的地方。是啊，幾乎任何講面向?qū)ο蟮臅?#xff0c;第一個要講的就是“類”的概念，這可是面向?qū)ο蟮闹е＿@突然沒有了“類”，我們就象一下子沒了精神支柱，感到六神無主。看來，要放下對象和類，達(dá)到“對象本無根，類型亦無形”的境界確實是件不容易的事情啊。
這樣，我們先來看一段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程序一開始產(chǎn)生了一個生命對象life，life誕生時只是一個光溜溜的對象，沒有任何屬性和方法。在第一次生命過程中，它有了一個身體屬性body，并有了一個say方法，看起來是一個“卵細(xì)胞”。在第二次生命過程中，它又長出了“尾巴”和“腮”，有了tail和gill屬性，顯然它是一個“蝌蚪”。在第三次生命過程中，它的tail和gill屬性消失了，但又長出了“四條腿”和“肺”，有了legs和lung屬性，從而最終變成了“青蛙”。如果，你的想像力豐富的話，或許還能讓它變成英俊的“王子”，娶個美麗的“公主”什么的。不過，在看完這段程序之后，請你思考一個問題：
我們一定需要類嗎？
還記得兒時那個“小蝌蚪找媽媽”的童話嗎？也許就在昨天晚，你的孩子剛好是在這個美麗的童話中進(jìn)入夢鄉(xiāng)的吧。可愛的小蝌蚪也就是在其自身類型不斷演化過程中，逐漸變成了和媽媽一樣的“類”，從而找到了自己的媽媽。這個童話故事中蘊(yùn)含的編程哲理就是：對象的“類”是從無到有，又不斷演化，最終又消失于無形之中的…
“類”，的確可以幫助我們理解復(fù)雜的現(xiàn)實世界，這紛亂的現(xiàn)實世界也的確需要進(jìn)行分類。但如果我們的思想被“類”束縛住了，“類”也就變成了“累”。想象一下，如果一個生命對象開始的時就被規(guī)定了固定的“類”，那么它還能演化嗎？蝌蚪還能變成青蛙嗎？還可以給孩子們講小蝌蚪找媽媽的故事嗎？
所以，JavaScript中沒有“類”，類已化于無形，與對象融為一體。正是由于放下了“類”這個概念，JavaScript的對象才有了其他編程語言所沒有的活力。
如果，此時你的內(nèi)心深處開始有所感悟，那么你已經(jīng)逐漸開始理解JavaScript的禪機(jī)了。
函數(shù)的魔力
接下來，我們再討論一下JavaScript函數(shù)的魔力吧。
JavaScript的代碼就只有function一種形式，function就是函數(shù)的類型。也許其他編程語言還有procedure或 method等代碼概念，但在JavaScript里只有function一種形式。當(dāng)我們寫下一個函數(shù)的時候，只不過是建立了一個function類型的實體而已。請看下面的程序：
function myfunc()
{
alert(“hello”);
};
alert(typeof(myfunc));
這個代碼運(yùn)行之后可以看到typeof(myfunc)返回的是function。以上的函數(shù)寫法我們稱之為“定義式”的，如果我們將其改寫成下面的“變量式”的，就更容易理解了：
var myfunc = function ()
{
alert(“hello”);
};
alert(typeof(myfunc));
這里明確定義了一個變量myfunc，它的初始值被賦予了一個function的實體。因此，typeof(myfunc)返回的也是function。其實，這兩種函數(shù)的寫法是等價的，除了一點細(xì)微差別，其內(nèi)部實現(xiàn)完全相同。也就是說，我們寫的這些JavaScript函數(shù)只是一個命了名的變量而已，其變量類型即為function，變量的值就是我們編寫的函數(shù)代碼體。
聰明的你或許立即會進(jìn)一步的追問：既然函數(shù)只是變量，那么變量就可以被隨意賦值并用到任意地方啰？
我們來看看下面的代碼：
var myfunc = function ()
{
alert(“hello”);
};
myfunc(); //第一次調(diào)用myfunc，輸出hello
myfunc = function ()
{
alert(“yeah”);
};
myfunc(); //第二次調(diào)用myfunc，將輸出yeah
這個程序運(yùn)行的結(jié)果告訴我們：答案是肯定的！在第一次調(diào)用函數(shù)之后，函數(shù)變量又被賦予了新的函數(shù)代碼體，使得第二次調(diào)用該函數(shù)時，出現(xiàn)了不同的輸出。
好了，我們又來把上面的代碼改成第一種定義式的函數(shù)形式：
function myfunc ()
{
alert(“hello”);
};
myfunc(); //這里調(diào)用myfunc，輸出yeah而不是hello
function myfunc ()
{
alert(“yeah”);
};
myfunc(); //這里調(diào)用myfunc，當(dāng)然輸出yeah
按理說，兩個簽名完全相同的函數(shù)，在其他編程語言中應(yīng)該是非法的。但在JavaScript中，這沒錯。不過，程序運(yùn)行之后卻發(fā)現(xiàn)一個奇怪的現(xiàn)象：兩次調(diào)用都只是最后那個函數(shù)里輸出的值！顯然第一個函數(shù)沒有起到任何作用。這又是為什么呢？
原來，JavaScript執(zhí)行引擎并非一行一行地分析和執(zhí)行程序，而是一段一段地分析執(zhí)行的。而且，在同一段程序的分析執(zhí)行中，定義式的函數(shù)語句會被提取出來優(yōu)先執(zhí)行。函數(shù)定義執(zhí)行完之后，才會按順序執(zhí)行其他語句代碼。也就是說，在第一次調(diào)用myfunc之前，第一個函數(shù)語句定義的代碼邏輯，已被第二個函數(shù)定義語句覆蓋了。所以，兩次都調(diào)用都是執(zhí)行最后一個函數(shù)邏輯了。
如果把這個JavaScript代碼分成兩段，例如將它們寫在一個html中，并用<script/>標(biāo)簽將其分成這樣的兩塊：
function myfunc ()
{
alert(“hello”);
};
myfunc(); //這里調(diào)用myfunc，輸出hello
<script>
function myfunc ()
{
alert(“yeah”);
};
myfunc(); //這里調(diào)用myfunc，輸出yeah
</script>
這時，輸出才是各自按順序來的，也證明了JavaScript的確是一段段地執(zhí)行的。
一段代碼中的定義式函數(shù)語句會優(yōu)先執(zhí)行，這似乎有點象靜態(tài)語言的編譯概念。所以，這一特征也被有些人稱為：JavaScript的“預(yù)編譯”。
大多數(shù)情況下，我們也沒有必要去糾纏這些細(xì)節(jié)問題。只要你記住一點：JavaScript里的代碼也是一種數(shù)據(jù)，同樣可以被任意賦值和修改的，而它的值就是代碼的邏輯。只是，與一般數(shù)據(jù)不同的是，函數(shù)是可以被調(diào)用執(zhí)行的。
不過，如果JavaScript函數(shù)僅僅只有這點道行的話，這與C++的函數(shù)指針，DELPHI的方法指針，C#的委托相比，又有啥稀奇嘛！然而，JavaScript函數(shù)的神奇之處還體現(xiàn)在另外兩個方面：一是函數(shù)function類型本身也具有對象化的能力，二是函數(shù)function與對象 object超然的結(jié)合能力。
奇妙的對象
先來說說函數(shù)的對象化能力。
任何一個函數(shù)都可以為其動態(tài)地添加或去除屬性，這些屬性可以是簡單類型，可以是對象，也可以是其他函數(shù)。也就是說，函數(shù)具有對象的全部特征，你完全可以把函數(shù)當(dāng)對象來用。其實，函數(shù)就是對象，只不過比一般的對象多了一個括號“()”操作符，這個操作符用來執(zhí)行函數(shù)的邏輯。即，函數(shù)本身還可以被調(diào)用，一般對象卻不可以被調(diào)用，除此之外完全相同。請看下面的代碼：
在這段代碼中，Sing函數(shù)被定義后，又給Sing函數(shù)動態(tài)地增加了author和poem屬性。將author和poem屬性設(shè)為不同的作者和詩句，在調(diào)用Sing()時就能顯示出不同的結(jié)果。這個示例用一種詩情畫意的方式，讓我們理解了JavaScript函數(shù)就是對象的本質(zhì)，也感受到了JavaScript語言的優(yōu)美。
好了，以上的講述，我們應(yīng)該算理解了function類型的東西都是和object類型一樣的東西，這種東西被我們稱為“對象”。我們的確可以這樣去看待這些“對象”，因為它們既有“屬性”也有“方法”嘛。但下面的代碼又會讓我們產(chǎn)生新的疑惑：
var anObject = {}; //一個對象
anObject.aProperty = “Property of object”; //對象的一個屬性
anObject.aMethod = function(){alert(“Method of object”)}; //對象的一個方法
//主要看下面：
alert(anObject["aProperty"]); //可以將對象當(dāng)數(shù)組以屬性名作為下標(biāo)來訪問屬性
anObject["aMethod"](); //可以將對象當(dāng)數(shù)組以方法名作為下標(biāo)來調(diào)用方法
for( var s in anObject) //遍歷對象的所有屬性和方法進(jìn)行迭代化處理
alert(s + ” is a ” + typeof(anObject[s]));
同樣對于function類型的對象也是一樣：
var aFunction = function() {}; //一個函數(shù)
aFunction.aProperty = “Property of function”; //函數(shù)的一個屬性
aFunction.aMethod = function(){alert(“Method of function”)}; //函數(shù)的一個方法
//主要看下面：
alert(aFunction["aProperty"]); //可以將函數(shù)當(dāng)數(shù)組以屬性名作為下標(biāo)來訪問屬性
aFunction["aMethod"](); //可以將函數(shù)當(dāng)數(shù)組以方法名作為下標(biāo)來調(diào)用方法
for( var s in aFunction) //遍歷函數(shù)的所有屬性和方法進(jìn)行迭代化處理
alert(s + ” is a ” + typeof(aFunction[s]));
是的，對象和函數(shù)可以象數(shù)組一樣，用屬性名或方法名作為下標(biāo)來訪問并處理。那么，它到底應(yīng)該算是數(shù)組呢，還是算對象？
我們知道，數(shù)組應(yīng)該算是線性數(shù)據(jù)結(jié)構(gòu)，線性數(shù)據(jù)結(jié)構(gòu)一般有一定的規(guī)律，適合進(jìn)行統(tǒng)一的批量迭代操作等，有點像波。而對象是離散數(shù)據(jù)結(jié)構(gòu)，適合描述分散的和個性化的東西，有點像粒子。因此，我們也可以這樣問：JavaScript里的對象到底是波還是粒子？
如果存在對象量子論，那么答案一定是：波粒二象性！
因此，JavaScript里的函數(shù)和對象既有對象的特征也有數(shù)組的特征。這里的數(shù)組被稱為“字典”，一種可以任意伸縮的名稱值對兒的集合。其實， object和function的內(nèi)部實現(xiàn)就是一個字典結(jié)構(gòu)，但這種字典結(jié)構(gòu)卻通過嚴(yán)謹(jǐn)而精巧的語法表現(xiàn)出了豐富的外觀。正如量子力學(xué)在一些地方用粒子來解釋和處理問題，而在另一些地方卻用波來解釋和處理問題。你也可以在需要的時候，自由選擇用對象還是數(shù)組來解釋和處理問題。只要善于把握J(rèn)avaScript的這些奇妙特性，就可以編寫出很多簡潔而強(qiáng)大的代碼來。
放下對象
我們再來看看function與object的超然結(jié)合吧。
在面向?qū)ο蟮木幊淌澜缋?#xff0c;數(shù)據(jù)與代碼的有機(jī)結(jié)合就構(gòu)成了對象的概念。自從有了對象，編程世界就被劃分成兩部分，一個是對象內(nèi)的世界，一個是對象外的世界。對象天生具有自私的一面，外面的世界未經(jīng)允許是不可訪問對象內(nèi)部的。對象也有大方的一面，它對外提供屬性和方法，也為他人服務(wù)。不過，在這里我們要談到一個有趣的問題，就是“對象的自我意識”。
什么？沒聽錯吧？對象有自我意識？
可能對許多程序員來說，這的確是第一次聽說。不過，請君看看C++、C#和Java的this，DELPHI的self，還有VB的me，或許你會恍然大悟！當(dāng)然，也可能只是說句“不過如此”而已。
然而，就在對象將世界劃分為內(nèi)外兩部分的同時，對象的“自我”也就隨之產(chǎn)生。“自我意識”是生命的最基本特征！正是由于對象這種強(qiáng)大的生命力，才使得編程世界充滿無限的生機(jī)和活力。
但對象的“自我意識”在帶給我們快樂的同時也帶來了痛苦和煩惱。我們給對象賦予了太多欲望，總希望它們能做更多的事情。然而，對象的自私使得它們互相爭搶系統(tǒng)資源，對象的自負(fù)讓對象變得復(fù)雜和臃腫，對象的自欺也往往帶來揮之不去的錯誤和異常。我們?yōu)槭裁磿羞@么多的痛苦和煩惱呢？
為此，有一個人，在對象樹下，整整想了九九八十一天，終于悟出了生命的痛苦來自于欲望，但究其欲望的根源是來自于自我意識。于是他放下了“自我”，在對象樹下成了佛，從此他開始普度眾生，傳播真經(jīng)。他的名字就叫釋迦摩尼，而《JavaScript真經(jīng)》正是他所傳經(jīng)書中的一本。
JavaScript中也有this，但這個this卻與C++、C#或Java等語言的this不同。一般編程語言的this就是對象自己，而 JavaScript的this卻并不一定！this可能是我，也可能是你，可能是他，反正是我中有你，你中有我，這就不能用原來的那個“自我”來理解 JavaScript這個this的含義了。為此，我們必須首先放下原來對象的那個“自我”。
我們來看下面的代碼：
function WhoAmI() //定義一個函數(shù)WhoAmI
{
alert(“I’m ” + this.name + ” of ” + typeof(this));
};
WhoAmI(); //此時是this當(dāng)前這段代碼的全局對象，在瀏覽器中就是window對象，其name屬性為空字符串。輸出：I’m of object
var BillGates = {name: “Bill Gates”};
BillGates.WhoAmI = WhoAmI; //將函數(shù)WhoAmI作為BillGates的方法。
BillGates.WhoAmI(); //此時的this是BillGates。輸出：I’m Bill Gates of object
var SteveJobs = {name: “Steve Jobs”};
SteveJobs.WhoAmI = WhoAmI; //將函數(shù)WhoAmI作為SteveJobs的方法。
SteveJobs.WhoAmI(); //此時的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(); //此時的this是WhoAmI函數(shù)自己。輸出：I’m WhoAmI of function
({name: “nobody”, WhoAmI: WhoAmI}).WhoAmI(); //臨時創(chuàng)建一個匿名對象并設(shè)置屬性后調(diào)用WhoAmI方法。輸出：I’m nobody of object
從上面的代碼可以看出，同一個函數(shù)可以從不同的角度來調(diào)用，this并不一定是函數(shù)本身所屬的對象。this只是在任意對象和function元素結(jié)合時的一個概念，是種結(jié)合比起一般對象語言的默認(rèn)結(jié)合更加靈活，顯得更加超然和灑脫。
在JavaScript函數(shù)中，你只能把this看成當(dāng)前要服務(wù)的“這個”對象。this是一個特殊的內(nèi)置參數(shù)，根據(jù)this參數(shù)，您可以訪問到“這個”對象的屬性和方法，但卻不能給this參數(shù)賦值。在一般對象語言中，方法體代碼中的this可以省略的，成員默認(rèn)都首先是“自己”的。但JavaScript卻不同，由于不存在“自我”，當(dāng)訪問“這個”對象時，this不可省略！
JavaScript提供了傳遞this參數(shù)的多種形式和手段，其中，象BillGates.WhoAmI()和SteveJobs.WhoAmI()這種形式，是傳遞this參數(shù)最正規(guī)的形式，此時的this就是函數(shù)所屬的對象本身。而大多數(shù)情況下，我們也幾乎很少去采用那些借花仙佛的調(diào)用形式。但只我們要明白JavaScript的這個“自我”與其他編程語言的“自我”是不同的，這是一個放下了的“自我”，這就是JavaScript特有的世界觀。
對象素描
已經(jīng)說了許多了許多話題了，但有一個很基本的問題我們忘了討論，那就是：怎樣建立對象？
在前面的示例中，我們已經(jīng)涉及到了對象的建立了。我們使用了一種被稱為JavaScript Object Notation(縮寫JSON)的形式，翻譯為中文就是“JavaScript對象表示法”。
JSON為創(chuàng)建對象提供了非常簡單的方法。例如，
創(chuàng)建一個沒有任何屬性的對象：
var o = {};
創(chuàng)建一個對象并設(shè)置屬性及初始值：
var person = {name: “Angel”, age: 18, married: false};
創(chuàng)建一個對象并設(shè)置屬性和方法：
var speaker = {text: “Hello World”, say: function(){alert(this.text)}};
創(chuàng)建一個更復(fù)雜的對象，嵌套其他對象和對象數(shù)組等：
var company =
{
name: “Microsoft”,
product: “softwares”,
chairman: {name: “Bill Gates”, age: 53, Married: true},
employees: [{name: "Angel", age: 26, Married: false}, {name: "Hanson", age: 32, Marred: true}],
readme: function() {document.write(this.name + ” product ” + this.product);}
};
JSON的形式就是用大括“{}”號包括起來的項目列表，每一個項目間并用逗號“,”分隔，而項目就是用冒號“:”分隔的屬性名和屬性值。這是典型的字典表示形式，也再次表明了 JavaScript里的對象就是字典結(jié)構(gòu)。不管多么復(fù)雜的對象，都可以被一句JSON代碼來創(chuàng)建并賦值。
其實，JSON就是JavaScript對象最好的序列化形式，它比XML更簡潔也更省空間。對象可以作為一個JSON形式的字符串，在網(wǎng)絡(luò)間自由傳遞和交換信息。而當(dāng)需要將這個JSON字符串變成一個JavaScript對象時，只需要使用eval函數(shù)這個強(qiáng)大的數(shù)碼轉(zhuǎn)換引擎，就立即能得到一個JavaScript內(nèi)存對象。正是由于JSON的這種簡單樸素的天生麗質(zhì)，才使得她在AJAX舞臺上成為璀璨奪目的明星。
JavaScript就是這樣，把面向?qū)ο竽切┛此茝?fù)雜的東西，用及其簡潔的形式表達(dá)出來。卸下對象浮華的濃妝，還對象一個眉目清晰！
構(gòu)造對象
好了，接下我們來討論一下對象的另一種創(chuàng)建方法。
除JSON外，在JavaScript中我們可以使用new操作符結(jié)合一個函數(shù)的形式來創(chuàng)建對象。例如：
function MyFunc() {}; //定義一個空函數(shù)
var anObj = new MyFunc(); //使用new操作符，借助MyFun函數(shù)，就創(chuàng)建了一個對象
JavaScript的這種創(chuàng)建對象的方式可真有意思，如何去理解這種寫法呢？
其實，可以把上面的代碼改寫成這種等價形式：
function MyFunc(){};
var anObj = {}; //創(chuàng)建一個對象
MyFunc.call(anObj); //將anObj對象作為this指針調(diào)用MyFunc函數(shù)
我們就可以這樣理解，JavaScript先用new操作符創(chuàng)建了一個對象，緊接著就將這個對象作為this參數(shù)調(diào)用了后面的函數(shù)。其實，JavaScript內(nèi)部就是這么做的，而且任何函數(shù)都可以被這樣調(diào)用！但從 “anObj = new MyFunc()” 這種形式，我們又看到一個熟悉的身影，C++和C#不就是這樣創(chuàng)建對象的嗎？原來，條條大路通靈山，殊途同歸啊！
君看到此處也許會想，我們?yōu)槭裁床豢梢园堰@個MyFunc當(dāng)作構(gòu)造函數(shù)呢？恭喜你，答對了！JavaScript也是這么想的！請看下面的代碼：
1 function Person(name) //帶參數(shù)的構(gòu)造函數(shù)
2 {
3 this.name = name; //將參數(shù)值賦給給this對象的屬性
4 this.SayHello = function() {alert(“Hello, I’m ” + this.name);}; //給this對象定義一個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è)置一個this的salary屬性
11 this.ShowMeTheMoney = function() {alert(this.name + ” $” + this.salary);}; //添加ShowMeTheMoney方法。
12 };
13
14 var BillGates = new Person(“Bill Gates”); //用Person構(gòu)造函數(shù)創(chuàng)建BillGates對象
15 var SteveJobs = new Employee(“Steve Jobs”, 1234); //用Empolyee構(gòu)造函數(shù)創(chuàng)建SteveJobs對象
16
17 BillGates.SayHello(); //顯示：I’m Bill Gates
18 SteveJobs.SayHello(); //顯示：I’m Steve Jobs
19 SteveJobs.ShowMeTheMoney(); //顯示：Steve Jobs $1234
20
21 alert(BillGates.constructor == Person); //顯示：true
22 alert(SteveJobs.constructor == Employee); //顯示：true
23
24 alert(BillGates.SayHello == SteveJobs.SayHello); //顯示：false
這段代碼表明，函數(shù)不但可以當(dāng)作構(gòu)造函數(shù)，而且還可以帶參數(shù)，還可以為對象添加成員和方法。其中的第9行，Employee構(gòu)造函數(shù)又將自己接收的this作為參數(shù)調(diào)用Person構(gòu)造函數(shù)，這就是相當(dāng)于調(diào)用基類的構(gòu)造函數(shù)。第21、22行還表明這樣一個意思：BillGates是由Person構(gòu)造的，而SteveJobs是由Employee構(gòu)造的。對象內(nèi)置的constructor屬性還指明了構(gòu)造對象所用的具體函數(shù)！
其實，如果你愿意把函數(shù)當(dāng)作“類”的話，她就是“類”，因為她本來就有“類”的那些特征。難道不是嗎？她生出的兒子各個都有相同的特征，而且構(gòu)造函數(shù)也與類同名嘛！
但要注意的是，用構(gòu)造函數(shù)操作this對象創(chuàng)建出來的每一個對象，不但具有各自的成員數(shù)據(jù)，而且還具有各自的方法數(shù)據(jù)。換句話說，方法的代碼體(體現(xiàn)函數(shù)邏輯的數(shù)據(jù))在每一個對象中都存在一個副本。盡管每一個代碼副本的邏輯是相同的，但對象們確實是各自保存了一份代碼體。上例中的最后一句說明了這一實事，這也解釋了JavaScript中的函數(shù)就是對象的概念。
同一類的對象各自有一份方法代碼顯然是一種浪費(fèi)。在傳統(tǒng)的對象語言中，方法函數(shù)并不象JavaScript那樣是個對象概念。即使也有象函數(shù)指針、方法指針或委托那樣的變化形式，但其實質(zhì)也是對同一份代碼的引用。一般的對象語言很難遇到這種情況。
不過，JavaScript語言有大的靈活性。我們可以先定義一份唯一的方法函數(shù)體，并在構(gòu)造this對象時使用這唯一的函數(shù)對象作為其方法，就能共享方法邏輯。例如：
function SayHello() //先定義一份SayHello函數(shù)代碼
{
alert(“Hello, I’m ” + this.name);
};
function Person(name) //帶參數(shù)的構(gòu)造函數(shù)
{
this.name = name; //將參數(shù)值賦給給this對象的屬性
this.SayHello = SayHello; //給this對象SayHello方法賦值為前面那份SayHello代碼。
};
var BillGates = new Person(“Bill Gates”); //創(chuàng)建BillGates對象
var SteveJobs = new Person(“Steve Jobs”); //創(chuàng)建SteveJobs對象
alert(BillGates.SayHello == SteveJobs.SayHello); //顯示：true
其中，最后一行的輸出結(jié)果表明兩個對象確實共享了一個函數(shù)對象。雖然，這段程序達(dá)到了共享了一份方法代碼的目的，但卻不怎么優(yōu)雅。因為，定義SayHello方法時反映不出其與Person類的關(guān)系。“優(yōu)雅”這個詞用來形容代碼，也不知道是誰先提出來的。不過，這個詞反映了程序員已經(jīng)從追求代碼的正確、高效、可靠和易讀等基礎(chǔ)上，向著追求代碼的美觀感覺和藝術(shù)境界的層次發(fā)展，程序人生又多了些浪漫色彩。
顯然，JavaScript早想到了這一問題，她的設(shè)計者們?yōu)榇颂峁┝艘粋€有趣的prototype概念。
初看原型
prototype源自法語，軟件界的標(biāo)準(zhǔn)翻譯為“原型”，代表事物的初始形態(tài)，也含有模型和樣板的意義。JavaScript中的prototype概念恰如其分地反映了這個詞的內(nèi)含，我們不能將其理解為C++的prototype那種預(yù)先聲明的概念。
JavaScript的所有function類型的對象都有一個prototype屬性。這個prototype屬性本身又是一個object類型的對象，因此我們也可以給這個prototype對象添加任意的屬性和方法。既然prototype是對象的“原型”，那么由該函數(shù)構(gòu)造出來的對象應(yīng)該都會具有這個“原型”的特性。事實上，在構(gòu)造函數(shù)的prototype上定義的所有屬性和方法，都是可以通過其構(gòu)造的對象直接訪問和調(diào)用的。也可以這么說，prototype提供了一群同類對象共享屬性和方法的機(jī)制。
我們先來看看下面的代碼：
function Person(name)
{
this.name = name; //設(shè)置對象屬性，每個對象各自一份屬性數(shù)據(jù)
};
Person.prototype.SayHello = function() //給Person函數(shù)的prototype添加SayHello方法。
{
alert(“Hello, I’m ” + this.name);
}
var BillGates = new Person(“Bill Gates”); //創(chuàng)建BillGates對象
var SteveJobs = new Person(“Steve Jobs”); //創(chuàng)建SteveJobs對象
BillGates.SayHello(); //通過BillGates對象直接調(diào)用到SayHello方法
SteveJobs.SayHello(); //通過SteveJobs對象直接調(diào)用到SayHello方法
alert(BillGates.SayHello == SteveJobs.SayHello); //因為兩個對象是共享prototype的SayHello，所以顯示：true
程序運(yùn)行的結(jié)果表明，構(gòu)造函數(shù)的prototype上定義的方法確實可以通過對象直接調(diào)用到，而且代碼是共享的。顯然，把方法設(shè)置到prototype的寫法顯得優(yōu)雅多了，盡管調(diào)用形式?jīng)]有變，但邏輯上卻體現(xiàn)了方法與類的關(guān)系，相對前面的寫法，更容易理解和組織代碼。
那么，對于多層次類型的構(gòu)造函數(shù)情況又如何呢？
我們再來看下面的代碼：
1 function Person(name) //基類構(gòu)造函數(shù)
2 {
3 this.name = name;
4 };
5
6 Person.prototype.SayHello = function() //給基類構(gòu)造函數(shù)的prototype添加方法
7 {
8 alert(“Hello, I’m ” + this.name);
9 };
10
11 function Employee(name, salary) //子類構(gòu)造函數(shù)
12 {
13 Person.call(this, name); //調(diào)用基類構(gòu)造函數(shù)
14 this.salary = salary;
15 };
16
17 Employee.prototype = new Person(); //建一個基類的對象作為子類原型的原型，這里很有意思
18
19 Employee.prototype.ShowMeTheMoney = function() //給子類添構(gòu)造函數(shù)的prototype添加方法
20 {
21 alert(this.name + ” $” + this.salary);
22 };
23
24 var BillGates = new Person(“Bill Gates”); //創(chuàng)建基類Person的BillGates對象
25 var SteveJobs = new Employee(“Steve Jobs”, 1234); //創(chuàng)建子類Employee的SteveJobs對象
26
27 BillGates.SayHello(); //通過對象直接調(diào)用到prototype的方法
28 SteveJobs.SayHello(); //通過子類對象直接調(diào)用基類prototype的方法，關(guān)注！
29 SteveJobs.ShowMeTheMoney(); //通過子類對象直接調(diào)用子類prototype的方法
30
31 alert(BillGates.SayHello == SteveJobs.SayHello); //顯示：true，表明prototype的方法是共享的
這段代碼的第17行，構(gòu)造了一個基類的對象，并將其設(shè)為子類構(gòu)造函數(shù)的prototype，這是很有意思的。這樣做的目的就是為了第28行，通過子類對象也可以直接調(diào)用基類prototype的方法。為什么可以這樣呢？
原來，在JavaScript中，prototype不但能讓對象共享自己財富，而且prototype還有尋根問祖的天性，從而使得先輩們的遺產(chǎn)可以代代相傳。當(dāng)從一個對象那里讀取屬性或調(diào)用方法時，如果該對象自身不存在這樣的屬性或方法，就會去自己關(guān)聯(lián)的prototype對象那里尋找；如果prototype沒有，又會去prototype自己關(guān)聯(lián)的前輩prototype那里尋找，直到找到或追溯過程結(jié)束為止。
在JavaScript內(nèi)部，對象的屬性和方法追溯機(jī)制是通過所謂的prototype鏈來實現(xiàn)的。當(dāng)用new操作符構(gòu)造對象時，也會同時將構(gòu)造函數(shù)的prototype對象指派給新創(chuàng)建的對象，成為該對象內(nèi)置的原型對象。對象內(nèi)置的原型對象應(yīng)該是對外不可見的，盡管有些瀏覽器(如Firefox)可以讓我們訪問這個內(nèi)置原型對象，但并不建議這樣做。內(nèi)置的原型對象本身也是對象，也有自己關(guān)聯(lián)的原型對象，這樣就形成了所謂的原型鏈。
在原型鏈的最末端，就是Object構(gòu)造函數(shù)prototype屬性指向的那一個原型對象。這個原型對象是所有對象的最老祖先，這個老祖宗實現(xiàn)了諸如toString等所有對象天生就該具有的方法。其他內(nèi)置構(gòu)造函數(shù)，如Function, Boolean, String, Date和RegExp等的prototype都是從這個老祖宗傳承下來的，但他們各自又定義了自身的屬性和方法，從而他們的子孫就表現(xiàn)出各自宗族的那些特征。
這不就是“繼承”嗎？是的，這就是“繼承”，是JavaScript特有的“原型繼承”。
“原型繼承”是慈祥而又嚴(yán)厲的。原形對象將自己的屬性和方法無私地貢獻(xiàn)給孩子們使用，也并不強(qiáng)迫孩子們必須遵從，允許一些頑皮孩子按自己的興趣和愛好獨(dú)立行事。從這點上看，原型對象是一位慈祥的母親。然而，任何一個孩子雖然可以我行我素，但卻不能動原型對象既有的財產(chǎn)，因為那可能會影響到其他孩子的利益。從這一點上看，原型對象又象一位嚴(yán)厲的父親。我們來看看下面的代碼就可以理解這個意思了：
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() //實現(xiàn)了自己的SayHello方法，掩蓋了原型的SayHello方法
{
alert(“Hi, ” + this.name + ” like ” + this.company + “, ha ha ha “);
};
SteveJobs.SayHello(); //都是自己覆蓋的屬性和方法，輸出：Hi, Steve Jobs like Apple, ha ha ha
BillGates.SayHello(); //SteveJobs的覆蓋沒有影響原型對象，BillGates還是按老樣子輸出
對象可以掩蓋原型對象的那些屬性和方法，一個構(gòu)造函數(shù)原型對象也可以掩蓋上層構(gòu)造函數(shù)原型對象既有的屬性和方法。這種掩蓋其實只是在對象自己身上創(chuàng)建了新的屬性和方法，只不過這些屬性和方法與原型對象的那些同名而已。JavaScript就是用這簡單的掩蓋機(jī)制實現(xiàn)了對象的“多態(tài)”性，與靜態(tài)對象語言的虛函數(shù)和重載(override)概念不謀而合。
然而，比靜態(tài)對象語言更神奇的是，我們可以隨時給原型對象動態(tài)添加新的屬性和方法，從而動態(tài)地擴(kuò)展基類的功能特性。這在靜態(tài)對象語言中是很難想象的。我們來看下面的代碼：
function Person(name)
{
this.name = name;
};
Person.prototype.SayHello = function() //建立對象前定義的方法
{
alert(“Hello, I’m ” + this.name);
};
var BillGates = new Person(“Bill Gates”); //建立對象
BillGates.SayHello();
Person.prototype.Retire = function() //建立對象后再動態(tài)擴(kuò)展原型的方法
{
alert(“Poor ” + this.name + “, bye bye!”);
};
BillGates.Retire(); //動態(tài)擴(kuò)展的方法即可被先前建立的對象立即調(diào)用
阿彌佗佛，原型繼承竟然可以玩出有這樣的法術(shù)！
原型擴(kuò)展
想必君的悟性極高，可能你會這樣想：如果在JavaScript內(nèi)置的那些如Object和Function等函數(shù)的prototype上添加些新的方法和屬性，是不是就能擴(kuò)展JavaScript的功能呢？
那么，恭喜你，你得到了！
在AJAX技術(shù)迅猛發(fā)展的今天，許多成功的AJAX項目的JavaScript運(yùn)行庫都大量擴(kuò)展了內(nèi)置函數(shù)的prototype功能。比如微軟的ASP.NET AJAX，就給這些內(nèi)置函數(shù)及其prototype添加了大量的新特性，從而增強(qiáng)了JavaScript的功能。
我們來看一段摘自
MicrosoftAjax.debug.js中的代碼：
String.prototype.trim = function String$trim() {
if (arguments.length !== 0) throw Error.parameterCount();
return this.replace(/^\s+|\s+$/g, ”);
}
這段代碼就是給內(nèi)置String函數(shù)的prototype擴(kuò)展了一個trim方法，于是所有的String類對象都有了trim方法了。有了這個擴(kuò)展，今后要去除字符串兩段的空白，就不用再分別處理了，因為任何字符串都有了這個擴(kuò)展功能，只要調(diào)用即可，真的很方便。
當(dāng)然，幾乎很少有人去給Object的prototype添加方法，因為那會影響到所有的對象，除非在你的架構(gòu)中這種方法的確是所有對象都需要的。
前兩年，微軟在設(shè)計AJAX類庫的初期，用了一種被稱為“閉包”(
closure)的技術(shù)來模擬“類”。其大致模型如下：
function Person(firstName, lastName, age)
{
//私有變量：
var _firstName = firstName;
var _lastName = lastName;
//公共變量:
this.age = age;
//方法：
this.getName = function()
{
return(firstName + ” ” + lastName);
};
this.SayHello = function()
{
alert(“Hello, I’m ” + firstName + ” ” + lastName);
};
};
var BillGates = new Person(“Bill”, “Gates”, 53);
var SteveJobs = new Person(“Steve”, “Jobs”, 53);
BillGates.SayHello();
SteveJobs.SayHello();
alert(BillGates.getName() + ” ” + BillGates.age);
alert(BillGates.firstName); //這里不能訪問到私有變量
很顯然，這種模型的類描述特別象C#語言的描述形式，在一個構(gòu)造函數(shù)里依次定義了私有成員、公共屬性和可用的方法，顯得非常優(yōu)雅嘛。特別是“閉包”機(jī)制可以模擬對私有成員的保護(hù)機(jī)制，做得非常漂亮。
所謂的“閉包”，就是在構(gòu)造函數(shù)體內(nèi)定義另外的函數(shù)作為目標(biāo)對象的方法函數(shù)，而這個對象的方法函數(shù)反過來引用外層外層函數(shù)體中的臨時變量。這使得只要目標(biāo)對象在生存期內(nèi)始終能保持其方法，就能間接保持原構(gòu)造函數(shù)體當(dāng)時用到的臨時變量值。盡管最開始的構(gòu)造函數(shù)調(diào)用已經(jīng)結(jié)束，臨時變量的名稱也都消失了，但在目標(biāo)對象的方法內(nèi)卻始終能引用到該變量的值，而且該值只能通這種方法來訪問。即使再次調(diào)用相同的構(gòu)造函數(shù)，但只會生成新對象和方法，新的臨時變量只是對應(yīng)新的值，和上次那次調(diào)用的是各自獨(dú)立的。的確很巧妙！
但是前面我們說過，給每一個對象設(shè)置一份方法是一種很大的浪費(fèi)。還有，“閉包”這種間接保持變量值的機(jī)制，往往會給JavaSript的垃圾回收器制造難題。特別是遇到對象間復(fù)雜的循環(huán)引用時，垃圾回收的判斷邏輯非常復(fù)雜。無獨(dú)有偶，IE瀏覽器早期版本確實存在JavaSript垃圾回收方面的內(nèi)存泄漏問題。再加上“閉包”模型在性能測試方面的表現(xiàn)不佳，微軟最終放棄了“閉包”模型，而改用“原型”模型。正所謂“有得必有失”嘛。
原型模型需要一個構(gòu)造函數(shù)來定義對象的成員，而方法卻依附在該構(gòu)造函數(shù)的原型上。大致寫法如下：
//定義構(gòu)造函數(shù)
function Person(name)
{
this.name = name; //在構(gòu)造函數(shù)中定義成員
};
//方法定義到構(gòu)造函數(shù)的prototype上
Person.prototype.SayHello = function()
{
alert(“Hello, I’m ” + this.name);
};
//子類構(gòu)造函數(shù)
function Employee(name, salary)
{
Person.call(this, name); //調(diào)用上層構(gòu)造函數(shù)
this.salary = salary; //擴(kuò)展的成員
};
//子類構(gòu)造函數(shù)首先需要用上層構(gòu)造函數(shù)來建立prototype對象，實現(xiàn)繼承的概念
Employee.prototype = new Person() //只需要其prototype的方法，此對象的成員沒有任何意義！
//子類方法也定義到構(gòu)造函數(shù)之上
Employee.prototype.ShowMeTheMoney = function()
{
alert(this.name + ” $” + this.salary);
};
var BillGates = new Person(“Bill Gates”);
BillGates.SayHello();
var SteveJobs = new Employee(“Steve Jobs”, 1234);
SteveJobs.SayHello();
SteveJobs.ShowMeTheMoney();
原型類模型雖然不能模擬真正的私有變量，而且也要分兩部分來定義類，顯得不怎么“優(yōu)雅”。不過，對象間的方法是共享的，不會遇到垃圾回收問題，而且性能優(yōu)于“閉包”模型。正所謂“有失必有得”嘛。
在原型模型中，為了實現(xiàn)類繼承，必須首先將子類構(gòu)造函數(shù)的prototype設(shè)置為一個父類的對象實例。創(chuàng)建這個父類對象實例的目的就是為了構(gòu)成原型鏈，以起到共享上層原型方法作用。但創(chuàng)建這個實例對象時，上層構(gòu)造函數(shù)也會給它設(shè)置對象成員，這些對象成員對于繼承來說是沒有意義的。雖然，我們也沒有給構(gòu)造函數(shù)傳遞參數(shù)，但確實創(chuàng)建了若干沒有用的成員，盡管其值是undefined，這也是一種浪費(fèi)啊。
唉！世界上沒有完美的事情啊！
原型真諦
正當(dāng)我們感概萬分時，天空中一道紅光閃過，祥云中出現(xiàn)了觀音菩薩。只見她手持玉凈瓶，輕拂翠柳枝，灑下幾滴甘露，頓時讓JavaScript又添新的靈氣。
觀音灑下的甘露在JavaScript的世界里凝結(jié)成塊，成為了一種稱為“語法甘露”的東西。這種語法甘露可以讓我們編寫的代碼看起來更象對象語言。
要想知道這“語法甘露”為何物，就請君側(cè)耳細(xì)聽。
在理解這些語法甘露之前，我們需要重新再回顧一下JavaScript構(gòu)造對象的過程。
我們已經(jīng)知道，用 var anObject = new aFunction() 形式創(chuàng)建對象的過程實際上可以分為三步：第一步是建立一個新對象；第二步將該對象內(nèi)置的原型對象設(shè)置為構(gòu)造函數(shù)prototype引用的那個原型對象；第三步就是將該對象作為this參數(shù)調(diào)用構(gòu)造函數(shù)，完成成員設(shè)置等初始化工作。對象建立之后，對象上的任何訪問和操作都只與對象自身及其原型鏈上的那串對象有關(guān)，與構(gòu)造函數(shù)再扯不上關(guān)系了。換句話說，構(gòu)造函數(shù)只是在創(chuàng)建對象時起到介紹原型對象和初始化對象兩個作用。
那么，我們能否自己定義一個對象來當(dāng)作原型，并在這個原型上描述類，然后將這個原型設(shè)置給新創(chuàng)建的對象，將其當(dāng)作對象的類呢？我們又能否將這個原型中的一個方法當(dāng)作構(gòu)造函數(shù)，去初始化新建的對象呢？例如，我們定義這樣一個原型對象：
var Person = //定義一個對象來作為原型類
{
Create: function(name, age) //這個當(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.”);
}
};
這個JSON形式的寫法多么象一個C#的類啊！既有構(gòu)造函數(shù)，又有各種方法。如果可以用某種形式來創(chuàng)建對象，并將對象的內(nèi)置的原型設(shè)置為上面這個“類”對象，不就相當(dāng)于創(chuàng)建該類的對象了嗎？
但遺憾的是，我們幾乎不能訪問到對象內(nèi)置的原型屬性！盡管有些瀏覽器可以訪問到對象的內(nèi)置原型，但這樣做的話就只能限定了用戶必須使用那種瀏覽器。這也幾乎不可行。
那么，我們可不可以通過一個函數(shù)對象來做媒介，利用該函數(shù)對象的prototype屬性來中轉(zhuǎn)這個原型，并用new操作符傳遞給新建的對象呢？
其實，象這樣的代碼就可以實現(xiàn)這一目標(biāo)：
function anyfunc(){}; //定義一個函數(shù)軀殼
anyfunc.prototype = Person; //將原型對象放到中轉(zhuǎn)站prototype
var BillGates = new anyfunc(); //新建對象的內(nèi)置原型將是我們期望的原型對象
不過，這個anyfunc函數(shù)只是一個軀殼，在使用過這個軀殼之后它就成了多余的東西了，而且這和直接使用構(gòu)造函數(shù)來創(chuàng)建對象也沒啥不同，有點不爽。
可是，如果我們將這些代碼寫成一個通用函數(shù)，而那個函數(shù)軀殼也就成了函數(shù)內(nèi)的函數(shù)，這個內(nèi)部函數(shù)不就可以在外層函數(shù)退出作用域后自動消亡嗎？而且，我們可以將原型對象作為通用函數(shù)的參數(shù)，讓通用函數(shù)返回創(chuàng)建的對象。我們需要的就是下面這個形式：
function New(aClass, aParams) //通用創(chuàng)建函數(shù)
{
function new_() //定義臨時的中轉(zhuǎn)函數(shù)殼
{
aClass.Create.apply(this, aParams); //調(diào)用原型中定義的的構(gòu)造函數(shù)，中轉(zhuǎn)構(gòu)造邏輯及構(gòu)造參數(shù)
};
new_.prototype = aClass; //準(zhǔn)備中轉(zhuǎn)原型對象
return new new_(); //返回建立最終建立的對象
};
var Person = //定義的類
{
Create: function(name, age)
{
this.name = name;
this.age = age;
},
SayHello: function()
{
alert(“Hello, I’m ” + this.name);
},
HowOld: function()
{
alert(this.name + ” is ” + this.age + ” years old.”);
}
};
var BillGates = New(Person, ["Bill Gates", 53]); //調(diào)用通用函數(shù)創(chuàng)建對象，并以數(shù)組形式傳遞構(gòu)造參數(shù)
BillGates.SayHello();
BillGates.HowOld();
alert(BillGates.constructor == Object); //輸出：true
這里的通用函數(shù)New()就是一個“語法甘露”！這個語法甘露不但中轉(zhuǎn)了原型對象，還中轉(zhuǎn)了構(gòu)造函數(shù)邏輯及構(gòu)造參數(shù)。
有趣的是，每次創(chuàng)建完對象退出New函數(shù)作用域時，臨時的new_函數(shù)對象會被自動釋放。由于new_的prototype屬性被設(shè)置為新的原型對象，其原來的原型對象和new_之間就已解開了引用鏈，臨時函數(shù)及其原來的原型對象都會被正確回收了。上面代碼的最后一句證明，新創(chuàng)建的對象的constructor屬性返回的是Object函數(shù)。其實新建的對象自己及其原型里沒有constructor屬性，那返回的只是最頂層原型對象的構(gòu)造函數(shù)，即Object。
有了New這個語法甘露，類的定義就很像C#那些靜態(tài)對象語言的形式了，這樣的代碼顯得多么文靜而優(yōu)雅啊！
當(dāng)然，這個代碼僅僅展示了“語法甘露”的概念。我們還需要多一些的語法甘露，才能實現(xiàn)用簡潔而優(yōu)雅的代碼書寫類層次及其繼承關(guān)系。好了，我們再來看一個更豐富的示例吧：
//語法甘露：
var object = //定義小寫的object基本類，用于實現(xiàn)最基礎(chǔ)的方法等
{
isA: function(aType) //一個判斷類與類之間以及對象與類之間關(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ù)殼
{
this.Type = aBaseClass; //我們給每一個類約定一個Type屬性，引用其繼承的類
for(var member in aClassDefine)
this[member] = aClassDefine[member]; //復(fù)制類的全部定義到當(dāng)前創(chuàng)建的類
};
class_.prototype = aBaseClass;
return new class_();
};
function New(aClass, aParams) //創(chuàng)建對象的函數(shù)，用于任意類的對象創(chuàng)建
{
function new_() //創(chuàng)建對象的臨時函數(shù)殼
{
this.Type = aClass; //我們也給每一個對象約定一個Type屬性，據(jù)此可以訪問到對象所屬的類
if (aClass.Create)
aClass.Create.apply(this, aParams); //我們約定所有類的構(gòu)造函數(shù)都叫Create，這和DELPHI比較相似
};
new_.prototype = aClass;
return new new_();
};
//語法甘露的應(yīng)用效果：
var Person = Class(object, //派生至object基本類
{
Create: function(name, age)
{
this.name = name;
this.age = age;
},
SayHello: function()
{
alert(“Hello, I’m ” + this.name + “, ” + this.age + ” years old.”);
}
});
var Employee = Class(Person, //派生至Person類，是不是和一般對象語言很相似？
{
Create: function(name, age, salary)
{
Person.Create.call(this, name, age); //調(diào)用基類的構(gòu)造函數(shù)
this.salary = salary;
},
ShowMeTheMoney: function()
{
alert(this.name + ” $” + this.salary);
}
});
var BillGates = New(Person, ["Bill Gates", 53]);
var SteveJobs = New(Employee, ["Steve Jobs", 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ōu)雅。有了這些語法甘露，JavaScript就很像一般對象語言了，寫起代碼了感覺也就爽多了！
令人高興的是，受這些甘露滋養(yǎng)的JavaScript程序效率會更高。因為其原型對象里既沒有了毫無用處的那些對象級的成員，而且還不存在constructor屬性體，少了與構(gòu)造函數(shù)間的牽連，但依舊保持了方法的共享性。這讓JavaScript在追溯原型鏈和搜索屬性及方法時，少費(fèi)許多工夫啊。
我們就把這種形式稱為“甘露模型”吧！其實，這種“甘露模型”的原型用法才是符合prototype概念的本意，才是的JavaScript原型的真諦！
想必微軟那些設(shè)計AJAX架構(gòu)的工程師看到這個甘露模型時，肯定后悔沒有早點把AJAX部門從美國搬到咱中國的觀音廟來，錯過了觀音菩薩的點化。當(dāng)然，我們也只能是在代碼的示例中，把Bill Gates當(dāng)作對象玩玩，真要讓他放棄上帝轉(zhuǎn)而皈依我佛肯定是不容易的，機(jī)緣未到啊！如果哪天你在微軟新出的AJAX類庫中看到這種甘露模型，那才是真正的緣分！
編程的快樂
在軟件工業(yè)迅猛發(fā)展的今天，各式各樣的編程語言層出不窮，新語言的誕生，舊語言的演化，似乎已經(jīng)讓我們眼花繚亂。為了適應(yīng)面向?qū)ο缶幊痰某绷?#xff0c;JavaScript語言也在向完全面向?qū)ο蟮姆较虬l(fā)展，新的JavaScript標(biāo)準(zhǔn)已經(jīng)從語義上擴(kuò)展了許多面向?qū)ο蟮男略亍Ｅc此相反的是，許多靜態(tài)的對象語言也在向JavaScript的那種簡潔而幽雅的方向發(fā)展。例如，新版本的C#語言就吸收了JSON那樣的簡潔表示法，以及一些其他形式的JavaScript特性。
我們應(yīng)該看到，隨著RIA(強(qiáng)互聯(lián)應(yīng)用)的發(fā)展和普及，AJAX技術(shù)也將逐漸淡出江湖，JavaScript也將最終消失或演化成其他形式的語言。但不管編程語言如何發(fā)展和演化，編程世界永遠(yuǎn)都會在“數(shù)據(jù)”與“代碼”這千絲萬縷的糾纏中保持著無限的生機(jī)。只要我們能看透這一點，我們就能很容易地學(xué)習(xí)和理解軟件世界的各種新事物。不管是已熟悉的過程式編程，還是正在發(fā)展的函數(shù)式編程，以及未來量子糾纏態(tài)的大規(guī)模并行式編程，我們都有足夠的法力來化解一切復(fù)雜的難題。
佛最后淡淡地說：只要我們放下那些表面的“類”，放下那些對象的“自我”，就能達(dá)到一種“對象本無根，類型亦無形”的境界，從而將自我融入到整個宇宙的生命輪循環(huán)中。我們將沒有自我，也沒有自私的欲望，你就是我，我就是你，你中有我，我中有你。這時，我們再看這生機(jī)勃勃的編程世界時，我們的內(nèi)心將自然生起無限的慈愛之心，這種慈愛之心不是虛偽而是真誠的。關(guān)愛他人就是關(guān)愛自己，就是關(guān)愛這世界中的一切。那么，我們的心是永遠(yuǎn)快樂的，我們的程序是永遠(yuǎn)快樂的，我們的類是永遠(yuǎn)快樂的，我們的對象也是永遠(yuǎn)快樂的。這就是編程的極樂！
說到這里，在座的比丘都猶如醍醐灌頂，心中豁然開朗。看看左邊這位早已喜不自禁，再看看右邊那位也是心花怒放。
驀然回首時，唯見君拈花微笑…
轉(zhuǎn)載于:https://my.oschina.net/crisslin/blog/223879
總結(jié)
以上是生活随笔為你收集整理的悟透JavaScript （强烈推荐）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： IP别名和网卡绑定
- 下一篇： 解读JavaScript代码 var i