ajax實(shí)戰(zhàn)之jquery深度開(kāi)發(fā)對(duì)象與原型

1、對(duì)象與原型Ajax實(shí)戰(zhàn)之jQuery深度開(kāi)發(fā)java與c#語(yǔ)言都是class-based程序語(yǔ)言,它們的面向?qū)ο箝_(kāi)發(fā)分為兩個(gè)步驟：（1）定義一個(gè)class（2）實(shí)例化這個(gè)class到object,并使用它特點(diǎn)：class一旦定義不能再改，object的所有成員遵循class的定義Javascript中沒(méi)有class的概念， javascript是屬于prototype-based程序語(yǔ)言,都是直接通過(guò)構(gòu)造函數(shù)創(chuàng)建對(duì)象區(qū)別：javascript中所有的東西都是對(duì)象，它沒(méi)有類的概念，所以可以通過(guò)對(duì)象本身任意擴(kuò)充成員，如果使用prototype原型對(duì)象，那么此函數(shù)對(duì)應(yīng)的所有對(duì)象副本將都會(huì)得到。一、j

2、avascript的面向?qū)ο蟾攀?可以采用構(gòu)造函數(shù)用于定義一個(gè)對(duì)象，比如：function person(name) = name; newperson = new person(張三);alert();二、創(chuàng)建對(duì)象javascript中的一切都是Object，他們的實(shí)例和構(gòu)造器，都是Object。Object是一個(gè)：無(wú)序的成員集合它是一個(gè)集合，說(shuō)明它包含0-n個(gè)成員。而它是無(wú)序的。每一個(gè)成員由以下3個(gè)部分組成：名稱、值、特征集合比如:上面的例子就有一個(gè)鍵值對(duì):key: value:namejavascript的對(duì)象成員可能包含下面幾種特征,形成特征集合,注意：如下的內(nèi)容是不能直接在對(duì)象上操作

3、的，羅列此特征集合是為了讓你更深入的了解javascript對(duì)象的本質(zhì)。如下:ReadOnly：擁有這個(gè)特征的成員是不能被程序修改的。DontEnum：擁有這個(gè)特征的成員是不能被for in遍歷的。DontDelete：擁有這個(gè)特征的成員是不能被delete操作刪除的。Internal：代表這個(gè)成員是內(nèi)部成員。通常內(nèi)部成員不能被程序以任何方式訪問(wèn)，但是有些javascript的引擎實(shí)現(xiàn)將它以特殊方式暴露，使得可以訪問(wèn)對(duì)象的某些內(nèi)部成員。2.1、什么是對(duì)象一個(gè)對(duì)象的Internal成員可能有如下的成員，用xxxx的方式來(lái)表示:Class：表示該對(duì)象的類型。比如function Object的Cl

4、ass 值是“Function“,string Object的Class是String,普通Object的值是ObjectGet(PropertyName)：獲取對(duì)象的屬性值。DefaultValue(Hint)：用于隱式轉(zhuǎn)換。hint參數(shù)可能的值為string或number“.Prototype：Prototype成員實(shí)現(xiàn)了javascript中所謂的“原型鏈”。一個(gè)對(duì)象的Prototype成員可能是object對(duì)象，或者是null。只有Ototype為null,這樣就形成了一個(gè)基于原型鏈的繼承關(guān)系,Object對(duì)象是所有對(duì)象的祖先(原型鏈終點(diǎn)).Call：function

5、 Object特有的成員，在函數(shù)被調(diào)用的時(shí)候，就是調(diào)用的Call。Construct：function Object特有的成員，在函數(shù)作為構(gòu)造器，被new操作符用于創(chuàng)建對(duì)象的時(shí)候，就是調(diào)用的Construct。Scope：簡(jiǎn)單來(lái)說(shuō)就是變量的作用域。2.1.1、Internal成員事實(shí)上Object對(duì)象是所有的對(duì)象的祖先， Object提供了所有對(duì)象通用的功能，比如可以創(chuàng)建一個(gè)字符串： v1=new Object(aa); 效果與new String(“aa”)一樣Object既為所有對(duì)象的原型，也可以直接使用,但是意義不大，比如： newobject = new Object(); perty

6、1 = aa;見(jiàn)備注中的Object創(chuàng)建對(duì)象的例子2.2、Object對(duì)象語(yǔ)法如下：with(對(duì)象)屬性1=value1;屬性2=value2;好處：一次定義，在括弧內(nèi)多不用重復(fù)使用見(jiàn)備注中的一段例子2.3 With對(duì)象語(yǔ)句的使用語(yǔ)法如下：for(prop in obj)objprop;說(shuō)明：可以遍歷對(duì)象的所有屬性見(jiàn)備注中的一段例子2.4 for/in語(yǔ)句的使用當(dāng)一個(gè)內(nèi)置對(duì)象被實(shí)例化之后,它的構(gòu)造函數(shù)就是對(duì)應(yīng)的內(nèi)置對(duì)象的構(gòu)造函數(shù): aa = aa; document.write(aa.constructor); /function String() native code 每個(gè)內(nèi)置對(duì)象都有自己

7、的構(gòu)造函數(shù)2.5 關(guān)于內(nèi)置函數(shù)的再思考使用Object對(duì)象并不能很好的表達(dá)對(duì)象的意義,所以可以采用構(gòu)造函數(shù)來(lái)實(shí)現(xiàn),如下:function nameCard(name,age,phone,email) = name; this.age = age; this.phone = phone; this.email = email;var objMyCard = new nameCard(張三, 33, 02-22222222, );var objCard = new nameCard(); / 建立對(duì)象objC = 江小魚(yú);objCard.age = 25;objCard.phone = 02-33

8、333333;objCard.email = “”;/注意屬性可以自擴(kuò)展2.6 自定義對(duì)象通過(guò)構(gòu)造函數(shù)來(lái)實(shí)現(xiàn)通過(guò)constructor屬性獲得構(gòu)造函數(shù)除了Math對(duì)象外，都可以通過(guò)constructor返回的各自的構(gòu)造函數(shù),比如:aa=1; /function Number() native code aa=aa; /function String() native code aa=true; /function Boolean() native code aa=function person()=test /function Function() native code aa=new per

9、son(); /function person()=test javascript可以對(duì)constructor返回的內(nèi)容直接判斷，比如：aa=1;document.write(aa.constructor=Number);construnctor針對(duì)對(duì)象而言，對(duì)于內(nèi)置對(duì)象的判斷要實(shí)例化,如下：document.write(new Object().constructor);/function Object() native code document.write(new Function().constructor);/function Function() native code docum

10、ent.write(new String().constructor);/function String() native code document.write(new Number().constructor);/function Number() native code document.write(new Boolean().constructor);/function Boolean() native code document.write(new Array().constructor);/function Array() native code document.write(ne

11、w RegExp().constructor);/function RegExp() native code document.write(new Date().constructor);/function Date() native code document.write(new Error().constructor);/ function Error() native code 2.7 construct構(gòu)造器toString()方法：將對(duì)象轉(zhuǎn)換為字符串對(duì)于：v2=function add(a,b)return a+b;v1=new String(aa);則:add. toString(

12、)是function的具體內(nèi)容，v2. toString()是function的具體內(nèi)容String. toString()是String構(gòu)造函數(shù)而v1. toString()則是字符串a(chǎn)avalueOf()方法：傳回對(duì)象值對(duì)于：v2=function add(a,b)return a+b;v1=new Object(2);則:add. valueOf()是function的具體內(nèi)容，v2. valueOf()是function的具體內(nèi)容Object. valueOf()是Object構(gòu)造函數(shù)而v1. valueOf()則是數(shù)值22.8 對(duì)象的一些通用的方法通過(guò)將給屬性賦function可以為

13、對(duì)象增加方法，如下：/ 對(duì)象的構(gòu)造函數(shù)function nameCard(name,age,phone,email) = name; this.age = age; this.phone = phone; this.email = email; this.print = printCard;/ 對(duì)象方法function printCard() document.write(姓名 : + + );/ 建立自定義對(duì)象var objMyCard = new nameCard(“test, 33, 02-22222222, );objMyCard.print();2.9、新增加對(duì)象的方法對(duì)象的屬性可以

14、擁有另一個(gè)子對(duì)象，例如：function nameCard(name,age,phone,email)=name;this.age=age;this.phone=new phoneList(phone,N/A);this.email=email;其中phoneList的構(gòu)造函數(shù)如下：function phoneList(homephone,cellphone)this.homephone=homephone;this.cellphone=cellphone;phoneList的cellphone還可以通過(guò)下面的語(yǔ)法進(jìn)行修改：objMyCard.phone.cellphone=“9”;見(jiàn)備注中的

15、演示代碼2.10、對(duì)象嵌套比如：function person(name,phone)=name,this.phone=phoneoneperson=new person(張三,);創(chuàng)建一個(gè)對(duì)象的步驟為：1)解析器在遇到function declaration或者function expression的時(shí)候，會(huì)創(chuàng)建一個(gè)Function Object。2) 解析形參和函數(shù)體3) 設(shè)置Function對(duì)象的Class、Prototype、Call、Construct、Scope、length屬性4) 創(chuàng)建一個(gè)Object對(duì)象5) 設(shè)置Object對(duì)象的constructor屬性為function

16、person(name,phone)=name,this.phone=phone 6) 設(shè)置Function的prototype屬性為name,phone,還有一個(gè)原型鏈指向Object.注意：1、Object對(duì)象作為原型鏈的最終點(diǎn)，他的prototype屬性為Null，所以O(shè)bject是所有對(duì)象的祖先。 2、只有function才有原型（prototype），對(duì)于object本身是通過(guò)constructor指向的構(gòu)造函數(shù)獲取prototype中的屬性。三、函數(shù)我們發(fā)現(xiàn)創(chuàng)建函數(shù)有如下幾種方式： /創(chuàng)建一個(gè)func1的函數(shù)function func1(a,b)alert(a+b);/創(chuàng)建一個(gè)匿名

17、函數(shù)，并賦給func2var func2=function(a,b)alert(a+b)/創(chuàng)建一個(gè)func4函數(shù)，并賦值給func3var func3=function func4(a,b)alert(a+b)/建立Function對(duì)象var func5=new Function(a,b,alert(a+b)注意：一、函數(shù)還可以表示為:var fun6=; /創(chuàng)建一個(gè)沒(méi)有內(nèi)容的匿名構(gòu)造函數(shù)（即對(duì)象），并賦值給fun6,使用時(shí)不需要實(shí)例化二、如果表示為：var fun6=a:1,b:2,則還初始了兩個(gè)屬性a,b，分別是1和23.1、函數(shù)的表現(xiàn)形式傳統(tǒng)的函數(shù)其實(shí)是作為window對(duì)象的一個(gè)方法使用

18、，比如： function add(a, b) return a + b; 還可以作為構(gòu)造函數(shù)來(lái)使用，比如：var fun7 =new function(a,b)return a+b;，不過(guò)這個(gè)時(shí)候fun7不是函數(shù)了，而是一個(gè)對(duì)象，所以使用的時(shí)候一定要這么調(diào)用：alert(fun7.constructor(1,2);如果對(duì)函數(shù)做了new操作，相當(dāng)于建立了一個(gè)副本，如：var fun7 = function add(a, b) return a + b; newfun7 = new add(1, 2); alert(newfun7.constructor(1,2);3.1.1、傳統(tǒng)的函數(shù)的再思考

19、JSON即JavaScript Object Natation，它是一種輕量級(jí)的數(shù)據(jù)交換的文本格式。其作用是提供結(jié)構(gòu)化數(shù)據(jù)的一種表示，而不依賴于所用的語(yǔ)言和平臺(tái)。使用這種格式，可以在不同語(yǔ)言編寫(xiě)的應(yīng)用程序之間交換數(shù)據(jù)，而且可以在不同機(jī)器上運(yùn)行應(yīng)用程序。與XML相比（這可能是最著名的數(shù)據(jù)交換格式），JSON的語(yǔ)法很簡(jiǎn)潔。這說(shuō)明，通過(guò)網(wǎng)絡(luò)傳輸JSON數(shù)據(jù)通常需要更少的帶寬。3.2.2： 使用JSON格式一段xml如下： 1 Jackson Welcome to W 2 Relkn W關(guān)注互聯(lián)網(wǎng)新技術(shù) JSON結(jié)構(gòu)如下：json表示：代碼: items:id:1,author:Jackson,url

20、:,content:Welcome to W,id:2,author:Relkn,url:,content:W關(guān)注互聯(lián)網(wǎng)新技術(shù); var func5=new Function(“a”,“b”,“alert(a+b)”) 這種方式實(shí)際是一種json的表示方式構(gòu)造函數(shù)也可以表示成這種形式，比如： var customer=firstName:John,lastName:Doe;1,對(duì)象:name:Peggy,email:,homepage: 屬性 : 值 , 屬性 : 值 , 屬性 : 值 2,數(shù)組是有順序的值的集合。一個(gè)數(shù)組開(kāi)始于，結(jié)束于，值之間用,分隔。name:Peggy,email:,ho

21、mepage:, name:Peggy,email:,homepage:,name:Peggy,email:,homepage:3, 值可以是字符串、數(shù)字、true、false、null，也可以是對(duì)象或數(shù)組。這些結(jié)構(gòu)都能嵌套。3.2.2： 使用JSON格式簡(jiǎn)單 JSON 示例按照最簡(jiǎn)單的形式，可以用下面這樣的 JSON 表示名稱/值對(duì)： firstName: Brett 這個(gè)示例非?；荆覍?shí)際上比等效的純文本名稱/值對(duì)占用更多的空間：firstName=Brett 但是，當(dāng)將多個(gè)名稱/值對(duì)串在一起時(shí)，JSON 就會(huì)體現(xiàn)出它的價(jià)值了。首先，可以創(chuàng)建包含多個(gè)名稱/值對(duì)的記錄，比如： first

22、Name: Brett, lastName:McLaughlin, email: 從語(yǔ)法方面來(lái)看，這與名稱/值對(duì)相比并沒(méi)有很大的優(yōu)勢(shì)，但是在這種情況下 JSON 更容易使用，而且可讀性更好。例如，它明確地表示以上三個(gè)值都是同一記錄的一部分；花括號(hào)使這些值有了某種聯(lián)系。值的數(shù)組當(dāng)需要表示一組值時(shí)，JSON 不但能夠提高可讀性，而且可以減少?gòu)?fù)雜性。例如，假設(shè)您希望表示一個(gè)人名列表。在 XML 中，需要許多開(kāi)始標(biāo)記和結(jié)束標(biāo)記；如果使用典型的名稱/值對(duì)（就像在本系列前面文章中看到的那種名稱/值對(duì)），那么必須建立一種專有的數(shù)據(jù)格式，或者將鍵名稱修改為 person1-firstName 這樣的形式。如果

23、使用 JSON，就只需將多個(gè)帶花括號(hào)的記錄分組在一起： people: firstName: Brett, lastName:McLaughlin, email: , firstName: Jason, lastName:Hunter, email: , firstName: Elliotte, lastName:Harold, email: 這不難理解。在這個(gè)示例中，只有一個(gè)名為 people 的變量，值是包含三個(gè)條目的數(shù)組，每個(gè)條目是一個(gè)人的記錄，其中包含名、姓和電子郵件地址。上面的示例演示如何用括號(hào)將記錄組合成一個(gè)值。當(dāng)然，可以使用相同的語(yǔ)法表示多個(gè)值（每個(gè)值包含多個(gè)記錄）： progr

24、ammers: firstName: Brett, lastName:McLaughlin, email: , firstName: Jason, lastName:Hunter, email: , firstName: Elliotte, lastName:Harold, email: ,authors: firstName: Isaac, lastName: Asimov, genre: science fiction , firstName: Tad, lastName: Williams, genre: fantasy , firstName: Frank, lastName: Per

25、etti, genre: christian fiction ,musicians: firstName: Eric, lastName: Clapton, instrument: guitar , firstName: Sergei, lastName: Rachmaninoff, instrument: piano 這里最值得注意的是，能夠表示多個(gè)值，每個(gè)值進(jìn)而包含多個(gè)值。但是還應(yīng)該注意，在不同的主條目（programmers、authors 和 musicians）之間，記錄中實(shí)際的名稱/值對(duì)可以不一樣。JSON 是完全動(dòng)態(tài)的，允許在 JSON 結(jié)構(gòu)的中間改變表示數(shù)據(jù)的方式。在 Java

26、Script 中使用 JSON掌握了 JSON 格式之后，在 JavaScript 中使用它就很簡(jiǎn)單了。JSON 是 JavaScript 原生格式，這意味著在 JavaScript 中處理 JSON 數(shù)據(jù)不需要任何特殊的 API 或工具包。將 JSON 數(shù)據(jù)賦值給變量例如，可以創(chuàng)建一個(gè)新的 JavaScript 變量，然后將 JSON 格式的數(shù)據(jù)字符串直接賦值給它（見(jiàn)備注）訪問(wèn)數(shù)據(jù)盡管看起來(lái)不明顯，但是上面的長(zhǎng)字符串實(shí)際上只是一個(gè)數(shù)組；將這個(gè)數(shù)組放進(jìn) JavaScript 變量之后，就可以很輕松地訪問(wèn)它。實(shí)際上，只需用點(diǎn)號(hào)表示法來(lái)表示數(shù)組元素。所以，要想訪問(wèn) programmers 列表的第

27、一個(gè)條目的姓氏，只需在 JavaScript 中使用下面這樣的代碼： grammers0.lastName; 注意，數(shù)組索引是從零開(kāi)始的。所以，這行代碼首先訪問(wèn) people 變量中的數(shù)據(jù)；然后移動(dòng)到稱為 programmers 的條目，再移動(dòng)到第一個(gè)記錄（0）；最后，訪問(wèn) lastName 鍵的值。結(jié)果是字符串值 “McLaughlin”。下面是使用同一變量的幾個(gè)示例。 people.authors1.genre / Value is fantasy people.musicians3.lastName / Undefined. This refers to the fourth entry

28、, and there isnt one grammers.2.firstName / Value is Elliotte 利用這樣的語(yǔ)法，可以處理任何 JSON 格式的數(shù)據(jù)，而不需要使用任何額外的 JavaScript 工具包或 API。修改 JSON 數(shù)據(jù)正如可以用點(diǎn)號(hào)和括號(hào)訪問(wèn)數(shù)據(jù)，也可以按照同樣的方式輕松地修改數(shù)據(jù)：people.musicians1.lastName = Rachmaninov;JSON對(duì)象和JSON字符串為了方便地處理JSON數(shù)據(jù)，JSON提供了json.js包，下載地址：在數(shù)據(jù)傳輸過(guò)程中，json是以文本，即字符串的形式傳遞的，而JS操作的是JSON對(duì)象，所以，J

29、SON對(duì)象和JSON字符串之間的相互轉(zhuǎn)換是關(guān)鍵 例如： JSON字符串: var str1 = name: cxh, sex: man ;JSON對(duì)象: var str2 = name: cxh, sex: man ;JSON對(duì)象和JSON字符串一、JSON字符串轉(zhuǎn)換為JSON對(duì)象要使用上面的str1，必須使用下面的方法先轉(zhuǎn)化為JSON對(duì)象：var obj = eval( + str + ); /由JSON字符串轉(zhuǎn)換為JSON對(duì)象或者var obj = str.parseJSON(); /由JSON字符串轉(zhuǎn)換為JSON對(duì)象或者var obj = JSON.parse(str); /由JSON字

30、符串轉(zhuǎn)換為JSON對(duì)象然后，就可以這樣讀?。夯蛘遪ew Function形式function strToJson(str)var json = (new Function(return + str)(); return json; Alert();Alert(obj.sex);特別注意：如果obj本來(lái)就是一個(gè)JSON對(duì)象，那么使用eval（）函數(shù)轉(zhuǎn)換后（哪怕是多次轉(zhuǎn)換）還是JSON對(duì)象，但是使用parseJSON（）函數(shù)處理后會(huì)有問(wèn)題（拋出語(yǔ)法異常）。 JSON對(duì)象和JSON字符串二、可以使用toJSONString()或者全局方法JSON.stringify()將JSON對(duì)象轉(zhuǎn)化為JSON字

31、符串。例如：var last=obj.toJSONString(); /將JSON對(duì)象轉(zhuǎn)化為JSON字符或者var last=JSON.stringify(obj); /將JSON對(duì)象轉(zhuǎn)化為JSON字符alert(last);JavaScript中的prototype，標(biāo)準(zhǔn)翻譯為“原型”，表示對(duì)象的初始形態(tài)每個(gè)函數(shù)對(duì)象都擁有prototype屬性，此屬性返回一個(gè)prototype對(duì)象，prototype對(duì)象的屬性會(huì)被所有的對(duì)象副本所繼承，使用prototype屬性的優(yōu)點(diǎn)如下：使用prototype對(duì)象擴(kuò)展對(duì)象，可以大量減少對(duì)象使用的內(nèi)存空間不論對(duì)象是否已經(jīng)建立副本，都可以使用prototype

32、屬性擴(kuò)展對(duì)象的屬性和方法見(jiàn)備注中的代碼四、prototype理解prototype的機(jī)制見(jiàn)備注代碼要理解prototype的機(jī)制就必須要了解JavaScript中function的創(chuàng)建方式。當(dāng)代碼執(zhí)行到function Staff(name) = name;時(shí)，相當(dāng)于執(zhí)行var Staff = new Function(“name”, = name”)解釋器將使用預(yù)定義好的Function() constructor，來(lái)創(chuàng)建一個(gè)function類型的object出來(lái)，即Staff。 隨后給創(chuàng)建好的Staff對(duì)象添加_proto_屬性，并賦值為Function的構(gòu)造器的prototype，這一步

33、是所有對(duì)象創(chuàng)建過(guò)程中都有的步驟，在執(zhí)行類似var x = new X()方式是，都會(huì)把X的prototype賦值給x的_proto_Staff._proto_ = Ftotype; 接下來(lái)給Staff創(chuàng)建prototype屬性，這一步是創(chuàng)建function類型的對(duì)象具有的步驟var o = new Object();o.constructor = Base;Stotype = o; 理解prototype的機(jī)制如上的分析我們可知，當(dāng)創(chuàng)建對(duì)象時(shí)，會(huì)創(chuàng)建一個(gè)私有屬性_proto_，當(dāng)創(chuàng)建function是會(huì)創(chuàng)建一個(gè)prototype屬性。因?yàn)镾taff是一個(gè)function類型的對(duì)象，所以會(huì)同時(shí)具

34、有這兩個(gè)屬性。這兩個(gè)屬性是構(gòu)建原型鏈的關(guān)鍵屬性。我們來(lái)分析執(zhí)行代碼 var staff1 = new Staff(“hunter”)時(shí)，原型是如何傳遞的。根據(jù)如上分析，staff1._proto_ = Stotype，而Stotype又是一個(gè)由Object創(chuàng)建的對(duì)象，即Stotype._proto_ = Ototype，所以staff1._proto_ ._proto_ 指向的是Ototype，即staff1._proto_ ._proto_ = Ototype，這就是原型鏈，當(dāng)要讀取某個(gè)對(duì)象的屬性時(shí)，JS首先找對(duì)象本身是否有這個(gè)屬性，如果沒(méi)有就會(huì)順著原型鏈一直尋找這個(gè)屬性。知道了原型鏈的原理

35、，那么就很容易根據(jù)這個(gè)原理來(lái)構(gòu)建Javascript中的對(duì)象繼承。由如上的分析，我們可知原型鏈的頂端都是Ototype，這就意味著在構(gòu)建的繼承關(guān)系中Object是所有對(duì)象的基類。prototype屬性的應(yīng)用:假設(shè)我們定義了一個(gè)Circle類,有一個(gè)radius屬性和area方法,實(shí)現(xiàn)如下:Js代碼 function Circle(radius) this.radius = radius; this.area = function() return 3.14 * this.radius * this.radius; var c = new Circle(1); alert(c.area(); /

36、3.14 假設(shè)我們定義了100個(gè)Circle類的實(shí)例對(duì)象,那么每個(gè)實(shí)例對(duì)象都有一個(gè)radius屬性和area方法,實(shí)際上,除了radius屬性,每個(gè)Circle類的實(shí)例對(duì)象的area方法都是一樣,這樣的話,我們就可以把a(bǔ)rea方法抽出來(lái)定義在Circle類的prototype屬性中,這樣所有的實(shí)例對(duì)象就可以調(diào)用這個(gè)方法,從而節(jié)省空間.Js代碼 function Circle(radius) this.radius = radius; Ctotype.area = function() return 3.14 * this.radius * this.radius; var c = new Ci

37、rcle(1); alert(c.area(); /3.14 可以使用prototype增加方法，如：function circle(r, color) this.r = r; this.color = color; this.display = showCircle;function showCircle() document.write(半徑 : + this.r + ); document.write(色彩 : + this.color + ); document.write(圓周率 : + this.PI + );/ 新增Prototype對(duì)象方法function getArea()

38、var result = this.PI * this.r * this.r; document.write(圓面積 : + result + ); var objCircle1 = new circle(2, red);var objCircle2 = new circle(3, green);totype.PI = 3.1415926;totype.area = getArea; objCircle1.display();objCircle1.area(); / 執(zhí)行Prototype方法objCircle2.display();objCircle2.area(); / 執(zhí)行Prototy

39、pe方法4.1、增加原型的方法與屬性原型鏈每個(gè)對(duì)象實(shí)例都有個(gè)屬性成員用于指向到它的instanceof 對(duì)象(暫稱為父對(duì)象)的原型(prototype) 我們把這種層層指向父原型的關(guān)系稱為原型鏈 prototype chian 原型也具有父原型，因?yàn)樗彩且粋€(gè)對(duì)象實(shí)例，除非我們?nèi)藶榈厝ジ淖兯?在JavaScript中，一切都是對(duì)象，函數(shù)是第一型。 Function和Object都是函數(shù)的實(shí)例。 Function的父原型指向到Function的原型，F(xiàn)totype的父原型是Object的原型 Object的父原型也指向到Function的原型，Ototype是所有父原型的頂層原型鏈在火狐瀏覽

40、器中spiderMonkey引擎中，父原型可以通過(guò)Prototype( _proto_ )進(jìn)行訪問(wèn)/Animal構(gòu)造函數(shù) function Animal(name) = name; /Animal原型對(duì)象 Atotype = id:Animal, sleep:function() alert(sleep); var dog = new Animal(旺才); alert(); /旺才 alert(dog.id); /Animal dog.sleep(); /sleep 原型鏈?zhǔn)紫让鞔_一點(diǎn)prototype與prototype并不是同一個(gè)東西。 那先來(lái)看prototype，每一個(gè)函數(shù)對(duì)象都有一個(gè)

41、顯式的prototype屬性，它代表了對(duì)象的原型，更明確的說(shuō)是代表了由函數(shù)對(duì)象（構(gòu)造函數(shù)）所創(chuàng)建出來(lái)的對(duì)象的原型。結(jié)合本例，Atotype就是dog的原型，dog所引用的那個(gè)對(duì)象將從Atotype所引用的對(duì)象那繼承屬性與方法。 每個(gè)對(duì)象都有一個(gè)名為Prototype的內(nèi)部屬性，指向于它所對(duì)應(yīng)的原型對(duì)象。在本例中dog的prototype指向Atotype，大家都知道，Atotype也是一個(gè)對(duì)象，即然是一個(gè)對(duì)象，那它必然也有prototype屬性指向于它所對(duì)應(yīng)的原型對(duì)象，由此便構(gòu)成了一種鏈表的結(jié)構(gòu)，這就是原型鏈的概念。額外要說(shuō)的是：不同的JS引擎實(shí)現(xiàn)者可以將內(nèi)部Prototype屬性命名為任何名

42、字，并且設(shè)置它的可見(jiàn)性，前且只在JS引擎內(nèi)部使用。雖然無(wú)法在JS代碼中訪問(wèn)到內(nèi)部Prototype（FireFox中可以，名字為_(kāi)proto_因?yàn)镸ozilla將它公開(kāi)了），但可以使用對(duì)象的 isPrototypeOf() 方法進(jìn)行測(cè)試，注意這個(gè)方法會(huì)在整個(gè)Prototype鏈上進(jìn)行判斷。 原型鏈例子：Ftotype.hi = function()alert(hi Function);Ototype.hi = function()alert(hi Object);var a = function() this.txt = a;totype = say:function()alert(a);原型

43、鏈alert(a instanceof Function);/a是Function的實(shí)例;alert(a._proto_ = Ftotype);/a的父原型指向到Function的原型;alert(Function instanceof Object);/Function是Object的實(shí)例;alert(Function._proto_ = Ftotype);/Function的父原型指向到Function的原型;alert(Ftotype._proto_ = Ototype);/Function的原型的父原型指向到Object的原型alert(Object._proto_ = Ftotype

44、);/Object的父原型指向到Function的原型;alert(Ototype._proto_);/Object的原型是所有父原型的頂端，它不再具有父原型;alert(totype instanceof Object);/a的原型也是一個(gè)對(duì)象alert(totype._proto_ = Ototype);/a的原型的父原型指向Object的原型原型鏈var A = function();A.prototype = new a();A.prototype.say = function() alert(A);alert(A instanceof Function);/A是Function的實(shí)例

45、alert(A._proto_ = Ftotype);/A的父原型指向到Function的原型alert(A.prototype instanceof a);/A的原型是a的實(shí)例alert(A.prototype._proto_ = totype);/A的原型的父原型指向到a的原型var iA = new A();/iA是A的實(shí)例,iA._proto_ = A.prototypevar iB = new a();/iB是a的實(shí)例,iB._proto_ = totype原型鏈iA.hi();/*iA本身沒(méi)有hi方法（構(gòu)造中沒(méi)有，自己也沒(méi)有定義過(guò)），于是找iA._proto_即A.prototyp

46、e，也沒(méi)有找到，于是再找A.prototype._proto_即totype，仍然沒(méi)有發(fā)現(xiàn)，繼續(xù)查找totype._proto_即Ototype，哇，發(fā)現(xiàn)了hi，于是調(diào)用它，停止查找輸出：hi Object*/iB.hi();/*iB本身沒(méi)有hi方法（構(gòu)造中沒(méi)有，自己也沒(méi)有定義過(guò)），于是找iB._proto_即totype，仍然沒(méi)有發(fā)現(xiàn)，繼續(xù)查找totype._proto_即Ototype，哇，發(fā)現(xiàn)了hi，于是調(diào)用它，停止查找輸出：hi Object*/a.hi();/*a本身沒(méi)有hi方法（構(gòu)造中沒(méi)有，自己也沒(méi)有定義過(guò)），于是找a._proto_既Ftotype，哇，發(fā)現(xiàn)了hi，于是調(diào)用它，停

47、止查找輸出：hi Function*/原型鏈iA.say();/*iA本身沒(méi)有say方法（構(gòu)造中沒(méi)有，自己也沒(méi)有定義過(guò)），于是找iA._proto_即A.prototype，哇，發(fā)現(xiàn)了say，于是調(diào)用它，停止查找所以，這里調(diào)用的是A.prototype.say輸出：A*/iB.say();/*iB本身沒(méi)有say方法（構(gòu)造中沒(méi)有，自己也沒(méi)有定義過(guò)），于是找iB._proto_即totype，哇，發(fā)現(xiàn)了say，于是調(diào)用它，停止查找所以，這里調(diào)用的是totype.say輸出：a*/iA.bad();/*iA本身沒(méi)有bad方法（構(gòu)造中沒(méi)有，自己也沒(méi)有定義過(guò)），于是找iA._proto_即A.proto

48、type，也沒(méi)有找到，于是再找A.prototype._proto_即totype，仍然沒(méi)有發(fā)現(xiàn)，繼續(xù)查找totype._proto_即Ototype，終于是找不到了，停止查找返回錯(cuò)誤，iA.bad不是一個(gè)function*/原型鏈 讓我們?cè)賮?lái)看一個(gè)更加復(fù)雜的示例，他明確的解釋了prototype、prototype（_proto_ ）、原型鏈 見(jiàn)備注代碼原型鏈畫(huà)出相應(yīng)的內(nèi)存圖 javascript的對(duì)象繼承可以將一個(gè)對(duì)象擴(kuò)展成為其他對(duì)象，即不但可以使用對(duì)象作為原型建立其他對(duì)象，還可以擴(kuò)展對(duì)象的屬性和方法對(duì)象的原型形成原型鏈，可以通過(guò)原型鏈實(shí)現(xiàn)對(duì)象的繼承見(jiàn)備注中的代碼五、對(duì)象的繼承因?yàn)镺bje

49、ct對(duì)象是所有原型鏈的最終點(diǎn)，只需要對(duì)Object原型做一個(gè)擴(kuò)展就可以實(shí)現(xiàn)所有對(duì)象的擴(kuò)展,比如：Operty1 = aa;function person(name) = name;newperson = new person(張三);alert(perty1);newsting = new String(aa);alert(perty1);alert(perty1);alert(Fperty1);在javascript中所有的東西都是對(duì)象,所以，幾乎很少有人去給Object的prototype添加方法，因?yàn)槟菚?huì)影響到所有的對(duì)象，除非在你的架構(gòu)中這種方法的確是所有對(duì)象都需要的。五、Object對(duì)

50、象的擴(kuò)展Fucntion對(duì)象也可以進(jìn)行擴(kuò)展。構(gòu)造函數(shù)本身的擴(kuò)展通過(guò)Function對(duì)象的原型來(lái)完成，比如： Fperty1 = aa; function person(name) = name; alert(perty1); alert(Sperty1);但是對(duì)于alert(new person(“張三”).property1),則沒(méi)有影響。六、Function對(duì)象的擴(kuò)展Javascript提供的內(nèi)置對(duì)象作用是有限的，很多開(kāi)源的javascript類庫(kù)都對(duì)內(nèi)置對(duì)象進(jìn)行了擴(kuò)展，當(dāng)我們?cè)陂喿x微軟Ajax類庫(kù)的時(shí)候，發(fā)現(xiàn)對(duì)內(nèi)置對(duì)象做了大量的擴(kuò)展。見(jiàn)備注的代碼。七、其它內(nèi)置對(duì)象的擴(kuò)展function reverse_string() for(var i=(this.length-1); i=0; i-) document.write(this.charA