Javascript對(duì)象定義的幾種方式一.工廠方式:先創(chuàng)建對(duì)象,再向?qū)ο筇砑臃椒ê蛯傩?,封閉后調(diào)用不要使用new操作符創(chuàng)建對(duì)象。
使用這種方法有很多弊端,把方法定義在工廠函數(shù)內(nèi)部的時(shí)候,每次調(diào)用的時(shí)候都會(huì)產(chǎn)生新的函數(shù)function factory(name,person,address,time){ var tmp=new Object; tmp.name=name; tmp.person=person; tmp.address=address; tmp.workTime=function(){ alert("we start to work at" + time); } return tmp;}var factory1=factory("drugs",100,"huashan Rd",10);var factory2=factory("TCMdrugs",100,"hongqiao Rd",11);factory1.workTime();factory2.workTime();//Here,factory1 and factory2 have different method對(duì)這種問(wèn)題雖然可以用下面的方式改進(jìn),但是缺乏很好的封裝性function factory(name,person,address,time){ var tmp=new Object; tmp.name=name; tmp.person=person; tmp.address=address; tmp.workTime=workTime(); return tmp;}function workTime(){ alert("we start to work at" + this.time);}二,構(gòu)造函數(shù)方式,在構(gòu)造函數(shù)內(nèi)部不創(chuàng)建對(duì)象,使用this關(guān)鍵字,使用時(shí)候用new操作符,存在和工廠方式相同的問(wèn)題,重復(fù)創(chuàng)建函數(shù)。function counstruct(name,person,address,time){ this.name=name; this.person=person; this.address=address; this.workTime=function(){ alert("we start to work at" + this.time); };}三.原型方式:利用prototype屬性來(lái)實(shí)現(xiàn)屬性和方法,可以通過(guò)instanceof 檢查對(duì)象類型,解決了重復(fù)創(chuàng)建函數(shù)的問(wèn)題,但不能通過(guò)傳遞參數(shù)初始化屬性function Car(){}Car.prototype.color = "red";Car.prototype.doors = 4;Car.prototype.mpg = 23;Car.prototype.showColor = function(){ alert(this.color);};var car1 = new Car();var car2 = new Car();但是如果遇到下面的情況,又出問(wèn)題了Car.prototype.drivers = new Array("mike", "sue");car1.drivers.push("matt");alert(car1.drivers); //outputs "mike,sue,matt"alert(car2.drivers); //outputs "mike,sue,matt"drivers是指向Array對(duì)象的指針,Car的兩個(gè)實(shí)例都指向同一個(gè)數(shù)組。
四.混合的構(gòu)造函數(shù)/原型方式:針對(duì)原型方式的解決方案function Car(sColor, iDoors, iMpg){ this.color = sColor; this.doors = iDoors; this.mpg = iMpg; this.drivers = new Array("mike", "sue");}Car.prototype.showColor = function (){ alert(this.color);};var car1 = new Car("red", 4, 23);var car2 = new Car("blue", 3, 25);car1.drivers.push("matt");alert(car1.drivers);alert(car2.drivers);五.動(dòng)態(tài)原型方式:這種方式是極力推薦的方式,避免了前面幾種方式所出現(xiàn)的問(wèn)題,提供了更友好的編碼風(fēng)格function Car(sColor, iDoors, iMpg){ this.color = sColor; this.doors = iDoors; this.mpg = iMpg; this.drivers = new Array("mike", "sue"); if(typeof Car.initialized == "undefined"){ Car.prototype.showColor = function (){ alert(this.color); }; Car.initialized = true; }}var car1 = new Car("red", 4, 23);var car2 = new Car("blue", 3, 25);car1.drivers.push("matt");alert(car1.drivers);alert(car2.drivers);六.混合工廠方式:和工廠方式有些相似,但采用new關(guān)鍵字實(shí)例化,具有和工廠方式相同的弊端,不推薦使用。
document的方法如下:(摘自javascript寶典-16章document對(duì)象和body元素對(duì)象) attachEvent(); captureEvent(); clear(); clearAttributes(); close(); createAttribute(); createComment(); (); createElement(); createEvent(); createEventObject(); createRange(); createStyleSheet(); createTextNode(); createTreeWalker(); detachEvent(); elementFrommPoint(); execCommand(); focus(); getElementById(); getElementsByName(); getElementsByTagName(); getSelection(); handleEvent(); hasFocus(); mergeAttributes(); open(); queryCommandEnabled(); queryCommandIndterm(); queryCommandState(); queryCommandSupported(); queryCommandText(); queryCommandValue(); recalc(); releaseCapture(); releaseEvents(); routeEvent(); setActive(); write(); writeln();。
可以參考如下內(nèi)容:第一種模式:工廠方式[javascript] view plain copy print?var lev=function(){ return "啊打"; }; function Parent(){ var Child = new Object(); Child.name="李小龍"; Child.age="30"; Child.lev=lev; return Child; }; var x = Parent(); alert(x.name); alert(x.lev()); 說(shuō)明:1.在函數(shù)中定義對(duì)象,并定義對(duì)象的各種屬性,,雖然屬性可以為方法,但是建議將屬性為方法的屬性定義到函數(shù)之外,這樣可以避免重復(fù)創(chuàng)建該方法2.引用該對(duì)象的時(shí)候,這里使用的是 var x = Parent()而不是 var x = new Parent();因?yàn)楹笳邥?huì)可能出現(xiàn)很多問(wèn)題(前者也成為工廠經(jīng)典方式,后者稱之為混合工廠方式),不推薦使用new的方式使用該對(duì)象3.在函數(shù)的最后返回該對(duì)象4.不推薦使用這種方式創(chuàng)建對(duì)象,但應(yīng)該了解第二種模式:構(gòu)造函數(shù)方式[javascript] view plain copy print?var lev=function(){ return "啊打"; }; function Parent(){ this.name="李小龍"; this.age="30"; this.lev=lev; }; var x =new Parent(); alert(x.name); alert(x.lev()); 說(shuō)明:1.與工廠方式相比,使用構(gòu)造函數(shù)方式創(chuàng)建對(duì)象,無(wú)需再函數(shù)內(nèi)部重建創(chuàng)建對(duì)象,而使用this指代,并而函數(shù)無(wú)需明確return2.同工廠模式一樣,雖然屬性的值可以為方法,扔建議將該方法定義在函數(shù)之外3..同樣的,不推薦使用這種方式創(chuàng)建對(duì)象,但仍需要了解第3種模式:原型模式[javascript] view plain copy print?var lev=function(){ return "啊打"; }; function Parent(){ }; Parent.prototype.name="李小龍"; Parent.prototype.age="30"; Parent.prototype.lev=lev; var x =new Parent(); alert(x.name); alert(x.lev());。
JavaScript中對(duì)象的創(chuàng)建有以下幾種方式:(1)使用內(nèi)置對(duì)象(2)使用JSON符號(hào)(3)自定義對(duì)象構(gòu)造一、使用內(nèi)置對(duì)象JavaScript可用的內(nèi)置對(duì)象可分為兩種:1,JavaScript語(yǔ)言原生對(duì)象(語(yǔ)言級(jí)對(duì)象),如String、Object、Function等;2,JavaScript運(yùn)行期的宿主對(duì)象(環(huán)境宿主級(jí)對(duì)象),如window、document、body等。
我們所說(shuō)的使用內(nèi)置對(duì)象,是指通過(guò)JavaScript語(yǔ)言原生對(duì)象的構(gòu)造方法,實(shí)例化出一個(gè)新的對(duì)象。如:復(fù)制代碼 代碼如下:var str = new String("實(shí)例初始化String");var str1 = "直接賦值的String";var func = new Function("x","alert(x)");//示例初始化funcvar o = new Object();//示例初始化一個(gè)Object二、使用JSON符號(hào)(i)何謂JSON ?JSON (JavaScript ObjectNotation)即JavaScript對(duì)象命名,是一種輕量級(jí)的數(shù)據(jù)交換格式,易于閱讀和編寫,同時(shí)也易于及其解析和生成。
它基于《JavaScript Programming Language, Standard ECMA-262 3rd Edition -December 1999》的一個(gè)子集。JSON是完全獨(dú)立于語(yǔ)言的文本格式,因此成為數(shù)據(jù)交換的理想格式。
JSON作為JavaScript的一個(gè)自己,同時(shí)ActionScript、C、C#、ColdFusion、E、Java、JavaScript、ML、ObjectiveCAML、Perl、PHP、Python、Rebol、Ruby、Lua等一系列的語(yǔ)言都提供支持,使得JSON成為Ajax開發(fā)的首選方案。JSON有兩種構(gòu)建方式,一種是采用簡(jiǎn)單的“鍵/值對(duì)”的集合,在不同的語(yǔ)言中被理解為對(duì)象、記錄、結(jié)構(gòu)、字典、哈希表、有鍵列表,或者關(guān)聯(lián)數(shù)組等,另一種采用有序的值列表,大部分語(yǔ)言把它理解為數(shù)組。
常用的創(chuàng)建方式是第一種,即采用“鍵/值對(duì)”集合的形式。在這種形式下,一個(gè)對(duì)象以“{”(左括號(hào))開始,“}”(右括號(hào))結(jié)束。
每個(gè)“名稱”后跟一個(gè)“:”(冒號(hào)),“'鍵/值' 對(duì)”之間使用“,”(逗號(hào))分隔。JSON具有以下特點(diǎn):(1)簡(jiǎn)單格式化的數(shù)據(jù)交換;(2)易于人們的讀寫習(xí)慣;(3)易于機(jī)器的分析和運(yùn)行。
在JavaScript中,JSON被理解為對(duì)象。通過(guò)字符串形式的JSON,數(shù)據(jù)可以很方便地解析成JavaScript獨(dú)享,并進(jìn)行數(shù)據(jù)的讀取傳遞。
通過(guò)JSON,在一定程度上客服了JavaScript對(duì)象無(wú)法作為參數(shù)系列化傳遞的問(wèn)題。1,簡(jiǎn)單的JSON{name:"劉德華",age:"25",sex:"男"}2,JSON值的類型JSON的值可以是簡(jiǎn)單的數(shù)據(jù)類型,例如數(shù)字、浮點(diǎn)、字符等,也可以是數(shù)組及對(duì)象。
例如以數(shù)組作為member鍵值的JSON:{member:[{name:"劉德華"},{name:"郭富城"},{name:"張學(xué)友"},{name:"黎明"}]}{book:[{name:"三國(guó)演義"},{name:"西游記"},{name:"水滸傳"},{name:"紅樓夢(mèng)"}],author:[{name:"羅貫中"},{name:"吳承恩"},{name:"施耐安",{name:"曹雪芹"}}]}3,在JavaScript中使用JSONJSON是JavaScript原生格式,這意味著在JavaScript中處理JSON數(shù)據(jù)不需要任何特殊的API或者工具包,JavaScript默認(rèn)將JSON當(dāng)做一個(gè)對(duì)象處理。將對(duì)象傳遞給一個(gè)變量,例如:復(fù)制代碼 代碼如下:var somebooks = {book:[{name:"三國(guó)演義"},{name:"西游記"},{name:"水滸傳"},{name:"紅樓夢(mèng)"}],author:[{name:"羅貫中"},{name:"吳承恩"},{name:"施耐安",{name:"曹雪芹"}}]}JSON的每個(gè)“鍵”相當(dāng)于對(duì)象的屬性,例如訪問(wèn)book中的第一個(gè)條目,在JavaScript中,就可以簡(jiǎn)單地使用“somebooks.book[0].name”來(lái)獲取“三國(guó)演義”這個(gè)值。
我們不但可以將一個(gè)JSON字符串轉(zhuǎn)化為對(duì)象,反過(guò)來(lái)將一個(gè)對(duì)象“編譯”為一個(gè)JSON字符串,以方便JavaScript中的對(duì)象的傳輸。例如:復(fù)制代碼 代碼如下:var Animals = new Object();Animals.name = "dog";Animals.sex = "Male";Animals.age = "2";Animals對(duì)象無(wú)法被序列化傳輸,將Animals對(duì)象轉(zhuǎn)化為JSON字符串,也就是“{name:"dog",sex:"Male",age:"2"}”。
這樣,把該JSON字符串作為HTTP請(qǐng)求的一個(gè)參數(shù)傳遞,從而達(dá)到序列化傳輸Animals對(duì)象的目的。(ii)JSON通過(guò)字符串形式來(lái)表達(dá)JavaScript的對(duì)象。
如:復(fù)制代碼 代碼如下:var myObject = {nickname:"my girlfried",name:"bigpig"};JSON實(shí)際上充當(dāng)了一種在JavaScript對(duì)象和字符串之間實(shí)現(xiàn)相互轉(zhuǎn)換的協(xié)議。由于JSON的“外表”可以看成但村的字符串,因此JSON在JavaScript的對(duì)象傳輸方面可以起到一定的作用。
例如把對(duì)象strObject轉(zhuǎn)換成字符串后進(jìn)行傳輸,在達(dá)到目的地后通過(guò)eval方法將其還原成對(duì)象:復(fù)制代碼 代碼如下:function test (o){alert (o.name)}var strObject = '{nickname:"my girlfriend",。
js中的面向?qū)ο竺嫦驅(qū)ο笤趈s里有兩個(gè)層次的含義,第一種是會(huì)使用面向?qū)ο蠛瘮?shù);第二種是構(gòu)造面向?qū)ο蠛瘮?shù)。
js也是面向?qū)ο笾械囊环N寫法,不過(guò)相對(duì)于java,js是一種弱數(shù)據(jù)類型,并不是嚴(yán)格意義上的面向?qū)ο?。但是jq就是使用面向?qū)ο蟮膶懛▌?chuàng)作出來(lái)的js庫(kù)。
面向?qū)ο蟮奶攸c(diǎn)(“抽風(fēng)機(jī)”諧音記憶) 面向?qū)ο笥兴膫€(gè)特點(diǎn): 1. 抽象:抓住核心問(wèn)題 2. 封裝:即把能夠?qū)崿F(xiàn)功能的函數(shù)寫成封裝起來(lái),在面向?qū)ο罄锝凶龇椒?。?jiǎn)單來(lái)說(shuō)就是把實(shí)現(xiàn)功能的函數(shù)寫成方法。
3. 繼承:繼承的意思是,在實(shí)現(xiàn)同一種功能的前提下,新對(duì)象可以使用就對(duì)象的屬性和方法。 4. 多態(tài):一個(gè)變量在引用不同類型的情況下的不同狀態(tài)。
多態(tài)開發(fā)在開發(fā)組件和模塊化開發(fā)的時(shí)候能節(jié)省很多資源。舉個(gè)例子說(shuō)明面向?qū)ο?/ 這里的函數(shù)名在面向?qū)ο罄锝凶鲱恌unction Create(n, s){// var obj = new Object();// obj叫做實(shí)例,同時(shí)也是對(duì)象,面向?qū)ο髮懛ㄖ邢到y(tǒng)會(huì)自動(dòng)創(chuàng)建一個(gè)obj空對(duì)象// 對(duì)象屬性this.name = n; this.sex = s; // this指針,在這里指的就是這個(gè)對(duì)象// 對(duì)象方法this.showName = function(){alert(n);}; this.showSex = function(){alert(s);}; // 返回對(duì)象// 同樣,面向?qū)ο笾邢到y(tǒng)會(huì)自動(dòng)幫我們返回obj(即this)//return obj;//return this;}原型(prototype)原型可以用來(lái)構(gòu)造函數(shù)的屬性和方法,使這個(gè)構(gòu)造函數(shù)的屬性和方法成為公用的。
使用原型的優(yōu)點(diǎn):在內(nèi)存中節(jié)省資源,提高系統(tǒng)性能。下面舉個(gè)例子說(shuō)明原型:Array.prototype.sum = function(){var num = 0; for(var i=0;inum += this[i];}alert(num);};1234567這是一個(gè)用原型構(gòu)造的數(shù)組方法,將求和的sum方法掛在原型上,可以使這個(gè)方法被重復(fù)使用,當(dāng)然,重點(diǎn)是節(jié)省內(nèi)存資源。
使用原型還有一個(gè)優(yōu)點(diǎn),就是優(yōu)先級(jí): 原型的優(yōu)先級(jí)類似于CSS中的優(yōu)先級(jí),沒(méi)有使用原型的構(gòu)造函數(shù),就好比CSS中的行內(nèi)樣式,優(yōu)先級(jí)高,而與原型掛鉤的屬性和方法 ,就像是style的內(nèi)聯(lián)樣式,優(yōu)先級(jí)低于行內(nèi)樣式。所以在調(diào)用同一種方法名的時(shí)候,系統(tǒng)會(huì)優(yōu)先調(diào)用掛在原型上的方法。
javascript中的對(duì)象包括自定義類,函數(shù)和一些原生對(duì)象。
在JavaScript中,通常可以使用構(gòu)造函數(shù)來(lái)創(chuàng)建特定類型的對(duì)象。諸如Object和Array這樣的原生構(gòu)造函數(shù),在運(yùn)行時(shí)會(huì)自動(dòng)出現(xiàn)在執(zhí)行環(huán)境中。 此外,我們也可以創(chuàng)建自定義的構(gòu)造函數(shù)。
舉例如下:
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
}
這里是用new來(lái)實(shí)例化一個(gè)person對(duì)象:
var person1 = new Person('Weiwei', 27, 'Student');
var person2 = new Person('Lily', 25, 'Doctor');
以這種方式調(diào)用構(gòu)造函數(shù)實(shí)際上會(huì)經(jīng)歷以下4個(gè)步驟:
1、創(chuàng)建一個(gè)新對(duì)象(實(shí)例)
2、將構(gòu)造函數(shù)的作用域賦給新對(duì)象(也就是重設(shè)了this的指向,this就指向了這個(gè)新對(duì)象)
3、執(zhí)行構(gòu)造函數(shù)中的代碼(為這個(gè)新對(duì)象添加屬性)
4、返回新對(duì)象
JavaScript有強(qiáng)大的串處理功能,有了這些串方法,才能編寫出豐富多彩的網(wǎng)頁(yè)。
在這一部分里,我們將介紹到如何使用與串對(duì)象有關(guān)的方法和屬性。 1。
串對(duì)象的length屬性 串對(duì)象僅有一個(gè)屬性length,這個(gè)屬性值表示這個(gè)串所包括字符的相對(duì)數(shù)目。 語(yǔ)法為: stringName。
length 2。串對(duì)象的方法 JavaScript提供了多個(gè)串方法以幫助控制顯示信息。
串方法可以分為幾個(gè)大類,如屬性方法、導(dǎo)航方法等等。下面我們將分類介紹。
(1)屬性方法 串的屬性方法指定了普通文本顯示在屏幕上的方式。 它提供了一種理想的方式使主頁(yè)變得更有吸引力。
blink() blink()方法引起文本閃爍,語(yǔ)法形式如下: string。blink(); bold() bold()方法使串變?yōu)榇煮w。
語(yǔ)法形式如下: string。bold(); fontcolor() fontcolor()方法可以改變單個(gè)串的顏色,或者在每次重新裝入頁(yè)面或事件發(fā)生時(shí),改變顏色。
同樣,這個(gè)方法也有一個(gè)相對(duì)應(yīng)的HTML標(biāo)識(shí)-- fontcolor()的語(yǔ)法是 string。fontcolor(color); 在這里,color是一種顏色的合法表示。
italics() italics()方法把串變?yōu)樾斌w,以同其余文字區(qū)分開來(lái),italics() 的語(yǔ)法如下: string。 italics(); (2)大小寫方法 JavaScript嚴(yán)格區(qū)分字母的大小寫。
為了方便地比較兩個(gè)串,就要把它們都轉(zhuǎn)化為大寫或小寫。串對(duì)象的大小寫方法就支持在大小寫之間轉(zhuǎn)換。
toLowerCase() tolowerCase()方法把一個(gè)給定的串中每個(gè)字符轉(zhuǎn)變成小寫狀態(tài)。 語(yǔ)法形式如下: string=stringValue。
toLowerCase(); toUpperCase() 與tolowerCase()方法相反是toUpperCase()方法,它把一個(gè)給定串轉(zhuǎn)變成大寫字符串。 string=stringValue。
toUpperCase(); (3)操作方法 操作方法提供了許多種在一個(gè)文本串內(nèi)查找字符串的方法,其中包括charAt()、indexO f()、LastIndexOf()和substring()四種方法。我們可以使用這些方法格式化和操作用戶輸入的串變量,其中charAt()和 substring()兩種方法從一個(gè)串中抽取一個(gè)或多個(gè)字符,剩下的兩個(gè)方法返回待查找值的第一個(gè)字符在串中出現(xiàn)位置的數(shù)字值。
charAt() charAt()方法從一個(gè)給定串中返回指定位置的字符。它的使用方法如下: string。
charAt(index); 其中index是一個(gè)在0和小于串長(zhǎng)度之間的一個(gè)數(shù)(串長(zhǎng)度可以通過(guò)Length屬性得到), substring() substring()方法從一個(gè)大串中返回它的一個(gè)子串。 它的語(yǔ)法形式如下: string。
substring(indexA,indexB) indexA和indexB兩者都是在0和串長(zhǎng)度之間的數(shù)字值。它們是串的兩個(gè)下標(biāo)。
indexOf() indexOf()方法返回在一個(gè)長(zhǎng)串中與指定的串匹配的子串的位置。 它從左到右地查找給定的串,語(yǔ)法形式如下: string。
indexOf(searchValue,[fromIndex]); 其中string是indexOf()要在其中查找searchValue的串,而searc hValue是任何想要查找的字符或子串。 fromIndex是一個(gè)可選項(xiàng),它指定查找開始的位置。
fromIndex的范圍與charAt()和Subs tring()相似(0到length-1)。它不能大于或等于length,如果沒(méi)有指定fromIndex,該方法認(rèn)為其缺省地?并查找整個(gè)串。
indexOf()的返回值是searchValue首次出現(xiàn)的第一個(gè)字符的偏移量(從串的開頭算起)。即使指定了fromIndex,該返回值仍是相對(duì)于串的開頭的(有可能在前面一些的地方出現(xiàn)的se archValue將被忽略)。
lastIndexOf() lastIndexOf()方法與IndexOf()方法類似,只是它從右到左地查找串。 lastIndexOf()仍舊給出被查找串的首字符位置,而不是末尾字符的位置。
lastIndexOf()方法的語(yǔ)法形式如下: string。Last indexOf(searchValue); searchValue仍是想要查找的串。
(4)導(dǎo)航方法 使用超文本時(shí)會(huì)接觸到錨(anchor)和鏈路的概念。 錨就如同在網(wǎng)頁(yè)中放置的書標(biāo)(你可以很方便地回到那兒);鏈路是對(duì)另一頁(yè)面(或相同及不同頁(yè)面的錨)的指引。
anchor() anchor()方法用來(lái)設(shè)置一個(gè)錨,它的語(yǔ)法形式很簡(jiǎn)單: string。anchor(anchorName); 考察下面的例子: var indexString="Index"; document。
writeln(indexString。anchor("anchorName")); 這條語(yǔ)句在屏幕上打印文本Index;anchorName是這個(gè)錨真正的名字。
像這樣的錨一般被鏈路用來(lái)跳轉(zhuǎn)到頁(yè)面中錨的實(shí)際位置。 link() link()的功能是跳轉(zhuǎn)到指定的目標(biāo)。
它相當(dāng)于標(biāo)準(zhǔn)HTML引用(由HREF屬性指定的超文本引用)。它的語(yǔ)法形式也非常簡(jiǎn)單: linkText。
link(href) linkText是屏幕上的文本,href屬性不一定是一個(gè)錨,它也可以是一個(gè)合法的URL引用。下面的例子說(shuō)明如何用link()來(lái)創(chuàng)建直接跳轉(zhuǎn)到前面創(chuàng)建的錨的鏈路; var indexStirng="Index" document。
writeln(indexString。link("#"+"anchorName")+" ") 這條語(yǔ)句在屏幕上打印鏈路格式的文本Index(通常在下面加下劃線);anchorName是錨的實(shí)際的名字。
當(dāng)單擊這條鏈路時(shí),這個(gè)錨將出現(xiàn)在瀏覽器用戶窗口的頂部。 請(qǐng)注意:要保證在同一文檔內(nèi)部的錨的引用中加上#號(hào)。
在加#號(hào)的時(shí)候,要將它用雙引號(hào)括起來(lái)并用加號(hào)與完整的引用連起來(lái)??梢詤⒁娗懊娴睦?。
如果省略了#號(hào),鏈路的目標(biāo)就是一個(gè)文件而不是一個(gè)錨。單擊這條鏈就會(huì)使瀏覽器試圖裝入名為anchorName(在本例中)的文件。
因?yàn)檫@。
JavaScript中對(duì)象的創(chuàng)建有以下幾種方式:(1)使用內(nèi)置對(duì)象(2)使用JSON符號(hào)(3)自定義對(duì)象構(gòu)造一、使用內(nèi)置對(duì)象JavaScript可用的內(nèi)置對(duì)象可分為兩種:1,JavaScript語(yǔ)言原生對(duì)象(語(yǔ)言級(jí)對(duì)象),如String、Object、Function等;2,JavaScript運(yùn)行期的宿主對(duì)象(環(huán)境宿主級(jí)對(duì)象),如window、document、body等。
我們所說(shuō)的使用內(nèi)置對(duì)象,是指通過(guò)JavaScript語(yǔ)言原生對(duì)象的構(gòu)造方法,實(shí)例化出一個(gè)新的對(duì)象。如:復(fù)制代碼 代碼如下:var str = new String("實(shí)例初始化String");var str1 = "直接賦值的String";var func = new Function("x","alert(x)");//示例初始化funcvar o = new Object();//示例初始化一個(gè)Object二、使用JSON符號(hào)(i)何謂JSON ?JSON (JavaScript ObjectNotation)即JavaScript對(duì)象命名,是一種輕量級(jí)的數(shù)據(jù)交換格式,易于閱讀和編寫,同時(shí)也易于及其解析和生成。
它基于《JavaScript Programming Language, Standard ECMA-262 3rd Edition -December 1999》的一個(gè)子集。JSON是完全獨(dú)立于語(yǔ)言的文本格式,因此成為數(shù)據(jù)交換的理想格式。
JSON作為JavaScript的一個(gè)自己,同時(shí)ActionScript、C、C#、ColdFusion、E、Java、JavaScript、ML、ObjectiveCAML、Perl、PHP、Python、Rebol、Ruby、Lua等一系列的語(yǔ)言都提供支持,使得JSON成為Ajax開發(fā)的首選方案。JSON有兩種構(gòu)建方式,一種是采用簡(jiǎn)單的“鍵/值對(duì)”的集合,在不同的語(yǔ)言中被理解為對(duì)象、記錄、結(jié)構(gòu)、字典、哈希表、有鍵列表,或者關(guān)聯(lián)數(shù)組等,另一種采用有序的值列表,大部分語(yǔ)言把它理解為數(shù)組。
常用的創(chuàng)建方式是第一種,即采用“鍵/值對(duì)”集合的形式。在這種形式下,一個(gè)對(duì)象以“{”(左括號(hào))開始,“}”(右括號(hào))結(jié)束。
每個(gè)“名稱”后跟一個(gè)“:”(冒號(hào)),“‘鍵/值' 對(duì)”之間使用“,”(逗號(hào))分隔。JSON具有以下特點(diǎn):(1)簡(jiǎn)單格式化的數(shù)據(jù)交換;(2)易于人們的讀寫習(xí)慣;(3)易于機(jī)器的分析和運(yùn)行。
在JavaScript中,JSON被理解為對(duì)象。通過(guò)字符串形式的JSON,數(shù)據(jù)可以很方便地解析成JavaScript獨(dú)享,并進(jìn)行數(shù)據(jù)的讀取傳遞。
通過(guò)JSON,在一定程度上客服了JavaScript對(duì)象無(wú)法作為參數(shù)系列化傳遞的問(wèn)題。1,簡(jiǎn)單的JSON{name:"劉德華",age:"25",sex:"男"}2,JSON值的類型JSON的值可以是簡(jiǎn)單的數(shù)據(jù)類型,例如數(shù)字、浮點(diǎn)、字符等,也可以是數(shù)組及對(duì)象。
例如以數(shù)組作為member鍵值的JSON:{member:[{name:"劉德華"},{name:"郭富城"},{name:"張學(xué)友"},{name:"黎明"}]}{book:[{name:"三國(guó)演義"},{name:"西游記"},{name:"水滸傳"},{name:"紅樓夢(mèng)"}],author:[{name:"羅貫中"},{name:"吳承恩"},{name:"施耐安",{name:"曹雪芹"}}]}3,在JavaScript中使用JSONJSON是JavaScript原生格式,這意味著在JavaScript中處理JSON數(shù)據(jù)不需要任何特殊的API或者工具包,JavaScript默認(rèn)將JSON當(dāng)做一個(gè)對(duì)象處理。將對(duì)象傳遞給一個(gè)變量,例如:復(fù)制代碼 代碼如下:var somebooks = {book:[{name:"三國(guó)演義"},{name:"西游記"},{name:"水滸傳"},{name:"紅樓夢(mèng)"}],author:[{name:"羅貫中"},{name:"吳承恩"},{name:"施耐安",{name:"曹雪芹"}}]}JSON的每個(gè)“鍵”相當(dāng)于對(duì)象的屬性,例如訪問(wèn)book中的第一個(gè)條目,在JavaScript中,就可以簡(jiǎn)單地使用“somebooks.book[0].name”來(lái)獲取“三國(guó)演義”這個(gè)值。
我們不但可以將一個(gè)JSON字符串轉(zhuǎn)化為對(duì)象,反過(guò)來(lái)將一個(gè)對(duì)象“編譯”為一個(gè)JSON字符串,以方便JavaScript中的對(duì)象的傳輸。例如:復(fù)制代碼 代碼如下:var Animals = new Object();Animals.name = "dog";Animals.sex = "Male";Animals.age = "2";Animals對(duì)象無(wú)法被序列化傳輸,將Animals對(duì)象轉(zhuǎn)化為JSON字符串,也就是“{name:"dog",sex:"Male",age:"2"}”。
這樣,把該JSON字符串作為HTTP請(qǐng)求的一個(gè)參數(shù)傳遞,從而達(dá)到序列化傳輸Animals對(duì)象的目的。(ii)JSON通過(guò)字符串形式來(lái)表達(dá)JavaScript的對(duì)象。
如:復(fù)制代碼 代碼如下:var myObject = {nickname:"my girlfried",name:"bigpig"};JSON實(shí)際上充當(dāng)了一種在JavaScript對(duì)象和字符串之間實(shí)現(xiàn)相互轉(zhuǎn)換的協(xié)議。由于JSON的“外表”可以看成但村的字符串,因此JSON在JavaScript的對(duì)象傳輸方面可以起到一定的作用。
例如把對(duì)象strObject轉(zhuǎn)換成字符串后進(jìn)行傳輸,在達(dá)到目的地后通過(guò)eval方法將其還原成對(duì)象:復(fù)制代碼 代碼如下:function test (o){alert (o.name)}var strObject = '{nickname:"my girlfriend",name:"big pig"}';test (eval_r("(" + strObject + ")"));三、自定義對(duì)象構(gòu)造創(chuàng)建高級(jí)對(duì)象構(gòu)造有兩種方式:使用“this”關(guān)鍵字構(gòu)造、使用原型prototype構(gòu)造。如:復(fù)制代碼 代碼如下://使用this關(guān)鍵字定義構(gòu)造的上下文屬性function Girl(){this.name = "big pig";this.age = 20;this.standing;this.bust;this.waist;this.hip;}//使用prototypefunction Girl(){}Girl.prototype.name = "big pig";Girl.prototype.age = 20;Gi。
1.對(duì)象字面量。
var clock={ hour:12,minute:10,second:10,showTime:function(){ alert(this.hour+":"+this.minute+":"+this.second); } } clock.showTime();//調(diào)用2.創(chuàng)建Object實(shí)例 var clock = new Object(); clock.hour=12; clock.minute=10; clock.showHour=function(){alert(clock.hour);}; clock.showHour();//調(diào)用 由此可見 屬性是可以動(dòng)態(tài)添加,修改的 對(duì)象創(chuàng)建模式:1.工廠模式:就是一個(gè)函數(shù),然后放入?yún)?shù),返回對(duì)象,流水線工作 function createClock(hour,minute,second){ var clock = new Object(); clock.hour=hour; clock.minute=minute; clock.second=second; clock.showHour=function(){ alert(this.hour+":"+this.minute+":"+this.second); }; return clock; }; var newClock = createClock(12,12,12);//實(shí)例化 newClock.showHour();//調(diào)用 優(yōu)點(diǎn):總算優(yōu)點(diǎn)抽象的概念了。但是不能識(shí)別對(duì)象的類型呢!2.構(gòu)造函數(shù)模式 function clock(hour,minute,second){ this.hour = hour; this.minute = minute; this.second = second; this.showTime = function(){ alert(this.hour+":"+this.minute+":"+this.second); } } var newClock =new clock(12,12,12); alert(newClock.hour); 注意:這個(gè)new關(guān)鍵字是必須,如果不加,clock就不會(huì)當(dāng)成構(gòu)造函數(shù)調(diào)用,而只是一個(gè)普通的函數(shù)。
同時(shí),還會(huì)意外地給他的外部作用域即window添加屬性,因?yàn)榇藭r(shí)構(gòu)造函數(shù)內(nèi)部的this已經(jīng)映射到了外部作用域了。所以為了安全起見,可以這樣創(chuàng)建 function clock(hour,minute,second){ if(this instanceof clock){ this.hour = hour; this.minute = minute; this.second = second; this.showTime = function(){ alert(this.hour+":"+this.minute+":"+this.second); } } else{ throw new Error("please add 'new' to make a instance"); } } 構(gòu)造函數(shù)的缺點(diǎn):由于this指針在對(duì)象實(shí)例的時(shí)候發(fā)生改變指向新的實(shí)例。
這時(shí)新實(shí)例的方法也要重新創(chuàng)建,如果n個(gè)實(shí)例就要n次重建相同的方法。于是讓來(lái)揭開原型模式吧3.原型模式 function clock(hour,minute,second){ } clock.prototype.hour=12; clock.prototype.minute=12; clock.prototype.second=12; clock.prototype.showTime=function(){ alert(this.hour+":"+this.minute+":"+this.second); } var newClock = new clock(); newClock.showTime(); 深度理解原型模型很重要,首先,每個(gè)函數(shù)都有一個(gè)prototype(原型)屬性,這個(gè)指針指向的就是clock.prototype對(duì)象。
而這個(gè)原型對(duì)象在默認(rèn)的時(shí)候有一個(gè)屬性constructor,指向clock,這個(gè)屬性可讀可寫。而當(dāng)在實(shí)例化一個(gè)對(duì)象的時(shí)候,實(shí)例newClock除了具有構(gòu)造函數(shù)定義的屬性和方法外(注意,只是構(gòu)造函數(shù)中的),還有一個(gè)指向構(gòu)造函數(shù)的原型的指針,ECMAScript管他叫[[prototype]],這樣實(shí)例化對(duì)象的時(shí)候,原型對(duì)象的方法并沒(méi)有在某個(gè)具體的實(shí)例中,因?yàn)樵蜎](méi)有被實(shí)例。
(廢話有點(diǎn)多,沒(méi)有誤導(dǎo)您吧。別暈) 所以這種模式定義的對(duì)象,在調(diào)用方法的時(shí)候過(guò)程:調(diào)用newClock.showTime();先看實(shí)例中有沒(méi)有,有調(diào)之,無(wú)追蹤到原型,有調(diào)之,無(wú)出錯(cuò),調(diào)用失敗。
當(dāng)然可以這樣寫:function clock(hour,minute,second){ } clock.prototype={ constructor:clock, //必須手動(dòng)設(shè)置這個(gè)屬性,不然就斷了與構(gòu)造函數(shù)的聯(lián)系了。沒(méi)有實(shí)例共享原型的意義了。
hour:12,minute:12,second:12,showTime:function(){ alert(this.hour+":"+this.minute+":"+this.second) } } var newClock = new clock(); newClock.showTime(); 注意:實(shí)例與構(gòu)造函數(shù)原型的聯(lián)系也是通過(guò)指針來(lái)聯(lián)系的,故可以動(dòng)態(tài)添加修改原型的方法。這種純?cè)偷哪J絾?wèn)題也很明顯,所有的屬性,方法都是共享的,不能讓對(duì)象具體化。
常常想每個(gè)對(duì)象有自己的屬性。于是,結(jié)合前兩種,產(chǎn)生新的模式4.構(gòu)造-原型組合模式。
function clock(hour,minute,second){ this.hour = hour; this.minute = minute; this.second = second; } clock.prototype.showTime=function(){alert(this.hour+":"+this.minute+":"+this.second);} var newClock = new clock(12,12,12); newClock.showTime(); 這里將屬性放在構(gòu)造函數(shù)中,更顯得對(duì)象的具體性。
1.對(duì)象字面量創(chuàng)建對(duì)象
var obj = { a:1,b:2 };
注意:對(duì)象字面量是一個(gè)表達(dá)式,這種表達(dá)式每次運(yùn)算都會(huì)創(chuàng)建并初始化一個(gè)新對(duì)象,并計(jì)算這個(gè)新對(duì)象的每個(gè)屬性值。所以如果在循環(huán)體內(nèi)使用對(duì)象字面量,每次循環(huán)時(shí)都會(huì)創(chuàng)建新對(duì)象。
2.通過(guò)new運(yùn)算符創(chuàng)建對(duì)象
var obj = new Object(); //創(chuàng)建空對(duì)象 var ary = new Array(); //創(chuàng)建空的數(shù)組對(duì)象
注意:new運(yùn)算符后面跟的是一個(gè)函數(shù)調(diào)用,這個(gè)函數(shù)被稱為構(gòu)造函數(shù)。js中原始類型都包含內(nèi)置的構(gòu)造函數(shù),也可以自己定義構(gòu)造函數(shù)。
3.通過(guò)立即執(zhí)行函數(shù)創(chuàng)建對(duì)象
var obj = (function(){ return {x:1,y:2};}());
注意:在立即執(zhí)行函數(shù)內(nèi)部一定要有return語(yǔ)句,return出的內(nèi)容就是待創(chuàng)建的對(duì)象。
4.通過(guò)Object.create()創(chuàng)建對(duì)象
var obj = Object.create({x:1,y:2});
注意:Object.create()是一個(gè)靜態(tài)函數(shù),傳入原型對(duì)象就可以創(chuàng)建繼承此原型對(duì)象的對(duì)象,例如上面的例子中obj對(duì)象繼承了x,y屬性。
聲明:本網(wǎng)站尊重并保護(hù)知識(shí)產(chǎn)權(quán),根據(jù)《信息網(wǎng)絡(luò)傳播權(quán)保護(hù)條例》,如果我們轉(zhuǎn)載的作品侵犯了您的權(quán)利,請(qǐng)?jiān)谝粋€(gè)月內(nèi)通知我們,我們會(huì)及時(shí)刪除。
蜀ICP備2020033479號(hào)-4 Copyright ? 2016 學(xué)習(xí)鳥. 頁(yè)面生成時(shí)間:3.722秒