1、Json prototype 閉包 構(gòu)造函數(shù)Json,prototype,閉包,構(gòu)造函數(shù)2010-07-08 19：53Json,prototype,閉包,構(gòu)造函數(shù)2008年10月24日星期五上午11：34JSON已經(jīng)說(shuō)了許多了許多話題了，但有一個(gè)很基本的問(wèn)題我們忘了討論，那就是：怎樣建立對(duì)象?在前面的示例中，我們已經(jīng)涉及到了對(duì)象的建立了。我們使用了一種被稱為JavaScript Object Notation(縮寫(xiě)JSON)的形式，翻譯為中文就是JavaScript對(duì)象表示法。JSON為創(chuàng)建對(duì)象提供了非常簡(jiǎn)單的方法。例如，創(chuàng)建一個(gè)沒(méi)有任何屬性的對(duì)象：var o=；創(chuàng)建一個(gè)對(duì)象并設(shè)置屬性及初始

2、值：var person=name：Angel,age：18,married：false；創(chuàng)建一個(gè)對(duì)象并設(shè)置屬性和方法：var speaker=text：Hello World,say：function()alert(this.text)；創(chuàng)建一個(gè)更復(fù)雜的對(duì)象，嵌套其他對(duì)象和對(duì)象數(shù)組等：var company=name：Microsoft,product：softwares,chairman：name：Bill Gates,age：53,Married：true,employees：name：Angel,age：26,Married：false,name：Hanson,age：32,Marre

3、d：true,readme：function()document.write(+product+duct)；JSON的形式就是用大括號(hào)包括起來(lái)的項(xiàng)目列表，每一個(gè)項(xiàng)目間并用逗號(hào),分隔，而項(xiàng)目就是用冒號(hào)：分隔的屬性名和屬性值。這是典型的字典表示形式，也再次表明了JavaScript里的對(duì)象就是字典結(jié)構(gòu)。不管多么復(fù)雜的對(duì)象，都可以被一句JSON代碼來(lái)創(chuàng)建并賦值。其實(shí)，JSON就是JavaScript對(duì)象最好的序列化形式，它比XML更簡(jiǎn)潔也更省空間。對(duì)象可以作為一個(gè)JSON形式的字符串，在網(wǎng)絡(luò)間自由傳遞和交換信息。而當(dāng)需要將這個(gè)JSON字符串變成一個(gè)JavaScrip

4、t對(duì)象時(shí)，只需要使用eval函數(shù)這個(gè)強(qiáng)大的數(shù)碼轉(zhuǎn)換引擎，就立即能得到一個(gè)JavaScript內(nèi)存對(duì)象。正是由于JSON的這種簡(jiǎn)單樸素的天生麗質(zhì)，才使得她在AJAX舞臺(tái)上成為璀璨奪目的明星。JavaScript就是這樣，把面向?qū)ο竽切┛此茝?fù)雜的東西，用及其簡(jiǎn)潔的形式表達(dá)出來(lái)。卸下對(duì)象浮華的濃妝，還對(duì)象一個(gè)眉目清晰！構(gòu)造對(duì)象好了，接下我們來(lái)討論一下對(duì)象的另一種創(chuàng)建方法。除JSON外，在JavaScript中我們可以使用new操作符結(jié)合一個(gè)函數(shù)的形式來(lái)創(chuàng)建對(duì)象。例如：function MyFunc()；/定義一個(gè)空函數(shù)var anObj=new MyFunc()；/使用new操作符，借助MyFun函

5、數(shù)，就創(chuàng)建了一個(gè)對(duì)象JavaScript的這種創(chuàng)建對(duì)象的方式可真有意思，如何去理解這種寫(xiě)法呢?其實(shí)，可以把上面的代碼改寫(xiě)成這種等價(jià)形式：function MyFunc()；var anObj=；/創(chuàng)建一個(gè)對(duì)象MyFunc.call(anObj)；/將anObj對(duì)象作為this指針調(diào)用MyFunc函數(shù)我們就可以這樣理解，JavaScript先用new操作符創(chuàng)建了一個(gè)對(duì)象，緊接著就將這個(gè)對(duì)象作為this參數(shù)調(diào)用了后面的函數(shù)。其實(shí)，JavaScript內(nèi)部就是這么做的，而且任何函數(shù)都可以被這樣調(diào)用！但從anObj=new MyFunc()這種形式，我們又看到一個(gè)熟悉的身影，C+和C#不就是這樣創(chuàng)建對(duì)

6、象的嗎?原來(lái)，條條大路通靈山，殊途同歸?。≌?qǐng)看下面的代碼：1 function Person(name)/帶參數(shù)的構(gòu)造函數(shù)23 =name；/將參數(shù)值賦給給this對(duì)象的屬性4 this.SayHello=function()alert(Hello,Im+)；/給this對(duì)象定義一個(gè)SayHello方法。5；6 7function Employee(name,salary)/子構(gòu)造函數(shù)89 Person.call(this,name)；/將this傳給父構(gòu)造函數(shù)10 this.salary=salary；/設(shè)置一個(gè)this的salary屬性11 this.S

7、howMeTheMoney=function()alert(+$+this.salary)；/添加ShowMeTheMoney方法。12；13 14 var BillGates=new Person(Bill Gates)；/用Person構(gòu)造函數(shù)創(chuàng)建BillGates對(duì)象15 var SteveJobs=new Employee(Steve Jobs,1234)；/用Empolyee構(gòu)造函數(shù)創(chuàng)建SteveJobs對(duì)象16 17 BillGates.SayHello()；/顯示：Im Bill Gates 18 SteveJobs.SayHello()；/顯示：Im Stev

8、e Jobs 19 SteveJobs.ShowMeTheMoney()；/顯示：Steve Jobs34 20 21 alert(BillGates.constructor=Person)；/顯示：true 22 alert(SteveJobs.constructor=Employee)；/顯示：true 23 24 alert(BillGates.SayHello=SteveJobs.SayHello)；/顯示：false這段代碼表明，函數(shù)不但可以當(dāng)作構(gòu)造函數(shù)，而且還可以帶參數(shù)，還可以為對(duì)象添加成員和方法。其中的第9行，Employee構(gòu)造函數(shù)又將自己接收的this作為參數(shù)調(diào)用Person

9、構(gòu)造函數(shù)，這就是相當(dāng)于調(diào)用基類的構(gòu)造函數(shù)。第21、22行還表明這樣一個(gè)意思：BillGates是由Person構(gòu)造的，而SteveJobs是由Employee構(gòu)造的。對(duì)象內(nèi)置的constructor屬性還指明了構(gòu)造對(duì)象所用的具體函數(shù)！其實(shí)，如果你愿意把函數(shù)當(dāng)作類的話，她就是類，因?yàn)樗緛?lái)就有類的那些特征。難道不是嗎?她生出的兒子各個(gè)都有相同的特征，而且構(gòu)造函數(shù)也與類同名嘛！但要注意的是，用構(gòu)造函數(shù)操作this對(duì)象創(chuàng)建出來(lái)的每一個(gè)對(duì)象，不但具有各自的成員數(shù)據(jù)，而且還具有各自的方法數(shù)據(jù)。換句話說(shuō)，方法的代碼體(體現(xiàn)函數(shù)邏輯的數(shù)據(jù))在每一個(gè)對(duì)象中都存在一個(gè)副本。盡管每一個(gè)代碼副本的邏輯是相同的，但對(duì)

10、象們確實(shí)是各自保存了一份代碼體。上例中的最后一句說(shuō)明了這一實(shí)事，這也解釋了JavaScript中的函數(shù)就是對(duì)象的概念。同一類的對(duì)象各自有一份方法代碼顯然是一種浪費(fèi)。在傳統(tǒng)的對(duì)象語(yǔ)言中，方法函數(shù)并不象JavaScript那樣是個(gè)對(duì)象概念。即使也有象函數(shù)指針、方法指針或委托那樣的變化形式，但其實(shí)質(zhì)也是對(duì)同一份代碼的引用。一般的對(duì)象語(yǔ)言很難遇到這種情況。不過(guò)，JavaScript語(yǔ)言有大的靈活性。我們可以先定義一份唯一的方法函數(shù)體，并在構(gòu)造this對(duì)象時(shí)使用這唯一的函數(shù)對(duì)象作為其方法，就能共享方法邏輯。例如：function SayHello()/先定義一份SayHello函數(shù)代碼alert(Hel

11、lo,Im+)；function Person(name)/帶參數(shù)的構(gòu)造函數(shù)=name；/將參數(shù)值賦給給this對(duì)象的屬性this.SayHello=SayHello；/給this對(duì)象SayHello方法賦值為前面那份SayHello代碼。；var BillGates=new Person(Bill Gates)；/創(chuàng)建BillGates對(duì)象var SteveJobs=new Person(Steve Jobs)；/創(chuàng)建SteveJobs對(duì)象alert(BillGates.SayHello=SteveJobs.SayHello)；/顯示：true其中，最后一

12、行的輸出結(jié)果表明兩個(gè)對(duì)象確實(shí)共享了一個(gè)函數(shù)對(duì)象。雖然，這段程序達(dá)到了共享了一份方法代碼的目的，但卻不怎么優(yōu)雅。因?yàn)?，定義SayHello方法時(shí)反映不出其與Person類的關(guān)系。優(yōu)雅這個(gè)詞用來(lái)形容代碼，也不知道是誰(shuí)先提出來(lái)的。不過(guò)，這個(gè)詞反映了程序員已經(jīng)從追求代碼的正確、高效、可靠和易讀等基礎(chǔ)上，向著追求代碼的美觀感覺(jué)和藝術(shù)境界的層次發(fā)展，程序人生又多了些浪漫色彩。顯然，JavaScript早想到了這一問(wèn)題，她的設(shè)計(jì)者們?yōu)榇颂峁┝艘粋€(gè)有趣的prototype概念。初看原型prototype源自法語(yǔ)，軟件界的標(biāo)準(zhǔn)翻譯為原型，代表事物的初始形態(tài)，也含有模型和樣板的意義。JavaScript中的pro

13、totype概念恰如其分地反映了這個(gè)詞的內(nèi)含，我們不能將其理解為C+的prototype那種預(yù)先聲明的概念。JavaScript的所有function類型的對(duì)象都有一個(gè)prototype屬性。這個(gè)prototype屬性本身又是一個(gè)object類型的對(duì)象，因此我們也可以給這個(gè)prototype對(duì)象添加任意的屬性和方法。既然prototype是對(duì)象的原型，那么由該函數(shù)構(gòu)造出來(lái)的對(duì)象應(yīng)該都會(huì)具有這個(gè)原型的特性。事實(shí)上，在構(gòu)造函數(shù)的prototype上定義的所有屬性和方法，都是可以通過(guò)其構(gòu)造的對(duì)象直接訪問(wèn)和調(diào)用的。也可以這么說(shuō)，prototype提供了一群同類對(duì)象共享屬性和方法的機(jī)制。我們先來(lái)看看下面

14、的代碼：function Person(name)=name；/設(shè)置對(duì)象屬性，每個(gè)對(duì)象各自一份屬性數(shù)據(jù)；Ptotype.SayHello=function()/給Person函數(shù)的prototype添加SayHello方法。alert(Hello,Im+)；var BillGates=new Person(Bill Gates)；/創(chuàng)建BillGates對(duì)象var SteveJobs=new Person(Steve Jobs)；/創(chuàng)建SteveJobs對(duì)象BillGates.SayHello()；/通過(guò)BillGates對(duì)象直接調(diào)用到Sa

15、yHello方法SteveJobs.SayHello()；/通過(guò)SteveJobs對(duì)象直接調(diào)用到SayHello方法alert(BillGates.SayHello=SteveJobs.SayHello)；/因?yàn)閮蓚€(gè)對(duì)象是共享prototype的SayHello，所以顯示：true程序運(yùn)行的結(jié)果表明，構(gòu)造函數(shù)的prototype上定義的方法確實(shí)可以通過(guò)對(duì)象直接調(diào)用到，而且代碼是共享的。顯然，把方法設(shè)置到prototype的寫(xiě)法顯得優(yōu)雅多了，盡管調(diào)用形式?jīng)]有變，但邏輯上卻體現(xiàn)了方法與類的關(guān)系，相對(duì)前面的寫(xiě)法，更容易理解和組織代碼。那么，對(duì)于多層次類型的構(gòu)造函數(shù)情況又如何呢?然而，比靜態(tài)對(duì)象語(yǔ)言更

16、神奇的是，我們可以隨時(shí)給原型對(duì)象動(dòng)態(tài)添加新的屬性和方法，從而動(dòng)態(tài)地?cái)U(kuò)展基類的功能特性。這在靜態(tài)對(duì)象語(yǔ)言中是很難想象的。我們來(lái)看下面的代碼：以下是引用片段：function Person(name)=name；Ptotype.SayHello=function()/建立對(duì)象前定義的方法alert(Hello,Im+)；var BillGates=new Person(Bill Gates)；/建立對(duì)象BillGates.SayHello()；Ptotype.Retire=function()/建立對(duì)象后再動(dòng)態(tài)擴(kuò)展原型的方法a

17、lert(Poor++,bye bye！)；BillGates.Retire()；/動(dòng)態(tài)擴(kuò)展的方法即可被先前建立的對(duì)象立即調(diào)用阿彌佗佛，原型繼承竟然可以玩出有這樣的法術(shù)！原型擴(kuò)展想必君的悟性極高，可能你會(huì)這樣想：如果在JavaScript內(nèi)置的那些如Object和Function等函數(shù)的prototype上添加些新的方法和屬性，是不是就能擴(kuò)展JavaScript的功能呢?那么，恭喜你，你得到了！在AJAX技術(shù)迅猛發(fā)展的今天，許多成功的AJAX項(xiàng)目的JavaScript運(yùn)行庫(kù)都大量擴(kuò)展了內(nèi)置函數(shù)的prototype功能。比如微軟的ASP.NET AJAX，就給這些內(nèi)置函數(shù)及其p

18、rototype添加了大量的新特性，從而增強(qiáng)了JavaScript的功能。我們來(lái)看一段摘自MicrosoftAjax.debug.js中的代碼：Stotype.trim=function String$trim()if(arguments.length！=0)throw Error.parameterCount()；return this.replace(/s+|s+$/g,)；這段代碼就是給內(nèi)置String函數(shù)的prototype擴(kuò)展了一個(gè)trim方法，于是所有的String類對(duì)象都有了trim方法了。有了這個(gè)擴(kuò)展，今后要去除字符串兩段的空白，就不用再分別處理了，因?yàn)槿魏巫?/p>

19、符串都有了這個(gè)擴(kuò)展功能，只要調(diào)用即可，真的很方便。當(dāng)然，幾乎很少有人去給Object的prototype添加方法，因?yàn)槟菚?huì)影響到所有的對(duì)象，除非在你的架構(gòu)中這種方法的確是所有對(duì)象都需要的。前兩年，微軟在設(shè)計(jì)AJAX類庫(kù)的初期，用了一種被稱為閉包(closure)的技術(shù)來(lái)模擬類。其大致模型如下：以下是引用片段：function Person(firstName,lastName,age)/私有變量：var _firstName=firstName；var _lastName=lastName；/公共變量：this.age=age；/方法：this.getName=function()return

20、(firstName+lastName)；this.SayHello=function()alert(Hello,Im+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)；/這里不能訪問(wèn)到私有變量很顯然，這種模型的類描述特別象C#語(yǔ)

21、言的描述形式，在一個(gè)構(gòu)造函數(shù)里依次定義了私有成員、公共屬性和可用的方法，顯得非常優(yōu)雅嘛。特別是閉包機(jī)制可以模擬對(duì)私有成員的保護(hù)機(jī)制，做得非常漂亮。所謂的閉包，就是在構(gòu)造函數(shù)體內(nèi)定義另外的函數(shù)作為目標(biāo)對(duì)象的方法函數(shù)，而這個(gè)對(duì)象的方法函數(shù)反過(guò)來(lái)引用外層外層函數(shù)體中的臨時(shí)變量。這使得只要目標(biāo)對(duì)象在生存期內(nèi)始終能保持其方法，就能間接保持原構(gòu)造函數(shù)體當(dāng)時(shí)用到的臨時(shí)變量值。盡管最開(kāi)始的構(gòu)造函數(shù)調(diào)用已經(jīng)結(jié)束，臨時(shí)變量的名稱也都消失了，但在目標(biāo)對(duì)象的方法內(nèi)卻始終能引用到該變量的值，而且該值只能通這種方法來(lái)訪問(wèn)。即使再次調(diào)用相同的構(gòu)造函數(shù)，但只會(huì)生成新對(duì)象和方法，新的臨時(shí)變量只是對(duì)應(yīng)新的值，和上次那次調(diào)用的是各

22、自獨(dú)立的。的確很巧妙！但是前面我們說(shuō)過(guò)，給每一個(gè)對(duì)象設(shè)置一份方法是一種很大的浪費(fèi)。還有，閉包這種間接保持變量值的機(jī)制，往往會(huì)給JavaSript的垃圾回收器制造難題。特別是遇到對(duì)象間復(fù)雜的循環(huán)引用時(shí)，垃圾回收的判斷邏輯非常復(fù)雜。無(wú)獨(dú)有偶，IE瀏覽器早期版本確實(shí)存在JavaSript垃圾回收方面的內(nèi)存泄漏問(wèn)題。再加上閉包模型在性能測(cè)試方面的表現(xiàn)不佳，微軟最終放棄了閉包模型，而改用原型模型。正所謂有得必有失嘛。原型模型需要一個(gè)構(gòu)造函數(shù)來(lái)定義對(duì)象的成員，而方法卻依附在該構(gòu)造函數(shù)的原型上。大致寫(xiě)法如下：/定義構(gòu)造函數(shù)function Person(name)=name；/在構(gòu)造函數(shù)中

23、定義成員；/方法定義到構(gòu)造函數(shù)的prototype上Ptotype.SayHello=function()alert(Hello,Im+)；/子類構(gòu)造函數(shù)function Employee(name,salary)Person.call(this,name)；/調(diào)用上層構(gòu)造函數(shù)this.salary=salary；/擴(kuò)展的成員；/子類構(gòu)造函數(shù)首先需要用上層構(gòu)造函數(shù)來(lái)建立prototype對(duì)象，實(shí)現(xiàn)繼承的概念Etotype=new Person()/只需要其prototype的方法，此對(duì)象的成員沒(méi)有任何意義！/子類方法也定義到構(gòu)造函數(shù)之上

24、Etotype.ShowMeTheMoney=function()alert(+$+this.salary)；var BillGates=new Person(Bill Gates)；BillGates.SayHello()；var SteveJobs=new Employee(Steve Jobs,1234)；SteveJobs.SayHello()；SteveJobs.ShowMeTheMoney()；原型類模型雖然不能模擬真正的私有變量，而且也要分兩部分來(lái)定義類，顯得不怎么優(yōu)雅。不過(guò)，對(duì)象間的方法是共享的，不會(huì)遇到垃圾回收問(wèn)題，而且性能優(yōu)于閉包模型

25、。正所謂有失必有得嘛。在原型模型中，為了實(shí)現(xiàn)類繼承，必須首先將子類構(gòu)造函數(shù)的prototype設(shè)置為一個(gè)父類的對(duì)象實(shí)例。創(chuàng)建這個(gè)父類對(duì)象實(shí)例的目的就是為了構(gòu)成原型鏈，以起到共享上層原型方法作用。但創(chuàng)建這個(gè)實(shí)例對(duì)象時(shí)，上層構(gòu)造函數(shù)也會(huì)給它設(shè)置對(duì)象成員，這些對(duì)象成員對(duì)于繼承來(lái)說(shuō)是沒(méi)有意義的。雖然，我們也沒(méi)有給構(gòu)造函數(shù)傳遞參數(shù)，但確實(shí)創(chuàng)建了若干沒(méi)有用的成員，盡管其值是undefined，這也是一種浪費(fèi)啊。唉！世界上沒(méi)有完美的事情??！那么，我們能否自己定義一個(gè)對(duì)象來(lái)當(dāng)作原型，并在這個(gè)原型上描述類，然后將這個(gè)原型設(shè)置給新創(chuàng)建的對(duì)象，將其當(dāng)作對(duì)象的類呢?我們又能否將這個(gè)原型中的一個(gè)方法當(dāng)作構(gòu)造函數(shù)，去初始

26、化新建的對(duì)象呢?例如，我們定義這樣一個(gè)原型對(duì)象：var Person=/定義一個(gè)對(duì)象來(lái)作為原型類Create：function(name,age)/這個(gè)當(dāng)構(gòu)造函數(shù)=name；this.age=age；,SayHello：function()/定義方法alert(Hello,Im+)；,HowOld：function()/定義方法alert(+is+this.age+years old.)；這個(gè)JSON形式的寫(xiě)法多么象一個(gè)C#的類??！既有構(gòu)造函數(shù)，又有各種方法。如果可以用某種形式來(lái)創(chuàng)建對(duì)象，并將對(duì)象的內(nèi)置的原型設(shè)置為上面這個(gè)類對(duì)象，不就相當(dāng)于

27、創(chuàng)建該類的對(duì)象了嗎?但遺憾的是，我們幾乎不能訪問(wèn)到對(duì)象內(nèi)置的原型屬性！盡管有些瀏覽器可以訪問(wèn)到對(duì)象的內(nèi)置原型，但這樣做的話就只能限定了用戶必須使用那種瀏覽器。這也幾乎不可行。那么，我們可不可以通過(guò)一個(gè)函數(shù)對(duì)象來(lái)做媒介，利用該函數(shù)對(duì)象的prototype屬性來(lái)中轉(zhuǎn)這個(gè)原型，并用new操作符傳遞給新建的對(duì)象呢?其實(shí)，象這樣的代碼就可以實(shí)現(xiàn)這一目標(biāo)：function anyfunc()；/定義一個(gè)函數(shù)軀殼totype=Person；/將原型對(duì)象放到中轉(zhuǎn)站prototype var BillGates=new anyfunc()；/新建對(duì)象的內(nèi)置原型將是我們期望的原型對(duì)象不過(guò)，這個(gè)anyfunc函數(shù)只是一個(gè)軀殼，在使用過(guò)這個(gè)軀殼之后它就成了多余的東西了，而且這和直接使用構(gòu)造函數(shù)來(lái)創(chuàng)建對(duì)象也沒(méi)啥不同，有點(diǎn)不爽?？墒?，如果我們將這些代碼寫(xiě)成一個(gè)通用函數(shù)，而那個(gè)函數(shù)軀殼也就成了函數(shù)內(nèi)的函數(shù)，這