為什么80%的碼農都做不了架構師？>>> ??

?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程序：
???? 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的代碼就只有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執行引擎并非一行一行地分析和執行程序，而是一段一段地分析執行的。而且，在同一段程序的分析執行中，定義式的函數語句會被提 取出來優先執行。函數定義執行完之后，才會按順序執行其他語句代碼。也就是說，在第一次調用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函數的神奇之處還體現在另外兩個方面：一是函數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的超然結合吧。
JavaScript中也有this，但這個this卻與C++、C#或Java等語言的this不同。一般編程語言的this就是對象自己，而 JavaScript的this卻并不一定！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 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舞臺上成為璀璨奪目的明星。

構造對象 好了，接下我們來討論一下對象的另一種創建方法。

除JSON外，在JavaScript中我們可以使用new操作符結合一個函數的形式來創建對象。例如：
???? function ?MyFunc()?{};????????? // 定義一個空函數
???? var ?anObj? = ? new ?MyFunc();?? // 使用new操作符，借助MyFun函數，就創建了一個對象
JavaScript的這種創建對象的方式可真有意思，如何去理解這種寫法呢？
? 其實，可以把上面的代碼改寫成這種等價形式：
???? function ?MyFunc(){};
???? var ?anObj? = ?{};????? // 創建一個對象
????MyFunc.call(anObj);? // 將anObj對象作為this指針調用MyFunc函數
我們就可以這樣理解，JavaScript先用new操作符創建了一個對象，緊接著就將這個對象作為this參數調用了后面的函數。其實， JavaScript內部就是這么做的，而且任何函數都可以被這樣調用！但從 “anObj = new MyFunc()” 這種形式，我們又看到一個熟悉的身影，C++和C#不就是這樣創建對象的嗎？原來，條條大路通靈山，殊途同歸啊！

君看到此處也許會想，我們為什么不可以把這個MyFunc當作構造函數呢？恭喜你，答對了！JavaScript也是這么想的！請看下面的代碼：?
?1 ? ???? function ?Person(name)??? // 帶參數的構造函數
?2 ? ????{
?3 ? ???????? this .name? = ?name;??? // 將參數值賦給給this對象的屬性
?4 ? ???????? this .SayHello? = ? function ()?{alert( " Hello,?I'm? " ? + ? this .name);};??? // 給this對象定義一個SayHello方法。
?5 ? ????};
?6 ?
?7 ? ???? function ?Employee(name,?salary)????? // 子構造函數
?8 ? ????{
?9 ? ????????Person.call( this ,?name);???????? // 將this傳給父構造函數
10 ? ???????? this .salary? = ?salary;??????? // 設置一個this的salary屬性
11 ? ???????? this .ShowMeTheMoney? = ? function ()?{alert( this .name? + ? " ?$ " ? + ? this .salary);};?? // 添加ShowMeTheMoney方法。
12 ? ????};
13 ? ????
14 ? ???? var ?BillGates? = ? new ?Person( " Bill?Gates " );??? // 用Person構造函數創建BillGates對象
15 ? ???? var ?SteveJobs? = ? new ?Employee( " Steve?Jobs " ,? 1234 );??? // 用Empolyee構造函數創建SteveJobs對象
16 ?
17 ? ????BillGates.SayHello();??? // 顯示：I'm?Bill?Gates
18 ? ????SteveJobs.SayHello();??? // 顯示：I'm?Steve?Jobs
19 ? ????SteveJobs.ShowMeTheMoney();??? // 顯示：Steve?Jobs?$1234
20 ?
21 ? ????alert(BillGates.constructor? == ?Person);?? // 顯示：true
22 ? ????alert(SteveJobs.constructor? == ?Employee);?? // 顯示：true
23 ? ????
24 ? ????alert(BillGates.SayHello? == ?SteveJobs.SayHello);? // 顯示：false 這段代碼表明，函數不但可以當作構造函數，而且還可以帶參數，還可以為對象添加成員和方法。其中的第9行，Employee構造函數又將自己接收的 this作為參數調用Person構造函數，這就是相當于調用基類的構造函數。第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的 寫法顯得優雅多了，盡管調用形式沒有變，但邏輯上卻體現了方法與類的關系，相對前面的寫法，更容易理解和組織代碼。

那么，對于多層次類型的構造函數情況又如何呢？

我們再來看下面的代碼：
?1 ? ???? function ?Person(name)??? // 基類構造函數
?2 ? ????{
?3 ? ???????? this .name? = ?name;
?4 ? ????};
?5 ? ????
?6 ? ????Person.prototype.SayHello? = ? function ()?? // 給基類構造函數的prototype添加方法
?7 ? ????{
?8 ? ????????alert( " Hello,?I'm? " ? + ? this .name);
?9 ? ????};
10 ? ????
11 ? ???? function ?Employee(name,?salary)? // 子類構造函數
12 ? ????{
13 ? ????????Person.call( this ,?name);???? // 調用基類構造函數
14 ? ???????? this .salary? = ?salary;
15 ? ????};
16 ? ????
17 ? ????Employee.prototype? = ? new ?Person();?? // 建一個基類的對象作為子類原型的原型，這里很有意思
18 ? ????
19 ? ????Employee.prototype.ShowMeTheMoney? = ? function ()?? // 給子類添構造函數的prototype添加方法
20 ? ????{
21 ? ????????alert( this .name? + ? " ?$ " ? + ? this .salary);
22 ? ????};
23 ?
24 ? ???? var ?BillGates? = ? new ?Person( " Bill?Gates " );??? // 創建基類Person的BillGates對象
25 ? ???? var ?SteveJobs? = ? new ?Employee( " Steve?Jobs " ,? 1234 );??? // 創建子類Employee的SteveJobs對象
26 ?
27 ? ????BillGates.SayHello();??????? // 通過對象直接調用到prototype的方法
28 ? ????SteveJobs.SayHello();??????? // 通過子類對象直接調用基類prototype的方法，關注！
29 ? ????SteveJobs.ShowMeTheMoney();? // 通過子類對象直接調用子類prototype的方法
30 ?
31 ? ????alert(BillGates.SayHello? == ?SteveJobs.SayHello);? // 顯示：true，表明prototype的方法是共享的 這段代碼的第17行，構造了一個基類的對象，并將其設為子類構造函數的prototype，這是很有意思的。這樣做的目的就是為了第28行，通過子類對象也可以直接調用基類prototype的方法。為什么可以這樣呢？

原來，在JavaScript中，prototype不但能讓對象共享自己財富，而且prototype還有尋根問祖的天性，從而使得先輩們的遺產可以代 代相傳。當從一個對象那里讀取屬性或調用方法時，如果該對象自身不存在這樣的屬性或方法，就會去自己關聯的prototype對象那里尋找；如果 prototype沒有，又會去prototype自己關聯的前輩prototype那里尋找，直到找到或追溯過程結束為止。

在JavaScript內部，對象的屬性和方法追溯機制是通過所謂的prototype鏈來實現的。當用new操作符構造對象時，也會同時將構造函數的 prototype對象指派給新創建的對象，成為該對象內置的原型對象。對象內置的原型對象應該是對外不可見的，盡管有些瀏覽器(如Firefox)可以 讓我們訪問這個內置原型對象，但并不建議這樣做。內置的原型對象本身也是對象，也有自己關聯的原型對象，這樣就形成了所謂的原型鏈。

在原型鏈的最末端，就是Object構造函數prototype屬性指向的那一個原型對象。這個原型對象是所有對象的最老祖先，這個老祖宗實現了諸如 toString等所有對象天生就該具有的方法。其他內置構造函數，如Function, Boolean, String, Date和RegExp等的prototype都是從這個老祖宗傳承下來的，但他們各自又定義了自身的屬性和方法，從而他們的子孫就表現出各自宗族的那些 特征。

這不就是“繼承”嗎？是的，這就是“繼承”，是JavaScript特有的“原型繼承”。

“原型繼承”是慈祥而又嚴厲的。原形對象將自己的屬性和方法無私地貢獻給孩子們使用，也并不強迫孩子們必須遵從，允許一些頑皮孩子按自己的興趣和愛好獨立 行事。從這點上看，原型對象是一位慈祥的母親。然而，任何一個孩子雖然可以我行我素，但卻不能動原型對象既有的財產，因為那可能會影響到其他孩子的利益。 從這一點上看，原型對象又象一位嚴厲的父親。我們來看看下面的代碼就可以理解這個意思了：
???? function ?Person(name)
????{
???????? this .name? = ?name;
????};
????
????Person.prototype.company? = ? " Microsoft " ;? // 原型的屬性
????
????Person.prototype.SayHello? = ? function ()?? // 原型的方法
????{
????????alert( " Hello,?I'm? " ? + ? this .name? + ? " ?of? " ? + ? this .company);
????};
????
???? var ?BillGates? = ? new ?Person( " Bill?Gates " );
????BillGates.SayHello();??? // 由于繼承了原型的東西，規規矩矩輸出：Hello,?I'm?Bill?Gates
????
???? var ?SteveJobs? = ? new ?Person( " Steve?Jobs " );
????SteveJobs.company? = ? " Apple " ;???? // 設置自己的company屬性，掩蓋了原型的company屬性
????SteveJobs.SayHello? = ? function ()? // 實現了自己的SayHello方法，掩蓋了原型的SayHello方法
????{
????????alert( " Hi,? " ? + ? this .name? + ? " ?like? " ? + ? this .company? + ? " ,?ha?ha?ha? " );
????};

????SteveJobs.SayHello();??? // 都是自己覆蓋的屬性和方法，輸出：Hi,?Steve?Jobs?like?Apple,?ha?ha?ha?
????
????BillGates.SayHello();??? // SteveJobs的覆蓋沒有影響原型對象，BillGates還是按老樣子輸出 對象可以掩蓋原型對象的那些屬性和方法，一個構造函數原型對象也可以掩蓋上層構造函數原型對象既有的屬性和方法。這種掩蓋其實只是在對象自己身上創建了新的屬性和方法，只不過這些屬性和方法與原型對象的那些同名而已。JavaScript就是用這簡單的掩蓋機制實現了對象的“多態”性，與靜態對象語言的虛函數和重載(override)概念不謀而合。

然而，比靜態對象語言更神奇的是，我們可以隨時給原型對象動態添加新的屬性和方法，從而動態地擴展基類的功能特性。這在靜態對象語言中是很難想象的。我們來看下面的代碼：
???? function ?Person(name)
????{
???????? this .name? = ?name;
????};
????
????Person.prototype.SayHello? = ? function ()?? // 建立對象前定義的方法
????{
????????alert( " Hello,?I'm? " ? + ? this .name);
????};
????
???? var ?BillGates? = ? new ?Person( " Bill?Gates " );??? // 建立對象
????
????BillGates.SayHello();
????
????Person.prototype.Retire? = ? function ()???? // 建立對象后再動態擴展原型的方法
????{
????????alert( " Poor? " ? + ? this .name? + ? " ,?bye?bye! " );
????};
????
????BillGates.Retire();? // 動態擴展的方法即可被先前建立的對象立即調用 原型擴展
如果在JavaScript內置的那些如Object和Function等函數的prototype上添加些新的方法和屬性，是不是就能擴展JavaScript的功能呢？

在AJAX技術迅猛發展的今天，許多成功的AJAX項目的JavaScript運行庫都大量擴展了內置函數的prototype功能。比如微軟的 ASP.NET AJAX，就給這些內置函數及其prototype添加了大量的新特性，從而增強了JavaScript的功能。

我們來看一段摘自MicrosoftAjax.debug.js中的代碼：
String.prototype.trim? = ? function ?String$trim()?{
???? if ?(arguments.length? !== ? 0 )? throw ?Error.parameterCount();
???? return ? this .replace( / ^\s+|\s+$ / g,? '' );
} 這段代碼就是給內置String函數的prototype擴展了一個trim方法，于是所有的String類對象都有了trim方法了。有了這個 擴展，今后要去除字符串兩端的空白，就不用再分別處理了，因為任何字符串都有了這個擴展功能，只要調用即可，真的很方便。

當然，幾乎很少有人去給Object的prototype添加方法，因為那會影響到所有的對象，除非在你的架構中這種方法的確是所有對象都需要的。

前兩年，微軟在設計AJAX類庫的初期，用了一種被稱為“閉包”(closure)的技術來模擬“類”。其大致模型如下：
???? function ?Person(firstName,?lastName,?age)
????{
???????? // 私有變量：
???????? var ?_firstName? = ?firstName;
???????? var ?_lastName? = ?lastName;

???????? // 公共變量:
???????? this .age? = ?age;

???????? // 方法：
???????? this .getName? = ? function ()
????????{
???????????? return (firstName? + ? " ? " ? + ?lastName);
????????};
???????? this .SayHello? = ? function ()
????????{
????????????alert( " Hello,?I'm? " ? + ?firstName? + ? " ? " ? + ?lastName);
????????};
????};
????
???? var ?BillGates? = ? new ?Person( " Bill " ,? " Gates " ,? 53 );
???? var ?SteveJobs? = ? new ?Person( " Steve " ,? " Jobs " ,? 53 );
????
????BillGates.SayHello();
????SteveJobs.SayHello();
????alert(BillGates.getName()? + ? " ? " ? + ?BillGates.age);
????alert(BillGates.firstName);????? // 這里不能訪問到私有變量 很顯然，這種模型的類描述特別象C#語言的描述形式，在一個構造函數里依次定義了私有成員、公共屬性和可用的方法，顯得非常優雅嘛。特別是“閉包”機制可以模擬對私有成員的保護機制，做得非常漂亮。

所謂的“閉包”，就是在構造函數體內定義另外的函數作為目標對象的方法函數，而這個對象的方法函數反過來引用外層外層函數體中的臨時變量。這使得 只要目標對象在生存期內始終能保持其方法，就能間接保持原構造函數體當時用到的臨時變量值。盡管最開始的構造函數調用已經結束，臨時變量的名稱也都消失 了，但在目標對象的方法內卻始終能引用到該變量的值，而且該值只能通這種方法來訪問。即使再次調用相同的構造函數，但只會生成新對象和方法，新的臨時變量 只是對應新的值，和上次那次調用的是各自獨立的。的確很巧妙！

但是前面我們說過，給每一個對象設置一份方法是一種很大的浪費。還有，“閉包”這種間接保持變量值的機制，往往會給JavaSript的垃圾回收 器制造難題。特別是遇到對象間復雜的循環引用時，垃圾回收的判斷邏輯非常復雜。無獨有偶，IE瀏覽器早期版本確實存在JavaSript垃圾回收方面的內 存泄漏問題。再加上“閉包”模型在性能測試方面的表現不佳，微軟最終放棄了“閉包”模型，而改用“原型”模型。

????原型模型需要一個構造函數來定義對象的成員，而方法卻依附在該構造函數的原型上。大致寫法如下：
???? // 定義構造函數
???? function ?Person(name)
????{
???????? this .name? = ?name;??? // 在構造函數中定義成員
????};
????
???? // 方法定義到構造函數的prototype上
????Person.prototype.SayHello? = ? function ()
????{
????????alert( " Hello,?I'm? " ? + ? this .name);
????};????
????
???? // 子類構造函數
???? function ?Employee(name,?salary)
????{
????????Person.call( this ,?name);???? // 調用上層構造函數
???????? this .salary? = ?salary;??????? // 擴展的成員
????};
????
???? // 子類構造函數首先需要用上層構造函數來建立prototype對象，實現繼承的概念
????Employee.prototype? = ? new ?Person()??? // 只需要其prototype的方法，此對象的成員沒有任何意義！
????
???? // 子類方法也定義到構造函數之上
????Employee.prototype.ShowMeTheMoney? = ? function ()
????{
????????alert( this .name? + ? " ?$ " ? + ? this .salary);
????};
????
???? var ?BillGates? = ? new ?Person( " Bill?Gates " );
????BillGates.SayHello();????
????
???? var ?SteveJobs? = ? new ?Employee( " Steve?Jobs " ,? 1234 );
????SteveJobs.SayHello();
????SteveJobs.ShowMeTheMoney();

原型類模型雖然不能模擬真正的私有變量，而且也要分兩部分來定義類，顯得不怎么“優雅”。不過，對象間的方法是共享的，不會遇到垃圾回收問題，而且性能優于“閉包”模型。正所謂“有失必有得”嘛。

在原型模型中，為了實現類繼承，必須首先將子類構造函數的prototype設置為一個父類的對象實例。創建這個父類對象實例的目的就是為 了構成原型鏈，以起到共享上層原型方法作用。但創建這個實例對象時，上層構造函數也會給它設置對象成員，這些對象成員對于繼承來說是沒有意義的。雖然，我 們也沒有給構造函數傳遞參數，但確實創建了若干沒有用的成員，盡管其值是undefined，這也是一種浪費啊。

唉！世界上沒有完美的事情啊！

原型真諦

我們已經知道，用 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原型的真諦！

原文地址：http://7685941014.blog.163.com/blog/static/124615480201061782347164/

轉載于:https://my.oschina.net/megan/blog/128353

總結

以上是生活随笔為你收集整理的javascript 编程思想的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。