JavaScript中什么是構(gòu)造函數(shù)：http://www.qdfuns.com/notes/23720/d3990bb38177fd0c14789a7c54e614d9.html

深入理解js構(gòu)造函數(shù)：http://www.cnblogs.com/wangyingblog/p/5583825.html

?

現(xiàn)在來(lái)創(chuàng)建一個(gè)構(gòu)造函數(shù)用做房子和公寓對(duì)象的模板。

function Accommodation(){};

要想把這個(gè)函數(shù)用作模板來(lái)創(chuàng)建對(duì)象，需要用到new這個(gè)關(guān)鍵字。

var house= new?Accommodation();

var apartment = new?Accommodation();

用關(guān)鍵字new創(chuàng)建的所有對(duì)象都被稱為這個(gè)函數(shù)所示結(jié)構(gòu)的對(duì)象實(shí)例，創(chuàng)建對(duì)象的過(guò)程就是這個(gè)模板實(shí)例化的過(guò)程。同一個(gè)模板的對(duì)象實(shí)例之間互無(wú)關(guān)聯(lián)，這些對(duì)象實(shí)例是完全獨(dú)立的變量，只不過(guò)共享同一個(gè)模板結(jié)構(gòu)而已。

1.找出函數(shù)的構(gòu)造器

通過(guò)上面的方法用模板創(chuàng)建的對(duì)象還有一個(gè)額外的屬性，叫做constructor，這個(gè)屬性指向創(chuàng)建該對(duì)象時(shí)使用的JavaScript構(gòu)造函數(shù)。我們可以直接將對(duì)象的constructor屬性和某個(gè)構(gòu)造函數(shù)進(jìn)行比較。

house.constructor ===?Accommodation;//true

apartment.constructor ===?Accommodation;//true

這種比較也可以使用關(guān)鍵字 instanceof 來(lái)完成，該關(guān)鍵字的作用就是檢查對(duì)象是否是某個(gè)構(gòu)造函數(shù)的實(shí)例。
house instanceof ?Accommodation;//true

apartment?instanceof ?Accommodation;//true

2.通過(guò)原型添加屬性和方法

JavaScript中的每個(gè)函數(shù)，即每個(gè)構(gòu)造器，都有一個(gè)叫prototype的屬性。

（1）使用prototype關(guān)鍵字和點(diǎn)標(biāo)記法為構(gòu)造器添加屬性和方法

//定義一個(gè)名為Accommodation的構(gòu)造函數(shù)

function Accommodation(){}

//為這個(gè)“類”添加屬性

Accommodation.prototype.floors=0;

Accommodation.prototype.rooms=0;

//為這個(gè)“類”添加方法

Accommodation.prototype.unlock=function(){};

創(chuàng)建“類”的對(duì)象實(shí)例

var house= new?Accommodation();

var apartment = new?Accommodation();

?

（2）通過(guò)對(duì)象直接量為構(gòu)造函數(shù)添加屬性和方法

1 //定義一個(gè)名為Accommodation的構(gòu)造函數(shù) 2 3 function Accommodation(){} 4 5 Accommodation.prototype={ 6 7 　　floors:0, 8 9 　　lock:function(){} 10 11 };

?

prototype這個(gè)關(guān)鍵字有一個(gè)強(qiáng)大的特性是允許在對(duì)象實(shí)例已經(jīng)創(chuàng)建之后繼續(xù)添加屬性和方法，而這些新添屬性和方法會(huì)自動(dòng)添加到所有對(duì)象實(shí)例中，不管是已經(jīng)創(chuàng)建的還是將要?jiǎng)?chuàng)建的————

1 function Accommodation(){} 2 3 Accommodation.prototype={ 4 5 　　floors:0, 6 7 　　lock:function(){} 8 9 }; 10 11 var house = new Accommodation(); 12 13 house.prototype.unlock=function(){}; 14 15 house.unlock();

?

?

3.通過(guò)作用域添加屬性和方法

函數(shù)體內(nèi)定義的任何變量或函數(shù)，其作用域都限于函數(shù)體內(nèi)，就是說(shuō)在該函數(shù)體以外無(wú)法訪問(wèn)這些變量或函數(shù) -- 對(duì)這些變量和函數(shù)來(lái)說(shuō)，包裹它們的外層函數(shù)提供了一個(gè)沙箱般的編程環(huán)境，或者說(shuō)一個(gè)閉包。

（1）變量作用域

//定義在任何函數(shù)之外的變量在全局作用域內(nèi)，可以再任何位置訪問(wèn)

1 //定義在任何函數(shù)之外的變量在全局作用域內(nèi)，可以再任何位置訪問(wèn) 2 var myLibrary={ 3 myName:"Dennis" 4 }; 5 function doSomething(){ 6 //函數(shù)體內(nèi)定義的變量無(wú)法在函數(shù)體外訪問(wèn)到 7 var innerVariable=123; 8 myLibrary.myName="Hello"; 9 function doSomethingElse(){ 10 innerVariable=1234; 11 } 12 doSomethingElse(); 13 alert(innerVariable); 14 } 15 doSomething(); 16 //該屬性在doSomething函數(shù)中已被覆蓋 17 alert(myLibrary.myName); 18 19 //在一個(gè)函數(shù)之外訪問(wèn)其內(nèi)部定義的變量將導(dǎo)致錯(cuò)誤 20 alert(innerVariable);//Error

?

?

4.上下文和this關(guān)鍵字

JavaScript中this關(guān)鍵字代表的是一個(gè)函數(shù)的上下文環(huán)境，這個(gè)上下文環(huán)境在大多數(shù)情況下指的是函數(shù)運(yùn)行時(shí)封裝這個(gè)函數(shù)的那個(gè)對(duì)象。當(dāng)不通過(guò)任何對(duì)象單獨(dú)調(diào)用一個(gè)函數(shù)時(shí)，上下文環(huán)境指的就是全局的window對(duì)象。

在一個(gè)對(duì)象的方法中使用this指向的是這個(gè)對(duì)象本身，比如下面例子中的house對(duì)象。使用this關(guān)鍵字而不是對(duì)象的變量名，這么做的好處在于你可以隨意改變對(duì)象的變量名而不用擔(dān)心對(duì)象中方法的行為受到影響。

this關(guān)鍵字成為了其指向的對(duì)象的代名詞，所以和對(duì)象一樣，你可以對(duì)這個(gè)關(guān)鍵字本身使用點(diǎn)標(biāo)記法。

（1）使用this關(guān)鍵字和點(diǎn)標(biāo)記法

1 //在所有函數(shù)之外，this表示的是全局的window對(duì)象 2 alert(this===window);//true 3 //因?yàn)閐oSomething函數(shù)在對(duì)象外部被調(diào)用，this指向的是瀏覽器的window對(duì)象 4 function doSomething(){ 5 alert(this===window);//true 6 } 7 doSomething(); 8 var house={ 9 floors:2, 10 isLocked:false, 11 lock:function(){ 12 alert(this===house);//true,因?yàn)閠his關(guān)鍵字表示的是包含這個(gè)方法的那個(gè)對(duì)象 13 14 //我們可以把this看作house對(duì)象的替身，可以使用點(diǎn)標(biāo)記法 15 this.isLocked=true; 16 } 17 }; 18 house.lock(); 19 alert(house.isLocked);//true

對(duì)象中的嵌套函數(shù)其上下文環(huán)境是全局的window對(duì)象，而非包含它的那個(gè)對(duì)象，這一點(diǎn)可能出乎你的預(yù)料，很多人都會(huì)在這里出錯(cuò)。要想繞過(guò)這個(gè)陷阱，我們可以再this指向包含這個(gè)函數(shù)的對(duì)象時(shí)，將this的值保存在一個(gè)變量中，然后在用到該對(duì)象時(shí)，用這個(gè)變量來(lái)代替。很多開(kāi)發(fā)者都用一個(gè)名為that的變量來(lái)保存這個(gè)對(duì)象引用-----

（2）將this關(guān)鍵字的值保存在變量中

1 var apartment={ 2 isLocked:false, 3 lock:function(){ 4 var that=this; 5 //設(shè)置isLocked屬性 6 this.isLocked=true; 7 function doSomething(){ 8 alert(this===apartment);//false 9 alert(this===window);//true 10 alert(that===apartment);//true 11 //通過(guò)that變量來(lái)修改apartment對(duì)象的isLocked屬性 12 that.isLocked=false; 13 } 14 doSomething(); 15 } 16 }; 17 apartment.lock(); 18 alert(apartment.isLocked);//false

在使用new關(guān)鍵字創(chuàng)建對(duì)象時(shí)，this指向的值和一般情況下又有區(qū)別。在這種情況下，this指向的是通過(guò)構(gòu)造函數(shù)所創(chuàng)建的那個(gè)對(duì)象實(shí)例。正是因?yàn)檫@個(gè)特性，我們得以構(gòu)造函數(shù)中通過(guò)this來(lái)設(shè)置所有對(duì)象實(shí)例的屬性和方法，而非像之前那樣使用prototype關(guān)鍵字--

（3）在構(gòu)造函數(shù)中使用this關(guān)鍵字

1 //定義一個(gè)新的構(gòu)造函數(shù)來(lái)表示一種豪宅 2 function Accommodation(){ 3 //this關(guān)鍵字指向的是通過(guò)這個(gè)“類”創(chuàng)建的對(duì)象實(shí)例 4 this.floors=0; 5 this.rooms=0; 6 this.sharedEntrance=false; 7 this.isLocked=false; 8 this.lock=function(){ 9 //函數(shù)中的this一般指向包含函數(shù)的那個(gè)對(duì)象，本例中this指向的是創(chuàng)建對(duì)象實(shí)例， 10 //因?yàn)檫@個(gè)函數(shù)時(shí)通過(guò)這個(gè)被創(chuàng)建的對(duì)象實(shí)例來(lái)調(diào)用的 11 this.isLocked=true; 12 } 13 this.unlock=function(){ 14 this.isLocked=false 15 }; 16 } 17 //通過(guò)構(gòu)造函數(shù)來(lái)創(chuàng)建對(duì)象實(shí)例 18 var house =new Accommodation(); 19 var apartment =new Accommodation(); 20 21 //讀取和修改屬性值，調(diào)用方法等操作都和普通對(duì)象一樣 22 alert(house.floors);//0 23 house.floors=2; 24 apartment.lock();

JavaScript開(kāi)發(fā)者一般會(huì)結(jié)合使用prototype和this關(guān)鍵字來(lái)定義對(duì)象實(shí)例的屬性和方法，其中前者用來(lái)定義方法，后者用來(lái)定義屬性。每次通過(guò)構(gòu)造器創(chuàng)建一個(gè)新的對(duì)象實(shí)例，構(gòu)造函數(shù)都會(huì)被執(zhí)行一次。

之所以組合使用這兩個(gè)關(guān)鍵字，是為了避免每次初始化一個(gè)對(duì)象實(shí)例時(shí)都要執(zhí)行那些對(duì)方法進(jìn)行初始化的代碼。通過(guò)prototype關(guān)鍵字來(lái)定義的方法只需定義一次，然后就可以為所有通過(guò)這個(gè)構(gòu)造函數(shù)創(chuàng)建的對(duì)象所用，這個(gè)使得對(duì)象的創(chuàng)建變得更加高效。在原型上定義的方法可以通過(guò)this來(lái)得到對(duì)象實(shí)例的引用---

（4）組合使用this和prototype關(guān)鍵字編寫高效的構(gòu)造函數(shù)

1 //通過(guò)一個(gè)構(gòu)造函數(shù)來(lái)表示各種類型的住宅 2 function Accommodation(){ 3 //利用this關(guān)鍵字來(lái)設(shè)置實(shí)例對(duì)象的屬性 4 this.floors=0; 5 this.isLocked=false; 6 } 7 //利用prototype關(guān)鍵字來(lái)定義實(shí)例對(duì)象的方法 8 Accommodation.prototype.lock=function(){ 9 //通過(guò)原型定義的方法可以通過(guò)this關(guān)鍵字訪問(wèn)在構(gòu)造函數(shù)中定義的屬性 10 this.isLocked=true; 11 } 12 Accommodation.prototype.unlock=function(){ 13 //通過(guò)原型定義的方法可以通過(guò)this關(guān)鍵字訪問(wèn)在構(gòu)造函數(shù)中定義的屬性 14 this.isLocked=false; 15 } 16 //實(shí)例化一個(gè)Accommodation類型的對(duì)象 17 var house =new Accommodation(); 18 //執(zhí)行“l(fā)ock”方法 19 house.lock(); 20 //檢查“isLocked”屬性是否正確設(shè)置 21 alert(house.isLocked);//true 22

開(kāi)發(fā)者們喜歡在構(gòu)造函數(shù)中使用this關(guān)鍵字來(lái)設(shè)置屬性的另一個(gè)原因是可以給構(gòu)造函數(shù)傳遞參數(shù)，這樣我們就能再構(gòu)造函數(shù)時(shí)通過(guò)傳遞參數(shù)來(lái)對(duì)某些屬性進(jìn)行初始化了。我個(gè)人喜歡用this關(guān)鍵字來(lái)初始化那些我希望在對(duì)象創(chuàng)建時(shí)進(jìn)行初始化的屬性，

而用prototype設(shè)置其他屬性以及對(duì)象的方法。這樣一來(lái)，構(gòu)造函數(shù)就不需要出現(xiàn)任何在對(duì)象初始化時(shí)不需要被執(zhí)行的代碼了，代碼變得更高效。

（5）在構(gòu)造函數(shù)中通過(guò)this關(guān)鍵字初始化屬性

1 //定義一個(gè)帶有三個(gè)參數(shù)的構(gòu)造函數(shù)，這些參數(shù)的值用于初始化實(shí)例對(duì)象的屬性 2 function Accommodation(floors,rooms,sharedEntrance){ 3 //當(dāng)該“類”的一個(gè)對(duì)象被實(shí)例化時(shí)，用傳進(jìn)來(lái)的參數(shù)值初始化該對(duì)象的三個(gè)屬性 4 //邏輯或操作的作用是在傳入值為空時(shí)指定一個(gè)默認(rèn)值 5 this.floors=floors||0; 6 this.rooms=rooms||0; 7 this.sharedEntrance=sharedEntrance||false; 8 } 9 //不需要在實(shí)例化時(shí)賦值的屬性應(yīng)該通過(guò)prototype來(lái)進(jìn)行設(shè)置，因?yàn)檫@樣就只需定義和執(zhí)行一次 10 Accommodation.prototype.isLocked=false; 11 12 Accommodation.prototype.lock=function(){ 13 this.isLocked=true; 14 } 15 16 Accommodation.prototype.unlock =function(){ 17 this.isLocked=false; 18 } 19 20 //實(shí)例化“類” 的一個(gè)對(duì)象，傳遞三個(gè)參數(shù)中的兩個(gè)值用于初始化 21 //參數(shù)值是按照構(gòu)造函數(shù)的參數(shù)定義順序進(jìn)行傳遞的 22 var house =new Accommodation(2,7); 23 alert(house.floors); 24 alert(house.rooms); 25 26 //參數(shù)sharedEntrance的值沒(méi)有被傳入構(gòu)造函數(shù)，所以它的值通過(guò)邏輯或操作被設(shè)置為默認(rèn)值false 27 alert(house.sharedEntrance);

?

當(dāng)你的“類”規(guī)模越來(lái)越大時(shí)，你會(huì)發(fā)現(xiàn)為了給對(duì)象實(shí)例的屬性設(shè)置初始值，需要給構(gòu)造函數(shù)傳遞一系列參數(shù)值。當(dāng)參數(shù)個(gè)數(shù)不多時(shí)，依次列出每個(gè)參數(shù)的值是可行的，但是當(dāng)參數(shù)個(gè)數(shù)超過(guò)三個(gè)或四個(gè)的時(shí)候，這么做就變得既困難又容易出錯(cuò)。幸運(yùn)的是，對(duì)象直接量為我們提供了一種解決方案。我們可以向構(gòu)造函數(shù)傳遞一個(gè)對(duì)象直接量作為唯一參數(shù)，這個(gè)對(duì)象直接量包含了進(jìn)行屬性設(shè)置所需的所有初始值。

這樣一來(lái)我們不但消除了多個(gè)函數(shù)參數(shù)帶來(lái)的不便，同時(shí)也使代碼變得更加清晰易懂，因?yàn)閷?duì)象直接量是以名對(duì)值對(duì)的形式出現(xiàn)的，這比沒(méi)有名字的函數(shù)參數(shù)值更直觀。當(dāng)需要給一個(gè)函數(shù)傳遞兩個(gè)或者三個(gè)以上參數(shù)值時(shí)，我會(huì)選擇這種方式

（6）用對(duì)象直接量作為構(gòu)造函數(shù)的參數(shù)

1 function Accommodation(defaults) { 2 //如果沒(méi)有傳入值，默認(rèn)為空的對(duì)象直接量 3 defaults = defaults || {}; 4 //如果default對(duì)象含有某個(gè)屬性，就將實(shí)例對(duì)象中同名屬性的值設(shè)為default提供的值，否則設(shè)為默認(rèn)值 5 this.floors = defaults.floors || 0; 6 this.rooms = defaults.rooms || 0; 7 this.sharedEntrance = defaults.sharedEntrance || false; 8 } 9 10 Accommodation.prototype.isLocked = false; 11 12 Accommodation.prototype.lock = function() { 13 this.isLocked = true; 14 } 15 Accommodation.prototype.unlock = function() { 16 this.isLocked = false; 17 } 18 //實(shí)例化兩個(gè)Accommodtion“類”的對(duì)象，通過(guò)對(duì)象直接量傳遞命名的參數(shù) 19 var house =new Accommodation({ 20 floors:2, 21 rooms:7 22 }); 23 var apartment=new Accommodation({ 24 floors:1, 25 rooms:4, 26 sharedEntrance:true 27 });

?

5.方法的鏈?zhǔn)秸{(diào)用

我們已經(jīng)在對(duì)象實(shí)例上定義過(guò)方法了，這些方法的調(diào)用方式和普通函數(shù)并無(wú)不同，只需在方法名后面加上一對(duì)括號(hào)即可。要想連續(xù)調(diào)用對(duì)象實(shí)例的多個(gè)方法，我們現(xiàn)在必須依次逐個(gè)調(diào)用，每個(gè)調(diào)用獨(dú)占一行，而且每次調(diào)用都必須寫出對(duì)象名。

house.lock();

house.alarm();

house.unlock();

只要對(duì)每個(gè)方法做一個(gè)小改變，我們就能對(duì)其進(jìn)行鏈?zhǔn)秸{(diào)用了，就是說(shuō)一個(gè)方法調(diào)用可以緊跟在另外一個(gè)后面。如果你用過(guò)jquery，你或許見(jiàn)過(guò)類似的語(yǔ)法。

house.lock().alarm().unlock();

要實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用，只需在“類”中的每個(gè)方法最后通過(guò)this關(guān)鍵字返回對(duì)象實(shí)例的引用即可。

?

?(1)通過(guò)this關(guān)鍵字來(lái)實(shí)現(xiàn)方法的鏈?zhǔn)秸{(diào)用

1 function Accommodation() {} 2 3 Accommodation.prototype.isLocked = false; 4 Accommodation.prototype.lock = function() { 5 this.isLocked = true; 6 7 //通過(guò)返回上下文，我們實(shí)際上返回了調(diào)用這個(gè)函數(shù)的那個(gè)對(duì)象實(shí)例。因?yàn)檫@個(gè)對(duì)象包含了所有的方法， 8 //所以我們可以在本方法調(diào)用結(jié)束后馬上調(diào)用其他方法 9 return this; 10 } 11 12 Accommodation.prototype.unlock=function(){ 13 this.isLocked=false; 14 return this; 15 } 16 17 Accommodation.prototype.alarm = function(){ 18 alert("Sounding alarm"); 19 return this; 20 } 21 //創(chuàng)建一個(gè)新實(shí)例 22 var house =new Accommodation(); 23 24 //因?yàn)槊總€(gè)方法都返回其執(zhí)行上下文，（在本例中即包含這些方法的對(duì)象實(shí)例） 25 //我們得以將這些方法調(diào)用一個(gè)接一個(gè)地鏈接在一起 26 house.lock().alarm().unlock();

?

?6.繼承

傳統(tǒng)編程語(yǔ)言的一項(xiàng)關(guān)鍵功能就是可以創(chuàng)建一些新的類，來(lái)繼承或者擴(kuò)展某個(gè)父類的屬性和方法，這些新的類和該父類都有某種類似的邏輯關(guān)聯(lián)。這些新的類被稱為子類。JavaScript中也可以實(shí)現(xiàn)這種繼承，不過(guò)實(shí)現(xiàn)方式和傳統(tǒng)語(yǔ)言不盡相同。在JavaScript中被稱為原型繼承，通過(guò)JavaScript對(duì)象的原型鏈來(lái)實(shí)現(xiàn)。

（1）通過(guò)原型繼承創(chuàng)建一個(gè)子類

?

1 //定義一個(gè)有兩個(gè)方法的“類” 2 function Accommodation() {} 3 Accommodation.prototype.lock = function() {}; 4 Accommodation.prototype.unlock = function() {}; 5 6 //定義一個(gè)構(gòu)造函數(shù)，它將成為我們的子類 7 function House(defaults) { 8 defaults = defaults || {}; 9 //將本“類”所有實(shí)例的floors屬性初始化為“2” 10 this.floors = 2; 11 //如果構(gòu)造函數(shù)的對(duì)象直接量參數(shù)包含“rooms”屬性，則使用傳進(jìn)來(lái)的值，否則默認(rèn)設(shè)為7個(gè)房間 12 this.rooms = defaults.rooms || 7; 13 } 14 15 //將House“類”的原型設(shè)為Accommodation“類”的一個(gè)實(shí)例 16 //使用關(guān)鍵字new來(lái)調(diào)用Accommodation的構(gòu)造函數(shù)，這樣就能創(chuàng)建并返回一個(gè)包含其所有屬性和方法的對(duì)象 17 //這個(gè)對(duì)象被傳遞給House“類”的原型，這樣House“類”就得以繼承Accommodation的所有內(nèi)容 18 House.prototype = new Accommodation(); 19 20 //對(duì)象實(shí)例的constructor屬性指向創(chuàng)建該對(duì)象的那個(gè)構(gòu)造函數(shù)。然而，由于House繼承了Accommodation的所有內(nèi)容， 21 //constructor的值也被復(fù)制了，所以我們現(xiàn)在需要重設(shè)constructor的值，使其指向新的子類，如果沒(méi)有這一步， 22 //通過(guò)House 類 創(chuàng)建的對(duì)象就會(huì)報(bào)告說(shuō)它們是通過(guò) Accommodation 類 創(chuàng)建的 23 24 House.prototype.constructor = House; 25 //創(chuàng)建House的一個(gè)實(shí)例，繼承Accommodation的屬性和方法 26 var myHouse = new House(); 27 28 //傳入rooms的值從而在對(duì)象實(shí)例化時(shí)對(duì)rooms進(jìn)行賦值 29 var myNeighborsHouse = new House({ 30 rooms: 8 31 }); 32 alert(myHouse.rooms); //7(House構(gòu)造函數(shù)中的默認(rèn)值) 33 alert(myNeighborsHouse.rooms); //8 34 35 //Accommodation的方法對(duì)House的對(duì)象也可用 36 myHouse.lock(); 37 myNeighborsHouse.unlock(); 38 39 //由于之前我們修改了constructor的值，所以由House創(chuàng)建的對(duì)象能如實(shí)報(bào)告這一點(diǎn) 40 alert(myHouse.constructor === House); //true 41 alert(myHouse.constructor === Accommodation); //true 42 43 44 //instanceof關(guān)鍵字會(huì)沿原型鏈進(jìn)行查詢，所以也可用于檢查一個(gè)對(duì)象實(shí)例是不是在某個(gè)父類 45 46 // alert(myNeighborsHouse instances House); 47 // alert(myNeighborsHouse instances Accommodation);

?

我們之前曾使用prototype關(guān)鍵字來(lái)傳給構(gòu)造函數(shù)添加過(guò)方法和屬性，所有通過(guò)這個(gè)構(gòu)造函數(shù)創(chuàng)建的對(duì)象都能訪問(wèn)到這些方法和屬性。
如果我們?cè)噲D訪問(wèn)對(duì)象的某個(gè)方法或?qū)傩?#xff0c;但構(gòu)造函數(shù)的原型并沒(méi)有這個(gè)方法或?qū)傩?#xff0c;此時(shí)JavaScript并不會(huì)馬上拋出異常，而是會(huì)首先檢查當(dāng)前構(gòu)造函數(shù)的所有父構(gòu)造函數(shù)，
看這些父構(gòu)造函數(shù)是否包含該方法或?qū)傩浴?br />
*注意：當(dāng)創(chuàng)建一個(gè)子類時(shí)，要確保將子類的constructor屬性指向子類本身的構(gòu)造函數(shù)，因?yàn)閺脑椭兄苯訌?fù)制過(guò)來(lái)的constructor值默認(rèn)指向的是父類的構(gòu)造函數(shù)。

我們看到instanceof關(guān)鍵字會(huì)沿原型鏈進(jìn)行查詢,這意味著通過(guò)instanceof關(guān)鍵字可以判斷一個(gè)對(duì)象實(shí)例是不是由某個(gè)構(gòu)造器，或者該構(gòu)造器的某一個(gè)父構(gòu)造器創(chuàng)建的。
JavaScript中的原型鏈可以一直向上追溯到內(nèi)建的Object的類型，因?yàn)镴avaScript的所有變量最終都是繼承自該類型。

alert(myHouse instanceof House);//true
alert(myHouse instanceof Accommodation);//true 因?yàn)镠ouse繼承自Accommodation
alert(myHouse instanceof Object);//true，因?yàn)樗袑?duì)象都繼承自JavaScript的內(nèi)置對(duì)象Object

?

●封裝

當(dāng)通過(guò)繼承對(duì)已有的類進(jìn)行改變或特殊化時(shí),父“類”的所有屬性和方法對(duì)子類都是可用的。在子類中不需要額外生命或者定義任何東西就能夠使用父類的屬性和方法。這種特性被稱為封裝;子類只需要定義那些在父類基礎(chǔ)上新增的屬性和方法即可。

●多態(tài)

在構(gòu)造一個(gè)新的子類來(lái)繼承并擴(kuò)展一個(gè)“類”的時(shí)候，你可能需要將某個(gè)方法替換為一個(gè)同名的新方法，新方法和原方法功能類似，但對(duì)子類做了針對(duì)性的改變。這就是多態(tài)，在JavaScript中實(shí)現(xiàn)多態(tài)很簡(jiǎn)單，只需重寫一個(gè)函數(shù)并給它一個(gè)和原方法相同的方法名即可。

（2）多態(tài)

?

1 // 定義父"類" Accommodation 2 function Accommodation(){ 3 this.isLocked=false; 4 this.isAlarmed=false; 5 } 6 // 為所有的Accommodation添加方法,執(zhí)行一些常見(jiàn)動(dòng)作 7 Accommodation.prototype.lock=function(){ 8 this.isLocked=true; 9 } 10 Accommodation.prototype.unlock=function(){ 11 this.isLocked=false; 12 } 13 Accommodation.prototype.alarm=function(){ 14 this.isAlarmed=true; 15 alert("Alarm activated"); 16 } 17 Accommodation.prototype.deactivateAlarm=function(){ 18 this.isAlarmed=false; 19 alert("Alarm deactivated"); 20 } 21 //為House定義一個(gè)子類 22 function House(){} 23 24 //繼承自Accommodation 25 House.prototype=new Accommodation(); 26 //針對(duì)House"類"重定義lock方法，即多態(tài) 27 28 House.prototype.lock=function(){ 29 //執(zhí)行父類Accommodation的lock方法。可以通過(guò)“類”的原型直接訪問(wèn)這個(gè)方法。我們通過(guò)函數(shù)的call 30 //方法對(duì)上下文傳遞給該方法，從而確保在lock方法中任何對(duì)this的引用都指向當(dāng)前這個(gè)House的對(duì)象實(shí)例 31 Accommodation.prototype.lock.call(this); 32 alert(this.isLocked);//true 說(shuō)明上面對(duì)lock方法的調(diào)用是正確的 33 //調(diào)用繼承自Accommodation的alarm方法 34 // this.alarm(); 35 } 36 //以同樣的方式重定義unlock方法 37 House.prototype.unlock=function(){ 38 Accommodation.prototype.unlock.call(this); 39 this.deactivateAlarm(); 40 }

注意觀察我們是如何在重寫的新方法中訪問(wèn)正在進(jìn)行多態(tài)化的原方法的，我們只需要通過(guò)父“類”定義中的prototype屬性直接訪問(wèn)這個(gè)方法就可以了。因?yàn)樵摲椒ㄖ邪瑢?duì)其上下文的引用，即this，我們需要保證this指向的是通過(guò)子類創(chuàng)建的對(duì)象實(shí)例所代表的上下文。

我們通過(guò)調(diào)用call方法來(lái)實(shí)現(xiàn)這一點(diǎn)，該方法對(duì)JavaScript中所有函數(shù)都可用，其作用就是將一個(gè)函數(shù)的上下文應(yīng)用到另外一個(gè)函數(shù)身上。

●JavaScript函數(shù)的apply和call方法

我們之前討論上下文的問(wèn)題；JavaScript中的this關(guān)鍵字指向的是包含當(dāng)前方法的那個(gè)對(duì)象，而在面向?qū)ο蟮腏avaScript編程中，this指向的就是由某個(gè)“類”創(chuàng)建的一個(gè)對(duì)象實(shí)例。

當(dāng)調(diào)用其他對(duì)象而非代表當(dāng)前上下文的對(duì)象的方法時(shí)，該方法中所有對(duì)this的引用都指向此方法所在的對(duì)象，而非當(dāng)前代碼的執(zhí)行上下文——就是說(shuō)在調(diào)用這個(gè)方法時(shí)，你切換到了另外一個(gè)上下文中。在調(diào)用其他對(duì)象的方法時(shí)，我們需要一種機(jī)制來(lái)保持this原來(lái)的值。

為實(shí)現(xiàn)這一點(diǎn)，JavaScript提供了相似的兩個(gè)方法——apply和call，這兩個(gè)方法可以用于所有函數(shù)。

前面討論多態(tài)時(shí)，我們看到call這個(gè)方法可以用于在子類中調(diào)用父類的方法。在那個(gè)例子中，我們將指向子類對(duì)象實(shí)例的上下文直接傳給了一個(gè)通過(guò)父類原型來(lái)調(diào)用的方法。這個(gè)一來(lái)該方法中所有的this就會(huì)指向那個(gè)子類的對(duì)象實(shí)例，通過(guò)這種方式，我們將一個(gè)位置的上下文應(yīng)用到了另一個(gè)位置上。如果需要向函數(shù)傳遞函數(shù)，可以將這些函數(shù)在上下文后面列出。call和apply的區(qū)別在于，使用apply時(shí)，所有的參數(shù)都應(yīng)放在一個(gè)單獨(dú)數(shù)組參數(shù)中，而在使用call的時(shí)候，參數(shù)應(yīng)該一次列出把并用逗號(hào)隔開(kāi)。

?（3）在一個(gè)函數(shù)上使用apply和call方法

1 // 定義一個(gè)簡(jiǎn)單的"類" 2 function Accommodation(){ 3 this.isAlarmed=false; 4 } 5 //創(chuàng)建一個(gè)對(duì)象，其方法可以被代碼中的其他對(duì)象所使用一該對(duì)象也被稱為一個(gè)“mixin”（混入） 6 var AlarmSystem={ 7 arm:function(message){ 8 this.isAlarmed=true; 9 alert(message); 10 }, 11 disarm:function(message){ 12 this.isAlarmed=false; 13 alert(message); 14 } 15 }; 16 var myHouse =new Accommodation(); 17 //通過(guò)call，將對(duì)象實(shí)例上下文傳入arm函數(shù) 18 AlarmSystem.arm.call(myHouse,"Alarm activated"); 19 //arm函數(shù)中this的值指向通過(guò)call傳入的對(duì)象實(shí)例，所有myHouse對(duì)象的isAlarmed屬性被改變了 20 alert(myHouse.isAlarmed);//true 21 //通過(guò)apply也能達(dá)到同樣的效果，只不過(guò)參數(shù)是通過(guò)數(shù)組來(lái)進(jìn)行傳遞的 22 AlarmSystem.disarm.apply(myHouse,["Alarm activated"]); 23 alert(myHouse.isAlarmed);//false

◆arguments

執(zhí)行一個(gè)函數(shù)時(shí)，我們傳入函數(shù)的所有參數(shù)都成為可以在該函數(shù)中使用的變量。除此之外，JavaScript還有一個(gè)可以在函數(shù)中使用的保留關(guān)鍵字arguments，我們可以把a(bǔ)rguments看作一個(gè)數(shù)組arguments，其中依次包含了傳入該函數(shù)的各個(gè)參數(shù)。

設(shè)想你有一個(gè)函數(shù)，你想用這個(gè)函數(shù)來(lái)對(duì)所有作為參數(shù)傳入的數(shù)字進(jìn)行加和。如果你不想指定具體有幾個(gè)參數(shù)，可以將參數(shù)列表清空，轉(zhuǎn)而使用arguments這個(gè)偽數(shù)組來(lái)獲取參數(shù)，如代碼（4）所示。之所以稱arguments為偽數(shù)組時(shí)因?yàn)殡m然可以通過(guò)for循環(huán)對(duì)其進(jìn)行遍歷，但它不具備標(biāo)準(zhǔn)數(shù)組的方法，例如排序方法，所有在使用arguments的時(shí)候不應(yīng)該用到這些數(shù)組方法。

（4）arguments對(duì)象

1 // 創(chuàng)建一個(gè)函數(shù)，對(duì)傳入函數(shù)的所有參數(shù)進(jìn)行加和 2 var add=function(){ 3 //創(chuàng)建一個(gè)變量用來(lái)保存總和 4 var total=0; 5 //arguments這個(gè)偽數(shù)組包含所有傳入該函數(shù)的參數(shù)，遍歷每個(gè)參數(shù)并將加入總和中 6 7 for(var index=0,length=arguments.length;index<length;index++){ 8 total=total+ arguments[index]; 9 } 10 return total; 11 } 12 //用不同數(shù)量的參數(shù)對(duì)函數(shù)進(jìn)行測(cè)試 13 alert(add(1,1));//2 14 alert(add(1,2,3));//6 15 alert(add(12,123,3,1234));//1372

當(dāng)使用函數(shù)的apply方法時(shí),arguments偽數(shù)組就體現(xiàn)其價(jià)值了。因?yàn)閍pply方法將所有參數(shù)放入了一個(gè)數(shù)組內(nèi)進(jìn)行傳遞，當(dāng)被調(diào)用的函數(shù)與當(dāng)前函數(shù)擁有相同參數(shù)時(shí)，我們只需要傳入arguments，就把當(dāng)前函數(shù)的所有參數(shù)傳遞給了另一個(gè)函數(shù)。這對(duì)對(duì)象的繼承和多態(tài)很有用，因?yàn)槲覀兛梢酝ㄟ^(guò)arguments，將子類方法的所有參數(shù)直接傳遞給父類中的相似方法。

（5）在子類中使用arguments偽數(shù)組

1 // 定義父類Accommodation 2 function Accommodation(){ 3 this.isAlarmed=false; 4 } 5 Accommodation.prototype.alarm=function(note,time){ 6 var message="Alarm activted"+time+"with the note:"+note; 7 this.isAlarmed=true; 8 alert(message); 9 } 10 //定義子類House 11 function House(){ 12 this.isLocked=false; 13 } 14 //繼承Accommodation 15 House.prototype=new Accommodation(); 16 //為House子類重定義alarm方法，方法定義中沒(méi)有列出參數(shù)，因?yàn)槲覀儠?huì)把所有參數(shù)直接傳遞給父類中的同名方法 17 House.prototype.alarm=function(){ 18 this.isLocked=true; 19 //調(diào)用父類Accommodation的alarm方法，將當(dāng)前函數(shù)的所有參數(shù)直接傳遞給父類方法以無(wú)需將這些參數(shù)一一列出 20 Accommodation.prototype.alarm.apply(this,arguments); 21 } 22 //創(chuàng)建子類的一個(gè)對(duì)象實(shí)例并進(jìn)行測(cè)試 23 var myHouse=new House(); 24 myHouse.alarm("Activating",new Date());//彈出警告消息 25 26 alert(myHouse.isLocked);//true

?●公有，私有，以及受保護(hù)的屬性和方法

在之前的例子中，我們創(chuàng)建了很多“類”模板，這些類模板將屬性和方法綁定到構(gòu)造函數(shù)的prototype屬性上，或者通過(guò)this關(guān)鍵字，將其綁定到這些“類”創(chuàng)建的對(duì)象實(shí)例所代表的上下文中。通過(guò)這種方法創(chuàng)建的屬性和方法都是公有的，也就是說(shuō)這些屬性和方法對(duì)一個(gè)“類”的所有對(duì)象實(shí)例都可用，從而代碼中所有能夠訪問(wèn)這些對(duì)象實(shí)例的地方都能使用這些屬性和方法。

然而在某些情況下，你可能希望能夠限制某些屬性和方法的暴露程度，使它們不能直接通過(guò)對(duì)象實(shí)例本身被隨意訪問(wèn)，修改或調(diào)用。許多傳統(tǒng)的編程語(yǔ)言可以將屬性和方法定義為公有，私有，或者受保護(hù)的，以此來(lái)限制對(duì)這些屬性和方法的訪問(wèn)。私有變量或方法在類定義之外不能進(jìn)行讀寫；受保護(hù)的變量不能被直接訪問(wèn)，但可以通過(guò)一個(gè)包裝方法對(duì)其讀寫。這些包裝方法通常被稱為getter和setter，你可以通過(guò)這些方法讀取或者設(shè)置對(duì)象實(shí)例的屬性值。如果你只定義了一個(gè)getter函數(shù)，那么變量在類定義之外就變?yōu)榱酥蛔x的了。在JavaScript中并沒(méi)有具體的語(yǔ)法來(lái)定義私有或者受保護(hù)的變量或方法，不過(guò)我們可以對(duì)聲明“類”的方法做一些改變，從而限制對(duì)屬性和變量的訪問(wèn)。

在構(gòu)造函數(shù)中通過(guò)var定義的變量其作用域局限于該構(gòu)造函數(shù)內(nèi)——在prototype上定義的方法無(wú)法訪問(wèn)這個(gè)變量，因?yàn)檫@些方法有其自己的作用域。要想通過(guò)公有的方法來(lái)訪問(wèn)私有的變量，需要?jiǎng)?chuàng)建一個(gè)同時(shí)包含兩個(gè)作用域的心作用域。為此，我們可以創(chuàng)建一個(gè)自我執(zhí)行的函數(shù)，被稱為閉包。該函數(shù)完全包含了“類”的定義時(shí)，包括所有私有變量以及原型方法，如代碼（6）

JavaScript有一個(gè)非強(qiáng)制性的但很有用的編程慣例，就是對(duì)所有私有變量或函數(shù)名加一個(gè)下劃線（_）作為前綴，以標(biāo)識(shí)它們是私有的。這有助于你以及項(xiàng)目組的其他開(kāi)發(fā)人員更好地理解每個(gè)“類”的作者的意圖。

（6）公有、私有以及受保護(hù)的屬性和方法

?

1 //我們將“類”的定義包在一個(gè)自我執(zhí)行的函數(shù)里，這個(gè)函數(shù)返回我們所創(chuàng)建的“類”并將其保存在一個(gè)變量中以便在后面的代碼中使用 2 3 var Accommodation =(function(){ 4 //定義"類"的構(gòu)造函數(shù)，因?yàn)樘幵谝粋€(gè)新的函數(shù)內(nèi)，我們也切換到了一個(gè)新的作用域中，所以可以使用與保存函數(shù)返回值得那個(gè)變量相同的名字 5 function Accommodation(){} 6 //此處定義所有變量都是“私有的”，這些變量在當(dāng)前作用域之外不可用，可以通過(guò)給變量名添加下劃線前綴來(lái)標(biāo)識(shí)這一點(diǎn) 7 var _isLocked=false, 8 _isAlarmed=false, 9 _alarmMessage="Alarm activated"; 10 11 //僅在當(dāng)前作用域中定義的函數(shù)（而未在構(gòu)造函數(shù)的原型上定義）也都是“私有的” 12 function _alarm(){ 13 _isAlarmed=true; 14 alert(_alarmMessage); 15 } 16 function _disableAlarm(){ 17 _isAlarmed=false; 18 } 19 //所有定義在原型上的方法都是“公有的”,當(dāng)我們?cè)诖颂巹?chuàng)建的“類”在閉包結(jié)束處被返回后，就可以再當(dāng)前作用域之外訪問(wèn)這些方法了 20 Accommodation.prototype.lock=function(){ 21 _isLocked=true; 22 _alarm(); 23 24 } 25 Accommodation.prototype.unlock=function(){ 26 _isLocked=false; 27 _disableAlarm(); 28 } 29 //定義一個(gè)getter函數(shù)來(lái)對(duì)私有變量_isLocked的值進(jìn)行只讀訪問(wèn)————相當(dāng)于把變量定義為了“受保護(hù)的” 30 Accommodation.prototype.getIsLocked=function(){ 31 return _isLocked; 32 } 33 //定義一個(gè)setter函數(shù)來(lái)對(duì)私有變量_alarmMessage進(jìn)行只寫訪問(wèn)——相當(dāng)于定義為了“受保護(hù)的” 34 Accommodation.prototype.setAlarmMessage=function(message){ 35 _alarmMessage=message; 36 } 37 //返回在這個(gè)作用域中創(chuàng)建的“類”,使之在外層作用域中即后面代碼的所有位置都可用。只有公有的屬性和方法是可用的 38 39 return Accommodation; 40 }()); 41 42 43 //創(chuàng)建一個(gè)對(duì)象實(shí)例 44 var house =new Accommodation(); 45 house.lock();//彈出警告消息 “Alarm activated” 46 // house._alarm();//錯(cuò)誤！ _alarm函數(shù)從未被公開(kāi)暴露，所以無(wú)法直接通過(guò)“類”的對(duì)象實(shí)例進(jìn)行訪問(wèn) 47 48 alert(house._isLocked);//undefined (_isLocked是私有的，在閉包外都訪問(wèn)不到) 49 50 house.getIsLocked();//true （返回__isLocked的值，但是不允許對(duì)其進(jìn)行直接訪問(wèn)，所以該變量是只讀的） 51 52 house.setAlarmMessage("Hello world"); 53 house.lock();//彈出警告消息 “Hello world”

?一般情況下,我們應(yīng)該將所有變量和函數(shù)都定義為私有的,除非明確需要將某些變量或方法公開(kāi)暴露給外部。即使需要公開(kāi)暴露，也應(yīng)先考慮使用getter以及setter方法來(lái)訪問(wèn)變量,
這么做的好處是可以顯示他人對(duì)稱的“類”所能實(shí)施的操作，使其只能通過(guò)“類”提供的功能完成其需求，這樣有助于減少“類”的使用者代碼出錯(cuò)的機(jī)會(huì)。

●簡(jiǎn)化繼承

我們可以通過(guò)定義一個(gè)基類來(lái)簡(jiǎn)化對(duì)象的創(chuàng)建和繼承，其他所有類的創(chuàng)建都可以通過(guò)這個(gè)基類來(lái)完成。我們?cè)谶@個(gè)基類上定義一個(gè)方法使之可以通過(guò)該方法來(lái)繼承其自身，并允許子類通過(guò)一個(gè)屬性來(lái)訪問(wèn)父類，這么做可以讓子類的創(chuàng)建和使用變得簡(jiǎn)單很多。我們還可以將那些用來(lái)在原型上設(shè)置方法的代碼包裝在一個(gè)單獨(dú)的對(duì)象直接量里，甚至將構(gòu)造函數(shù)也包含在該直接量中，這樣一來(lái)“類”的創(chuàng)建就變得輕而易舉了。如代碼1-19
代碼清單1-19　　一個(gè)用于簡(jiǎn)化其他“類”創(chuàng)建的基“類”

?

代碼清單1-20　　“類”創(chuàng)建器的實(shí)際使用

?

?

1.2?代碼規(guī)范和命名

前面詳細(xì)介紹了如何在JavaScript中進(jìn)行面向?qū)ο缶幊?#xff0c;現(xiàn)在來(lái)看一下我們遵循什么樣的代碼規(guī)范，以及如何對(duì)變量和函數(shù)的命名，以便讓名字本身傳達(dá)含義，并確保大型團(tuán)隊(duì)里的所有成員都能保持相似的編程風(fēng)格。
在JavaScript中，我們通過(guò)關(guān)鍵字var加變量名以及一個(gè)可選的變量初值來(lái)定義變量，這樣就可以將變量保存在內(nèi)存中以便在代碼中對(duì)其復(fù)用。同樣的函數(shù)也可以被保存在內(nèi)存中并重復(fù)執(zhí)行，我們通過(guò)關(guān)鍵字function加函數(shù)名來(lái)定義函數(shù)。
你可以隨便對(duì)變量和函數(shù)進(jìn)行命名，前提是這些名字遵守下面規(guī)則.

名字的開(kāi)頭必須時(shí)下面這些字符之一
?□ a-z、A-Z中的一個(gè)字母
?□ 下劃線_
?□ $符號(hào)
第一個(gè)字符之后，除了以上字符之外還可以使用0-9的數(shù)字
以下例子都是合法的JavaScript變量名和函數(shù)名

1 var a; 2 3 function A() {}; 4 var a1; 5 6 function _() {}; 7 var _a; 8 9 function $() {}; 10 var $_$;

這些是都是語(yǔ)言本身的固定規(guī)則，但是作為開(kāi)發(fā)人員為了便于開(kāi)發(fā)和維護(hù)，我們希望代碼是易讀易懂的，所以除了這些固定的規(guī)則之外，我們會(huì)規(guī)定一些額外的命名規(guī)范，這些規(guī)范被很多開(kāi)發(fā)人員和編程語(yǔ)言所采納。要切實(shí)遵循這些命名規(guī)范，你就能更容易清楚自己的代碼中每個(gè)變量時(shí)干什么的，當(dāng)然也更好的理解別人的代碼。

1.2.1?規(guī)則1：使用描述性的名字

這條規(guī)則是最為重要的，所以我把它放在了第一位。變量名代表了變量中所保存的數(shù)據(jù)，所以我們需要給變量起一個(gè)最能確切描述其用途的名字，使代碼更易讀易懂。如下所示：

var greeting = "Hello world";

1.2.2 規(guī)則2：以小寫字母開(kāi)頭

變量名開(kāi)頭使用小寫字母，然后在后面的部分也盡可能多地使用小寫字母。這么做時(shí)為了避免與JavaScript的內(nèi)建類型和對(duì)象發(fā)生混淆，這些內(nèi)建類型和對(duì)象都以大寫字母開(kāi)頭，例如String，Object，Math.

var age = 35;

不過(guò)在我的代碼中這條規(guī)則有幾個(gè)體例。首先是使用jQuery的時(shí)候，我會(huì)將查找到的DOM元素保存在變量中以免對(duì)其進(jìn)行重復(fù)加載。在這種情況下，我會(huì)在這些變量名前面加一個(gè)$符號(hào)作為前綴，以便將這些表示DOM結(jié)點(diǎn)的變量和代碼中的其他變量加以區(qū)別。$前綴后面的部分則遵循和其他變量一樣的規(guī)則。例如：

var $body = $(document.body);

第二個(gè)特征時(shí)如何對(duì)那些作為構(gòu)造器來(lái)使用的函數(shù)進(jìn)行命名。稍后會(huì)對(duì)構(gòu)造器進(jìn)行更詳細(xì)的考察，簡(jiǎn)單說(shuō)JavaScript中的內(nèi)建類型都是構(gòu)造器，例如String，Number，Boolean等。所有用new關(guān)鍵字來(lái)調(diào)用函數(shù)都是構(gòu)造器。這些構(gòu)造器名字的首字母都應(yīng)該是大寫，例如：

function MyTime() {};

var myTime = new MyTime();

第三個(gè)特例，我們?cè)谥罢鹿?jié)也提到了，就是構(gòu)造函數(shù)內(nèi)的私有變量和函數(shù)應(yīng)該在名字前加一個(gè)下劃線(_)作為前綴，以區(qū)別于那些公有的變量和方法

?

1.2.3?規(guī)則3:使用駱駝命名（又稱駝峰命名法）來(lái)分割單詞

規(guī)則1要求我們使用描述性名字，但如果我們只使用小寫字母的話，當(dāng)名字包含多個(gè)單詞時(shí)就會(huì)難以閱讀，例如：

var myemailaddress = "123@qq.com";

駝峰命名:
var myEmailAddress = "123@qq.com";

?

1.2.4 規(guī)則4:全局常量使用全大寫的名字

這條規(guī)則關(guān)心的是那些經(jīng)常在計(jì)算中用到的所謂的幻數(shù)（magic number），例如在計(jì)算日期和時(shí)間時(shí)經(jīng)常用到的一些零散數(shù)組，或者在一些計(jì)算中用到的真是世界中的常數(shù)值例如Pi，不少開(kāi)發(fā)人員習(xí)慣在用到這些數(shù)字的時(shí)候直接使用它們，這雖然可行但是會(huì)導(dǎo)致混亂。下面例子演示了這一點(diǎn)。

var today = new Date();
todayInDays = today * 1000 * 60 * 60 * 24;

乍看上去，這段代碼只是一系列數(shù)字而已，這些數(shù)字時(shí)干什么的并不清楚。通過(guò)定義變量來(lái)對(duì)這些數(shù)字進(jìn)行命名之后，讀懂這段代碼就容易多了。我們用全大寫的字符來(lái)標(biāo)明這些變量的類型是固定數(shù)值，也就是常量————雖然常量在其他很多編程語(yǔ)言中是一個(gè)特性，但JavaScript并不具備這一點(diǎn)。常量名字中的單詞通過(guò)下劃線（_）來(lái)進(jìn)行分割。如代碼所示：

1 var today = new Date(), 2 MILLISECS_IN_1_SEC = 1000, 3 SECS_IN_1_MIN = 60, 4 MINS_IN_1HOUR = 60; 5 todayInDays = today * MILLISECS_IN_1_SEC * SECS_IN_1_MIN * MINS_IN_1HOUR;

?

這樣的確增加了代碼量，但我認(rèn)為為了讓代碼具備更好的可讀性這是值得的。這些常量可以在代碼中反復(fù)重用，代碼中的各種計(jì)算也因此變得更容易理解。

1.2.5?規(guī)則5：集中在一個(gè)語(yǔ)句中聲明函數(shù)體的所有變量并將其置于函數(shù)體頂部

JavaScript中可以使用關(guān)鍵字var用簡(jiǎn)寫的方式在一個(gè)語(yǔ)句中同時(shí)定義多個(gè)變量，具體方式是用逗號(hào)隔開(kāi)每個(gè)變量聲明。確保在使用變量之前對(duì)其進(jìn)行聲明時(shí)明智的，這樣做可以避免執(zhí)行代碼時(shí)出錯(cuò)。因此我建議你將用到的所有變量在函數(shù)體頂部和JavaScript文件頂部進(jìn)行聲明，并將這些生命合并到一個(gè)語(yǔ)句中。注意你不需要立即對(duì)這些變量進(jìn)行初始化，初始化可以稍后進(jìn)行，這里需要做的是一次性地提前所有變量進(jìn)行聲明。用逗號(hào)和換行符分割各個(gè)變量，然后為了保證可讀性，我們將變量名首字母對(duì)其，如下所示：

1 var myString = "hi", 2 allStrongTags = "/<strong>(.*?)</strong>/g", 3 tagContents = "&1", 4 outputString; 5 outputString = myString.replace(allStrongTags, tagContents);

?

變量和函數(shù)名提升（Hoisting）
在其他很多編程語(yǔ)言中，變量可以在任意一個(gè)代碼塊中進(jìn)行定義，例如一個(gè)for循環(huán)或者任何一個(gè)通常用一對(duì)花括號(hào)來(lái)標(biāo)識(shí)的代碼塊，然后該變量的作用域就限定在那個(gè)代碼塊中了。而在
JavaScript中，我們知道作用域被限定為只在函數(shù)級(jí)起作用，這就使一些習(xí)慣于用其他語(yǔ)言進(jìn)行開(kāi)發(fā)的開(kāi)發(fā)人員可能在這個(gè)問(wèn)題上出錯(cuò)，如代碼所示：

代碼清單1-21 代碼塊和作用域

1 function myFunction() { 2 var myArray = ["January", "February", "Maich", "April", "May"]; 3 myArrayLength = myArray.length; 4 counter = 0; 5 for(var index = 0; index < myArrayLength; index++) { 6 //每循環(huán)一次counter的值加1 7 counter = index + 1; 8 } 9 //這些變量的值應(yīng)該是符合期望的 10 alert(counter); // 5 11 alert(index); //5(因?yàn)樵谂卸ㄑh(huán)條件之前循環(huán)遞進(jìn)了一步) 12 alert(myArrayLength); //5 13 if(myArrayLength > 0) { 14 //在很多語(yǔ)言中，在這樣一個(gè)代碼塊中定義的變量其作用域也局限于該代碼中 15 //但JavaScript不是這樣的，所以在代碼塊中定義變量時(shí)要注意這一點(diǎn) 16 var counter, 17 index = 0, 18 myArrayLength, 19 counter = 0; 20 } 21 //即使代碼塊中使用了var來(lái)進(jìn)行定義，counter和index的值還是在if語(yǔ)句中被改變了 22 alert(counter); //0 23 alert(index); //0 24 //注意雖然在代碼塊中用var對(duì)myArrayLength進(jìn)行了重定義，但其值并未發(fā)生改變 25 //這是因?yàn)镴avaScript在函數(shù)執(zhí)行之前就將變量名“提升”到了函數(shù)頂部 26 alert(myArrayLength); //5 27 28 } 29 myFunction();

JavaScript有一種特性叫作"提升"，就是說(shuō)變量和函數(shù)聲明會(huì)在內(nèi)部被提升到其定義所在函數(shù)體的頂部。這意味著任何一個(gè)變量名的定義都在其所在的作用域（通常是一個(gè)函數(shù)）的頂部就可以了，
雖然并不一定是初始值。為了減少麻煩，最好在函數(shù)開(kāi)頭就列出函數(shù)中所要用到的所有變量，不管是否進(jìn)行初始化，因?yàn)檫@么做是對(duì)JavaScript內(nèi)部進(jìn)行的變量提升行為是最好的模仿，能夠減少由于使用未知變量定義和變量值所引起的困惑，如代碼所示：
?在函數(shù)開(kāi)頭處對(duì)函數(shù)中用到的所有變量進(jìn)行定義

?

代碼清單1-22 ? ?在函數(shù)開(kāi)頭處對(duì)函數(shù)中用到的所有變量進(jìn)行定義

2 function myFunction(){ 3 //為了防止變量提升引起的錯(cuò)誤，我們?cè)诤瘮?shù)頂部對(duì)其所有變量進(jìn)行定義 4 5 var myArray=['January','February','March','April','May']; 6 myArrayLength=myArray.length, 7 counter=0, 8 index=0; 9 //for循環(huán)的第一部分通常是用來(lái)定義循環(huán)變量的，現(xiàn)在由于我們將定義都放在函數(shù)體頂部了，所以可以省略這一部分 10 11 for(;index<myArrayLength;index++){ 12 counter=index+1; 13 } 14 //變量的值應(yīng)該不出所料 15 alert(counter);//5 16 alert(index);//5 17 alert(myArrayLength);//5 18 19 } 20 myFunction();

這一點(diǎn)對(duì)函數(shù)也同樣適用，函數(shù)名也會(huì)被提升，所以一個(gè)函數(shù)名在其當(dāng)前作用域的任何位置都可用，即使在定義函數(shù)之前，如代碼所示：

代碼清單1-23 函數(shù)的提升

function myFunction(){//因?yàn)镴avaScript的“提升”，在函數(shù)定義之前執(zhí)行一個(gè)函數(shù)是可行的 doSomething();function doSomething(){alert("Doing something");}}myFunction();

1.3 ECMAScript 5
1.3.1 JSON數(shù)據(jù)格式解析

1 var obj = { 2 "success": false, 3 error_message: "error" 4 }; 5 JSON.parse(obj); //返回對(duì)象直接量 6 JSON.stringify(obj); //返回包含JSON格式的數(shù)據(jù)的字符串

1.3.2 嚴(yán)格模式

在包含該字符串的文件或函數(shù)中，所有代碼都必須符合更嚴(yán)格的語(yǔ)言規(guī)則，這些規(guī)則有助于避免潛在的錯(cuò)誤和陷阱。在嚴(yán)格模式下，如果你使用了未定義的變量，JavaScript會(huì)報(bào)錯(cuò)。

同樣，如果你使用了包含兩個(gè)同名屬性和對(duì)象的直接量（我自己也曾因這一點(diǎn)而吃虧）,JavaScript也會(huì)發(fā)出警告；又比如detele關(guān)鍵字本應(yīng)該用在對(duì)象的屬性上，如果你將其用在變量或函數(shù)身上，

JavaScript也會(huì)提示。嚴(yán)格模式還禁止使用eval來(lái)執(zhí)行包含JavaScript代碼的字符串，因?yàn)檫@么做會(huì)引起安全問(wèn)題，其他代碼可能會(huì)將控制權(quán)從你所寫的代碼中奪走。

?

因?yàn)閳?zhí)行嚴(yán)格模式只需要添加一個(gè)簡(jiǎn)單的字符串，所以老的瀏覽器不會(huì)因此而出錯(cuò)，當(dāng)老瀏覽器執(zhí)行你的代碼時(shí)遇到這個(gè)語(yǔ)句，它們會(huì)將其作為一個(gè)字符串來(lái)執(zhí)行，因?yàn)檫@個(gè)字符串沒(méi)有被賦給任何變量，
所以實(shí)際上就被忽略了。比如代碼1-24的兩個(gè)函數(shù)，其中一個(gè)應(yīng)用了普通模式，而另一個(gè)應(yīng)用了嚴(yán)格模式。我已經(jīng)開(kāi)始在我所有的代碼中使用這個(gè)新的嚴(yán)格模式了，這么做是為了確保代碼質(zhì)量足夠高，我也建議你來(lái)使用。

代碼清單1-24 演示ECMAScript5的嚴(yán)格模式

1 //定義一個(gè)函數(shù) 2 function myFunction(){ 3 //使用一個(gè)之前未定義的變量將隱式地將其創(chuàng)建為全局變量 4 counter=1; 5 //用eval()來(lái)執(zhí)行包含JavaScript代碼的字符串不會(huì)報(bào)錯(cuò) 6 eval("alert(counter)");// 7 //delete關(guān)鍵字的作用是移除對(duì)象的屬性和方法，但是將其用在變量身上不會(huì)報(bào)錯(cuò) 8 delete counter; 9 } 10 myFunction(); 1 function myFunction(){ 2 "use strict" 3 //執(zhí)行這一條語(yǔ)句時(shí)會(huì)報(bào)錯(cuò)，因?yàn)閏ounter變量未定義 4 counter=1; 5 //eval因?yàn)榘踩珕?wèn)題應(yīng)該避免使用，所以這里會(huì)報(bào)錯(cuò) 6 eval("alert(counter)");// 7 //delete關(guān)鍵字只應(yīng)該被用于移除對(duì)象直接量的屬性和方法，所以這里會(huì)報(bào)錯(cuò) 8 delete counter; 9 } 10 myFunction();

1.3.3　　函數(shù)綁定

?我們之前介紹過(guò)可以用于JavaScript中所有函數(shù)的apply和call方法。ECMAScript5中增加了一個(gè)新的方法bind，這個(gè)方法不會(huì)直接執(zhí)行函數(shù)，而是會(huì)返回一個(gè)新的函數(shù)。這個(gè)新函數(shù)的上下文設(shè)定為調(diào)用bind方法時(shí)，作為第一個(gè)參數(shù)傳入的任意對(duì)象.

你在自己的代碼中可能已經(jīng)遇到

?

代碼清單1-15 函數(shù)的bind方法

1 var header=document.getElementById("header"); 2 eventHandlers={ 3 //定義一個(gè)包含三個(gè)方法的對(duì)象 4 onClick:function(){ 5 //如果onClick函數(shù)被調(diào)用時(shí)的執(zhí)行上下文是錯(cuò)誤的，以下兩個(gè)調(diào)用將失敗 6 this.onMouseDown(); 7 this.onMouseUp(); 8 }, 9 onMouseDown:function(){ 10 mouseState="down"; 11 }, 12 onMouseUp:function(){ 13 mouseState="up"; 14 } 15 }; 16 //強(qiáng)制eventHandlers.onClick使用正確的上下文，為此我們通過(guò)bind方法返回一個(gè)新的函數(shù) 17 //該函數(shù)就根據(jù)我們的要求綁定了相應(yīng)的上下文 18 header.addEventListener("click",eventHandlers.onClick.bind(eventHandlers),false); 19 //將<header>元素添加到頁(yè)面 20 document.body.appendChild(header);

1.3.4 數(shù)組方法

大多數(shù)專業(yè)的javascript開(kāi)發(fā)者每天都會(huì)用到數(shù)組，不管是用來(lái)進(jìn)行循環(huán)，排序還是組織數(shù)據(jù)。ECMAScript5為javascript開(kāi)發(fā)者的工具箱添加了一些大家期待已久的新方法，我么可以利用這寫新方法來(lái)處理這些數(shù)據(jù)結(jié)構(gòu)。

首先，也許也是最重要的，是我們需要一種方法，以便更容易地判斷一個(gè)變量是否包含數(shù)組數(shù)據(jù)。這也許聽(tīng)起來(lái)有點(diǎn)奇怪，但別忘了要判斷一個(gè)變量是否包含數(shù)組數(shù)據(jù)，我們需要首先將其轉(zhuǎn)成對(duì)象，然后再把它的值讀取到一個(gè)字符串中————簡(jiǎn)直是瘋 了！而在ECMAScript中，要檢查變量是否包含數(shù)組數(shù)據(jù)，我們只需要調(diào)用Array.isArray方法即可,如代碼1-26所示

代碼清單1-26　　ECMAScript5中的isArray方法

1 var months=["January","February","March","April","May"], 2 items={ 3 "0":"January" 4 }; 5 alert(Array.isArray(months));//true 6 alert(Array.isArray(items));//false

在之前版本中，要遍歷一個(gè)數(shù)組，我們需要?jiǎng)?chuàng)建一個(gè)for循環(huán)，然后對(duì)某種類型的索引計(jì)數(shù)器進(jìn)行迭代。EMAScript5引入了一個(gè)新的forEach方法,通過(guò)這個(gè)方法可以讓遍歷簡(jiǎn)單很多；只需要給方法傳遞一個(gè)函數(shù)，它就會(huì)對(duì)數(shù)組中的每個(gè)元素調(diào)用一次該函數(shù)，同時(shí)會(huì)將當(dāng)前遍歷的值、數(shù)組索引以及整個(gè)數(shù)組的引用傳遞給這個(gè)函數(shù)，如代碼清單1-27所示

代碼清單1-27 ECMAScript5的forEach方法

1 var months=["January","February","March","April","May"]; 2 //通過(guò)forEach方法我們可以遍歷數(shù)組中的每一個(gè)元素，同時(shí)每次執(zhí)行一個(gè)函數(shù) 3 months.forEach(function(value,index,fullArray){ 4 alert(value+"is months number"+(index+1)+"of"+fullArray.length); 5 });

如果你曾有過(guò)這樣的需求，需要判斷數(shù)組中的每個(gè)元素是否滿足一個(gè)由某函數(shù)所定義的特定條件，那你可苦苦等待ECMAScript5中的新every方法太久了。與之類似的還有一個(gè)some方法，該方法會(huì)在數(shù)組中至少有一個(gè)元素滿足給定條件時(shí)返回true。every方法和some方法的參數(shù)都和forEach方法相同，如代碼清單1-28所示。

代碼清單1-28 ECMAScript5中的every和some方法

1 var months=["January","February","March","April","May"], 2 //every方法遍歷數(shù)組中的每個(gè)元素，將每個(gè)元素和一個(gè)條件進(jìn)行比較 3 //如果數(shù)組中的每個(gè)元素都滿足這個(gè)條件，則every方法返回true，否則返回false 4 everyItemContaiinsR=months.every(function(value,index,fullArray){ 5 //根據(jù)當(dāng)前遍歷到的元素是否滿足你指定的條件來(lái)返回true或者false，這里的條件就是看value是否包含字母r 6 return value.indexOf("r")>=0; 7 }), 8 //some 方法便利數(shù)組中的每個(gè)元素并將其和某個(gè)元素對(duì)比 9 //如果數(shù)組中的任意一個(gè)元素滿足該條件，則some方法返回true，否則返回false 10 someItemContainsR=months.some(function(value,index,fullArrary){ 11 return value.indexOf("r")>=0; 12 }); 13 14 //不是所有元素都包含字母r 15 alert(everyItemContaiinsR);//false 16 //但有些元素包含 17 alert(someItemContainsR);//true

新的map方法可以讓你根據(jù)一個(gè)已有的數(shù)組創(chuàng)建一個(gè)新的數(shù)組，它在創(chuàng)建新數(shù)組的過(guò)程中，每生成一個(gè)元素時(shí)都執(zhí)行一個(gè)函數(shù)，如代碼清單1-29所示

代碼清單1-29 ECMAScript5中的map方法

1 var daysOfTheWeek=["Mondy","Tuesday","Wednesday"]; 2 //map方法通過(guò)遍歷一個(gè)已有的數(shù)組來(lái)生成一個(gè)全新的數(shù)組，它會(huì)在遍歷每個(gè)元素時(shí)執(zhí)行一個(gè)函數(shù)， 3 //并通過(guò)該函數(shù)來(lái)生成新數(shù)組中的對(duì)應(yīng)元素 4 daysFirstLetters=daysOfTheWeek.map(function(value,index,fullArray){ 5 return value="starts with"+value.charAt(0); 6 }); 7 alert(daysFirstLetters.join(","));//starts withM,starts withT,starts withW

ECMAScript5中新的filter數(shù)組方法和map一樣也會(huì)創(chuàng)建一個(gè)新的數(shù)組，不過(guò)新數(shù)組只包含滿足某個(gè)特定條件的那些元素，如代碼清單1-30所示

代碼清單1-30 ECMAScript5中的filter方法

1 var months=["January","February","March","April","May"], 2 //filer方法根據(jù)原有的數(shù)組創(chuàng)建一個(gè)削減版的數(shù)組，該數(shù)組只包含那些滿足某個(gè)特定條件的元素 3 monthsContainingR=months.filter(function(value,index,fullArray){ 4 //返回true或false來(lái)指示當(dāng)前數(shù)組元素是否應(yīng)該包含在過(guò)濾后的數(shù)組中，這里的判斷條件是看元素值是否包含字幕r 5 return value.indexOf("r")>=0; 6 }); 7 //唯一不包含字母r的月份是五月（May） 8 alert(monthsContainingR.join(","));//January,February,March,April

1.3.5 對(duì)象方法

ECMAScript5中對(duì)Object類型進(jìn)行了很多擴(kuò)展，這個(gè)javascript帶來(lái)了很多其他編程語(yǔ)言中的功能。首先，如果使用嚴(yán)格模式，ECMAScript5引入了一個(gè)新功能，就是可以將一個(gè)對(duì)象進(jìn)行鎖定，這樣在你代碼中的某個(gè)點(diǎn)之后，就不能向該對(duì)象添加新的屬性或者方法了。實(shí)現(xiàn)這一功能的新方法是object.preventExtensions，以及一個(gè)與之相關(guān)的Object.isExtensible方法，通過(guò)該方法你可以判斷是否可以對(duì)一個(gè)對(duì)象進(jìn)行擴(kuò)展，如代碼清單1-31所示

代碼清單1-31 ECMAScript5中的對(duì)象方法

1 //定義一個(gè)包含兩個(gè)屬性的簡(jiǎn)單對(duì)象 2 var personalDetails={ 3 name:"Den Odell", 4 email:"den.odell@me.com" 5 }; 6 alert(Object.isExtensible(personalDetails));//true ,因?yàn)槟J(rèn)對(duì)象都是可以擴(kuò)展的 7 //阻止對(duì)personalDetails對(duì)象進(jìn)行擴(kuò)展 8 Object.preventExtensions(personalDetails); 9 10 alert(Object.isExtensible(personalDetails));//false ,因?yàn)樵搶?duì)象被鎖定了 11 12 //嘗試為personalDetails對(duì)象添加一個(gè)新的屬性 13 personalDetails.age=35;//如果使用嚴(yán)格模式的話會(huì)拋出錯(cuò)誤，因?yàn)閷?duì)象是鎖定的

如果你想進(jìn)一步鎖定一個(gè)對(duì)象，使其已有的屬性值也無(wú)法改變，可以使用ECMAScript5中新的Object.freeze方法，如代碼清單1-32所示。

代碼清單1-32 ECMAScript5中對(duì)象的freeze方法

1 //定義一個(gè)有兩個(gè)屬性的簡(jiǎn)單對(duì)象 2 var personalDetails={ 3 name:"Den Odell", 4 email:"den.odell@me.com" 5 }; 6 //鎖定該對(duì)象，使其已有的屬性也無(wú)法改變 7 Object.freeze(personalDetails); 8 alert(Object.isFrozen(personalDetails));//true 9 personalDetails.name="wing";//如果在嚴(yán)格模式下會(huì)報(bào)錯(cuò)，因?yàn)閷?duì)象一旦被"凍住"就無(wú)法再改變其屬性值

對(duì)象中的每個(gè)屬性現(xiàn)在都有一系列的選項(xiàng)值，它們決定這個(gè)屬性將如何在之后的代碼中被使用。這些選項(xiàng)值包含在一個(gè)屬性描述符中，該屬性描述符是一個(gè)有四個(gè)屬性的對(duì)象直接量。要想讀取某個(gè)屬性的屬性描述符，可以使用新的Object.getOwnPropertyDescriptor方法，如代碼清單1-33所示。描述符中的所有屬性，除了value屬性之外，默認(rèn)值都是true

代碼清單1-33 ECMAScript5中對(duì)象的getOwnPropertyDescriptor方法

1 //定義包含兩個(gè)屬性的簡(jiǎn)單對(duì)象 2 3 var personalDetails={ 4 name:"wing", 5 email:"den.odell@me.com" 6 }; 7 Object.getOwnPropertyDescriptor(personalDetails,"name"); 8 //返回代表name屬性的如下對(duì)象直接量 9 //{ 10 // configurable:true, 11 // enumerable:true, 12 // value:"wing", 13 // writable:true 14 //}

在ECMAScript5中你可以在創(chuàng)建屬性的同時(shí)定義其屬性描述值，如代碼清單1-34所示

代碼清單1-34 ECMAScript5中的屬性定義

1 var personalDetails={ 2 name:"wing", 3 email:"den.odell@me.com" 4 }; 5 //為該對(duì)象單獨(dú)定義一個(gè)新的屬性 6 Object.defineProperty(personalDetails,"age",{ 7 value:35, 8 writable:false, 9 enumerable:true, 10 configurable:true 11 }); 12 //同時(shí)定義多個(gè)屬性 13 Object.defineProperty(personalDetails,{ 14 age:{ 15 value:35, 16 writable:false, 17 enumerable:true, 18 configurable:true 19 }, 20 town:{ 21 value:"wing", 22 writable:true 23 } 24 })

如果你需要得到一個(gè)包含某個(gè)對(duì)象所有屬性名的數(shù)組，那么可以用Object.keys方法來(lái)實(shí)現(xiàn),如代碼清單1-35

代碼清單1-35 ECMAScript5中對(duì)象的keys方法

1 var personalDetails={ 2 name:"wing", 3 email:"den.odell@me.com" 4 }, 5 keys=Object.keys(personalDetails); 6 alert(keys.join(","));//"name,email"

Object.create方法是一個(gè)功能強(qiáng)大的新方法,我們可以用該方法根據(jù)某個(gè)已有對(duì)象的屬性來(lái)創(chuàng)建一個(gè)新的對(duì)象。該方法一個(gè)可能的用處是創(chuàng)建某個(gè)已有對(duì)象的副本，如代碼清單1-36所示。

代碼清單1-36 ECMAScript5中對(duì)象的create方法

1 var personalDetails={ 2 firstName:"zhang", 3 lastName:"wei" 4 }, 5 //創(chuàng)建該對(duì)象的一個(gè)副本 6 fatherDetails=Object.create(personalDetails); 7 8 //定制這個(gè)副本對(duì)象 9 fatherDetails.firstName="chen"; 10 //通過(guò)原有對(duì)象所設(shè)置的屬性值未被更改 11 alert(fatherDetails.lastName);//"wei"

如果ECMAScript5中有一個(gè)值得你繼續(xù)深入研究的方法，那就是Object.create方法.

轉(zhuǎn)載于:https://www.cnblogs.com/wingzw/p/6681660.html

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的精通JavaScript--01面向对象JavaScript的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。