悟透JavaScript（理解JS面向對象的好文章）（一）

知識 06-24

引子

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

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

　　你看，數據代碼間的關係與物質能量間的關係有著驚人的相似。數據也是有慣性的，如果沒有代碼來施加外力，她總保持自己原來的狀態。而代碼就象能量，他存在的唯一目的，就是要努力改變數據原來的狀態。在代碼改變數據的同時，也會因為數據的抗拒而反過來影響或改變代碼原有的趨勢。甚至在某些情況下，數據可以轉變為代碼，而代碼卻又有可能被轉變為數據，或許還存在一個類似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程序：

　　這段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中，並用

　　這時，輸出才是各自按順序來的，也證明了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（理解JS面向對象的好文章）（二）

　　原著：李戰(leadzen).深圳

　　via：http://www.cnblogs.com/zhangshiwen/p/3627085.html