轉自：https://blog.csdn.net/qq_30100043/article/details/52561676
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/>標籤將其分成這樣的兩塊：
<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類庫中看到這種甘露模型，那才是真正的緣分