轉載--學JS必看-JavaScript數據結構深度剖析

轉載地址–http://blog.sina.com.cn/s/blog_7b9c5e4101017mjt.html

JavaScript以其強大靈活的特點,被廣泛運用於各種類型的網站上。一直以來都沒怎麼好好學JS,只是略懂皮毛,看這篇文章時有讀《PHP聖經》的感覺,作者深入淺出、生動形象地用各種實例給我們分析了JavaScript的數據結構,讓人有一種豁然開朗的感覺。
全文如下:
編程世界裏只存在兩種基本元素,一個是數據,一個是代碼。編程世界就是在數據和代碼千絲萬縷的糾纏中呈現出無限的生機和活力。

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

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

不過,由於不同程序員有着不同的世界觀,這些數據和代碼看起來也就不盡相同。於是,不同世界觀的程序員們運用各自的方法論,推動着編程世界的進化和發展。

衆所周知,當今最流行的編程思想莫過於面向對象編程的思想。爲什麼面向對象的思想能迅速風靡編程世界呢?因爲面向對象的思想首次把數據和代碼結合成統一體,並以一個簡單的對象概念呈現給編程者。這一下子就將原來那些雜亂的算法與子程序,以及糾纏不清的複雜數據結構,劃分成清晰而有序的對象結構,從而理清了數據與代碼在我們心中那團亂麻般的結。我們又可以有一個更清晰的思維,在另一個思想高度上去探索更加浩瀚的編程世界了。

迴歸簡單

要理解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>
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也是這麼想的!請看下面的代碼:

function Person(name) //帶參數的構造函數
{
this.name = name; //將參數值賦給給this對象的屬性
this.SayHello = function() {alert(”Hello, I’m ” + this.name);}; //給this對象定義一個SayHello方法。
};

function Employee(name, salary) //子構造函數
{
Person.call(this, name); //將this傳給父構造函數
this.salary = salary; //設置一個this的salary屬性
this.ShowMeTheMoney = function() {alert(this.name + ” $” + this.salary);}; //添加ShowMeTheMoney方法。
};

var BillGates = new Person(”Bill Gates”); //用Person構造函數創建BillGates對象
var SteveJobs = new Employee(”Steve Jobs”, 1234); //用Empolyee構造函數創建SteveJobs對象

BillGates.SayHello(); //顯示:I’m Bill Gates
SteveJobs.SayHello(); //顯示:I’m Steve Jobs
SteveJobs.ShowMeTheMoney(); //顯示:Steve Jobs $1234

alert(BillGates.constructor == Person); //顯示:true
alert(SteveJobs.constructor == Employee); //顯示:true

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的寫法顯得優雅多了,儘管調用形式沒有變,但邏輯上卻體現了方法與類的關係,相對前面的寫法,更容易理解和組織代碼。

那麼,對於多層次類型的構造函數情況又如何呢?

我們再來看下面的代碼:

function Person(name) //基類構造函數
{
this.name = name;
};

Person.prototype.SayHello = function() //給基類構造函數的prototype添加方法
{
alert(”Hello, I’m ” + this.name);
};

function Employee(name, salary) //子類構造函數
{
Person.call(this, name); //調用基類構造函數
this.salary = salary;
};

Employee.prototype = new Person(); //建一個基類的對象作爲子類原型的原型,這裏很有意思

Employee.prototype.ShowMeTheMoney = function() //給子類添構造函數的prototype添加方法
{
alert(this.name + ” $” + this.salary);
};

var BillGates = new Person(”Bill Gates”); //創建基類Person的BillGates對象
var SteveJobs = new Employee(”Steve Jobs”, 1234); //創建子類Employee的SteveJobs對象

BillGates.SayHello(); //通過對象直接調用到prototype的方法  SteveJobs.SayHello(); //通過子類對象直接調用基類prototype的方法,關注!
SteveJobs.ShowMeTheMoney(); //通過子類對象直接調用子類prototype的方法

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類庫中看到這種甘露模型,那纔是真正的緣分!

發佈了42 篇原創文章 · 獲贊 58 · 訪問量 17萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章