ECMA-262把對(duì)象定義為：”無(wú)需屬性的集合，其屬性可以包含基本值、對(duì)象或者函數(shù)。”嚴(yán)格來(lái)講，這就相當(dāng)于說(shuō)明對(duì)象是一組沒(méi)有特定順序的值。對(duì)象的每個(gè)屬性或方法都有一個(gè)名字，而每個(gè)名字都映射到一個(gè)值。正因?yàn)檫@樣，我們可以把ECMAScript的對(duì)象想象成散列表：無(wú)非就是一組名對(duì)值，其中值可以是數(shù)據(jù)或函數(shù)。

創(chuàng)建自定義對(duì)象最簡(jiǎn)單的方式就是創(chuàng)建一個(gè)Object的實(shí)例，然后再為他添加屬性和方法，如下所示：

var person = new Object();、person.name = "liubei";person.age = 29;
person.job = "shayemuyou";
person.sayName = function(){ 
 alert(this.name);
}

上面的例子創(chuàng)建了一個(gè)名為person的對(duì)象，并為他添加了三個(gè)屬性和一個(gè)方法。其中sayName()方法用于顯示name屬性，this.name將被解析為person.name，早期的開(kāi)發(fā)人員經(jīng)常使用這個(gè)模式來(lái)創(chuàng)建對(duì)象，后來(lái)對(duì)象字面量的方法成了創(chuàng)建對(duì)象的首選模式，上面的例子用對(duì)象字面量的語(yǔ)法可以寫成如下這樣：

var person = { 
 name:"liubei", 
 age:29, 
 job:"shayemuyou", 
 sayName:function(){  
 alert(this.name); 
 }
}

這個(gè)例子中的person對(duì)象和前面的對(duì)象是一樣的，都有相同的屬性和方法。

雖然Object構(gòu)造函數(shù)或者對(duì)象字面量的方法都可以用來(lái)創(chuàng)建單個(gè)對(duì)象，但是這些方法有個(gè)明顯的缺點(diǎn)：使用同一個(gè)接口創(chuàng)建很多對(duì)象，會(huì)產(chǎn)生大量的重復(fù)代碼。為了解決這個(gè)方法，人們開(kāi)始使用工廠模式的一種變體。

一、工廠模式

工廠模式是軟件工程領(lǐng)域一種廣為人知的設(shè)計(jì)模式，這種模式抽象了創(chuàng)建具體對(duì)象的過(guò)程。考慮到ECMAScript中無(wú)法創(chuàng)建類，開(kāi)發(fā)人員就發(fā)明了一種函數(shù)，用函數(shù)來(lái)封裝以特定接口創(chuàng)建對(duì)象的細(xì)節(jié)，如下所示：

function createPerson(name, age, job){ 
 var o = new Object();
   o.name = name; 
   o.age = age; 
   o.job = job;
   o.sayName = function(){  
   alert(this.name); 
 }
 return o;
}
var person1 = createPerson("wei",25,"software");
var person2 = createPerson("bu",25,"software");

函數(shù)createPerson()能夠根據(jù)接受的參數(shù)來(lái)構(gòu)建一個(gè)包含所有必要信息的Person對(duì)象?？梢远啻握{(diào)用這個(gè)函數(shù)，每次都會(huì)返回一個(gè)包含三個(gè)屬性一個(gè)方法的對(duì)象。工廠模式雖然解決了創(chuàng)建多個(gè)相似對(duì)象的問(wèn)題，但卻沒(méi)有解決對(duì)象識(shí)別的問(wèn)題，即怎么樣知道這是哪個(gè)對(duì)象類型。

二、構(gòu)造函數(shù)模式

像Array、Object這樣的原生構(gòu)造函數(shù)，在運(yùn)行時(shí)會(huì)自動(dòng)出現(xiàn)在執(zhí)行環(huán)境中。此外，我們可以創(chuàng)建自定義個(gè)構(gòu)造函數(shù)，從而定義自定義類型的屬性和方法。例如，我們可以使用構(gòu)造函數(shù)重寫上個(gè)例子：

function Person(name, age, job){ 
 this.name = name;
 this.age = age;
 this.job = job;
 this.sayName = function(){  
   alert(this.name); 
  }
}
var person1 = new Person("wei",25,"software");
var person2 = new Person("bu",25,"software");

在這個(gè)例子中，Person()函數(shù)取代了createPerson()函數(shù)，我們注意到Person()與createPerson()的不同之處在于：

沒(méi)有顯式的創(chuàng)建對(duì)象

直接將屬性和方法賦值給this對(duì)象

沒(méi)有return語(yǔ)句

此外，還應(yīng)該注意到函數(shù)名Person使用的是大寫字母P。按照慣例，構(gòu)造函數(shù)始終都應(yīng)該以一個(gè)大寫字母開(kāi)頭，而非構(gòu)造函數(shù)則應(yīng)該以一個(gè)小寫字母開(kāi)頭。這個(gè)做法借鑒了其他OO語(yǔ)言，主要是為了區(qū)別于ECMAScript中的其他函數(shù)。因?yàn)闃?gòu)造函數(shù)本身也是函數(shù)，只不過(guò)可以創(chuàng)建對(duì)象而已。

要?jiǎng)?chuàng)建一個(gè)Person實(shí)例，必須使用new操作符。以上這種方式會(huì)經(jīng)過(guò)以下四個(gè)步驟：

1、創(chuàng)建一個(gè)新對(duì)象

2、將構(gòu)造函數(shù)的作用域賦給新對(duì)象（因此this指向這個(gè)新對(duì)象）

3、執(zhí)行構(gòu)造函數(shù)中的代碼

4、返回新對(duì)象

在前面例子的最后，person1和person2分別保存著Person的一個(gè)不同的實(shí)例。這兩個(gè)對(duì)象都有一個(gè)constructor（構(gòu)造函數(shù)）屬性，該屬性指向Person。如下：

console.log(person1.constructor == Person); //true
console.log(person2.constructor == Person); //true

對(duì)象的constructor屬性最初是用來(lái)標(biāo)識(shí)對(duì)象類型的。但是，提到檢測(cè)對(duì)象類型，還是instanceof操作符比較可靠一些。我們?cè)谶@個(gè)例子中創(chuàng)建的對(duì)象都是Object對(duì)象的實(shí)例，也是Person對(duì)象的實(shí)例，這一點(diǎn)通過(guò)instanceof操作符可以驗(yàn)證。

console.log(person1 instanceof Object);
//trueconsole.log(person1 instanceof Person);
//trueconsole.log(person2 instanceof Object);
//trueconsole.log(person2 instanceof Person);
//true

創(chuàng)建自定義的構(gòu)造函數(shù)意味著將來(lái)可以將他的實(shí)例標(biāo)識(shí)為一種特定的類型；而這正是構(gòu)造函數(shù)模式勝過(guò)工廠模式的地方。在這個(gè)例子中，person1和person2之所以同是Object的實(shí)例，是因?yàn)樗械膶?duì)象都繼承自O(shè)bject。

構(gòu)造函數(shù)的主要問(wèn)題，就是每個(gè)方法都要在實(shí)例上重新創(chuàng)建一遍，造成內(nèi)存浪費(fèi)。在前面的例子中，person1和person2都有一個(gè)名為sayName()的方法，但是兩個(gè)方法不是同一Function的實(shí)例。不要忘了ECMAScript中的函數(shù)也是對(duì)象，因此每定義一個(gè)函數(shù)，也就是實(shí)例化了一個(gè)對(duì)象，從邏輯角度講，此時(shí)的構(gòu)造函數(shù)可以這樣定義：

function Person(name, age, job){ this.name = name;
 this.age = age;
 this.job = job;
 this.sayName = new Function("alert(this.name);")
 //與聲明函數(shù)在邏輯上是等價(jià)的
 }

從這個(gè)角度來(lái)看構(gòu)造函數(shù)，更容易看明白每個(gè)Person實(shí)例都會(huì)包含一個(gè)不同的Function實(shí)例的本質(zhì)。說(shuō)明白些，會(huì)導(dǎo)致不同的作用域鏈和標(biāo)識(shí)符解析，但是創(chuàng)建Function新實(shí)例的機(jī)制仍然是相同的。因此，不同實(shí)例上的同名函數(shù)是不相等的，以下代碼可以證實(shí)這一點(diǎn)。

alert(person1.sayName == person2.sayName);  //false

然而，創(chuàng)建兩個(gè)完成同樣任務(wù)的Function實(shí)例的確沒(méi)有必要；況且有this對(duì)象在，根本不用在執(zhí)行代碼前就把函數(shù)綁定到特定的對(duì)象上。因此，可以像下面這樣，通過(guò)把函數(shù)定義轉(zhuǎn)移到構(gòu)造函數(shù)外部來(lái)解決這個(gè)問(wèn)題。

function Person(name, age, job){
 this.name = name;
 this.age = age;
 this.job = job;
 this.sayName = sayName;
}
function sayName(){
 alert(this.name);
}

這樣做解決了多個(gè)函數(shù)解決相同問(wèn)題的問(wèn)題，但是有產(chǎn)生了新的問(wèn)題，在全局作用域中實(shí)際上只被某個(gè)對(duì)象調(diào)用，這讓全局對(duì)象有點(diǎn)名不副實(shí)。更讓人無(wú)法接受的是：如果對(duì)象需要定義很多方法，那么就要定義很多全局函數(shù)，于是我們這個(gè)自定義的引用類型就絲毫沒(méi)有封裝性可言了。好在這些問(wèn)題可以使用原型模式來(lái)解決。

三、原型模式

我們創(chuàng)建的每個(gè)函數(shù)都有一個(gè)prototype（原型）屬性，這個(gè)屬性是一個(gè)指針，指向一個(gè)對(duì)象，而這個(gè)對(duì)象的用途是包含可以由特定類型的所有實(shí)例共享的屬性和方法。使用原型對(duì)象的實(shí)例就是讓所有實(shí)例共享它所包含的屬性和方法。換句話說(shuō)，不必在構(gòu)造函數(shù)中定義對(duì)象的實(shí)例信息，而是可以將這些信息直接添加到原型對(duì)象中，如下所示：

function Person(){
}
Person.prototype.name = "wei";
Person.prototype.age = 27;
Person.prototype.job = "Software";
Person.prototype.sayName = function(){
 alert(this.name);
}
var person1 = new Person();
person1.sayName();  //"wei"
var person2 = new Person();
person2.sayName();  //"wei"
alert(person1.sayName == person2.sayName);

在此，我們將sayName()方法和所有的屬性直接添加在了Person的prototype屬性中，構(gòu)造函數(shù)變成了空函數(shù)。即便如此，我們?nèi)匀豢梢酝ㄟ^(guò)構(gòu)造函數(shù)來(lái)創(chuàng)建新對(duì)象，而且新對(duì)象還會(huì)具有相同的屬性和方法。但是與構(gòu)造函數(shù)不同的是，新對(duì)象的這些屬性和方法是由所有實(shí)例共享的。換句話說(shuō)，person1和person2訪問(wèn)的都是同一組屬性和同一個(gè)sayName()函數(shù)。要理解原型模式的工作原理，就必須先理解ECMAScript中原型對(duì)象的性質(zhì)。

原型對(duì)象的本性由于篇幅太長(zhǎng)將會(huì)在下一章節(jié)詳細(xì)分析。上面我們說(shuō)了原型模式的好處，接下來(lái)我們來(lái)看一下原型模式的缺點(diǎn)。原型模式省略了為構(gòu)造函數(shù)傳遞參數(shù)的這一環(huán)節(jié)，結(jié)果所有實(shí)例在默認(rèn)情況下都具有相同的屬性值。這會(huì)在某些程度上帶來(lái)一種不便，這并不是原型模式最大的問(wèn)題，因?yàn)槿绻覀兿霝橐粋€(gè)通過(guò)原型模式創(chuàng)建的對(duì)象添加屬性時(shí)，添加的這個(gè)屬性就會(huì)屏蔽原型對(duì)象的保存的同名屬性。換句話說(shuō)，就是添加的這個(gè)屬性會(huì)阻止我們?nèi)ピL問(wèn)原型中的屬性，但并不會(huì)改變?cè)椭械膶傩浴?/p>

原型模式最大的問(wèn)題是由其共享的本質(zhì)所導(dǎo)致的。原型中所有的屬性被很多實(shí)例共享，這種共享對(duì)函數(shù)非常合適，對(duì)包含基本值的屬性也說(shuō)的過(guò)去，但是對(duì)引用類型的屬性值來(lái)說(shuō)問(wèn)題就比較突出了，下面我們來(lái)看一個(gè)例子：

function Person(){
}
Person.prototype = {
 constructor:Person,
 name:"wei",
 age:29,
 friends:["乾隆","康熙"],
 sayName:function(){
  alert(this.name);
 }
}
var person1 = new Person();
var person2 = new Person();
person1.friends.push("嬴政");
console.log(person1.friends); //["乾隆","康熙","嬴政"]
console.log(person2.friends); //["乾隆","康熙","嬴政"]
console.log(person1.friends === person2.friends); //true

上面的例子中，Person.prototype對(duì)象有一個(gè)名為friends的屬性，該屬性包含一個(gè)字符串?dāng)?shù)組。然后創(chuàng)建了兩個(gè)Person的實(shí)例，接著修改person1.friends引用的數(shù)組，向數(shù)組中添加一個(gè)字符串，由于數(shù)組存在于Person.prototype中而不是person1中，所以person2.friends也會(huì)被修改。但是一般每個(gè)對(duì)象都是要有屬于自己的屬性的，所以我們很少看到有人單獨(dú)使用原型模式來(lái)創(chuàng)建對(duì)象。

四、組合使用構(gòu)造函數(shù)模式和原型模式

創(chuàng)建自定義類型最常見(jiàn)的方式就是組合使用構(gòu)造函數(shù)模式與原型模式。構(gòu)造函數(shù)模式用于定義實(shí)例屬性，原型模式用于定義方法和共享的屬性。結(jié)果，每個(gè)實(shí)例都會(huì)有自己的一份實(shí)例屬性的副本，但同時(shí)又共享著對(duì)方法的引用，最大限度的節(jié)省了內(nèi)存。另外，這種混成模式還支持向構(gòu)造函數(shù)傳遞參數(shù)；可謂是集兩種模式之長(zhǎng)。下面的代碼重寫了前面的例子：

function Person(name, age){
 this.name = name;
 this.age = age;
 this.friends = ["乾隆","康熙"];
}
Person.prototype = {
 constructor:Person,
 sayName:function(){
  alert(this.name);
 }
}
var person1 = new Person("wei",29);
var person2 = new Person("bu",25);
person1.friends.push("嬴政");
console.log(person1.friends); //["乾隆", "康熙", "嬴政"]
console.log(person2.friends); //["乾隆", "康熙"]
console.log(person1.friends === person2.friends); //false
console.log(person1.sayName === person2.sayName); //true

在這個(gè)例子中，實(shí)例屬性都是在構(gòu)造函數(shù)中定義的，而由所有實(shí)例共享的屬性constructor和方法sayName()則是在原型中定義的。所以修改了person1.friends并不會(huì)改變person2.friends，因?yàn)樗麄兎謩e引用了不同的數(shù)組。

這種構(gòu)造函數(shù)與原型模式混成的模式，是目前在ECMAScript中使用最廣泛、認(rèn)同度最高的一種創(chuàng)建自定義類型的方法。可以說(shuō)，這是用來(lái)定義引用的一種默認(rèn)形式。

五、動(dòng)態(tài)原型模式

有其他OO語(yǔ)言經(jīng)驗(yàn)的開(kāi)發(fā)人員在看到獨(dú)立的構(gòu)造函數(shù)和原型時(shí)，很可能會(huì)感到非常的困惑。動(dòng)態(tài)原型模式就是用來(lái)解決這個(gè)問(wèn)題的一個(gè)方案，它把所有的信息都封裝在了構(gòu)造函數(shù)中，而通過(guò)構(gòu)造函數(shù)中初始化原型（僅在必要的情況下），又保持了同時(shí)使用構(gòu)造函數(shù)和原型的優(yōu)點(diǎn)。換句話說(shuō)，可以通過(guò)檢查某個(gè)應(yīng)該存在的方法是否有效，來(lái)決定是否要初始化原型。來(lái)看一個(gè)例子：

function Person(name, age){
 this.name = name;
 this.age = age;
 this.friends = ["乾隆","康熙"];
 //注意if語(yǔ)句
 if(typeof this.sayName!="function"){
  Person.prototype.sayName = function(){
   alert(this.name);
  }
 }
}
var person1 = new Person("wei",29);
person1.friends.push("嬴政");
person1.sayName();

注意構(gòu)造函數(shù)代碼中的if語(yǔ)句，這里只在sayName()方法不存在的情況下才會(huì)將它添加到原型中。這斷代碼只有在第一次調(diào)用構(gòu)造函數(shù)的時(shí)候才會(huì)被執(zhí)行。此后，原型已經(jīng)被初始化，不需要再做什么修改。不過(guò)要記住，這里所做的修改能立即在所有實(shí)例中得到反映。因此，這種方法可以說(shuō)確實(shí)非常完美。其中if語(yǔ)句檢查的是初始化之后應(yīng)該存在的任何方法和屬性–不必再用一大堆if來(lái)檢查每個(gè)屬性和方法，只檢查其中一個(gè)即可。對(duì)于采用這樣模式創(chuàng)建的對(duì)象，還可以使用instanceof操作符來(lái)確定他的類型。

注意：使用動(dòng)態(tài)原型模式時(shí)，不能使用對(duì)象字面量重寫原型。如果在已經(jīng)創(chuàng)建了實(shí)例的情況下重寫原型，那么就會(huì)切斷現(xiàn)有的實(shí)例與新原型之間的聯(lián)系。

六、寄生構(gòu)造函數(shù)模式

通常，在上述幾種模式都不適合的情況下可以使用寄生構(gòu)造函數(shù)模式。這種模式的基本思想是創(chuàng)建一個(gè)函數(shù)，該函數(shù)的作用僅僅是封裝創(chuàng)建對(duì)象的代碼，然后再返回新創(chuàng)建的對(duì)象，但從表面看，這個(gè)函數(shù)又很像典型的構(gòu)造函數(shù)。來(lái)看一個(gè)例子：

function Person(name, age, job){
 var o = new Object();
 o.name = name;
 o.age = age;
 o.job = job;
 o.sayName = function(){
  alert(this.name);
 }
 return o;
}
var person = new Person("wei",29,"banzhuan");
person.sayName(); //"wei"

在這個(gè)例子中，Person函數(shù)創(chuàng)建了一個(gè)對(duì)象，并以相應(yīng)的屬性和方法初始化該對(duì)象，然后返回了這個(gè)對(duì)象。除了使用new操作符把使用的包裝函數(shù)叫做構(gòu)造函數(shù)之外，這個(gè)模式和工廠模式并沒(méi)有多大的區(qū)別。構(gòu)造函數(shù)在不返回值的情況下，會(huì)默認(rèn)返回新對(duì)象的實(shí)例。而通過(guò)在構(gòu)造函數(shù)的末尾添加一個(gè)return語(yǔ)句，可以重寫調(diào)用構(gòu)造函數(shù)時(shí)返回的值。

這個(gè)模式可以在特殊的情況下來(lái)為對(duì)象創(chuàng)建構(gòu)造函數(shù)。假設(shè)我們想創(chuàng)建一個(gè)具有額外方法的特殊數(shù)組。由于不能直接修改Array構(gòu)造函數(shù)，因此可以使用這個(gè)模式：

function SpecialArray(){
 //創(chuàng)建數(shù)組
 var values = new Array();
 //添加值
 values.push.apply(values,arguments);
 //添加方法
 values.toPipedString = function(){
  return this.join("|");
 }
 //返回?cái)?shù)組
 return values;
}
var colors = new SpecialArray("red","blue","green");
console.log(colors.toPipedString()); //red|blue|green

在這個(gè)例子中，我們創(chuàng)建了一個(gè)名為SpecialArray的構(gòu)造函數(shù)。在這個(gè)函數(shù)的內(nèi)部，首先創(chuàng)建了一個(gè)數(shù)組，然后push()方法初始化了數(shù)組的值。隨后又給數(shù)組實(shí)例添加了toPipedString()方法，用來(lái)返回以豎線分隔的數(shù)組值。最后將數(shù)組以函數(shù)的形式返回。接著，我們調(diào)用了SpecialArray構(gòu)造函數(shù)，傳入了初始化的值，并調(diào)用了toPipedString()方法。

關(guān)于寄生構(gòu)造函數(shù)模式，有一點(diǎn)需要聲明：首先，返回的對(duì)象與構(gòu)造函數(shù)或者構(gòu)造函數(shù)的原型沒(méi)有任何關(guān)系；也就是說(shuō)，構(gòu)造函數(shù)返回的對(duì)象與在構(gòu)造函數(shù)外部創(chuàng)建的對(duì)象沒(méi)有什么不同。為此，不能依賴instanceof操作符來(lái)確定對(duì)象的類型。由于存在這一的問(wèn)題，我們建議在可以使用其他模式的情況下不要使用這種模式。

七、穩(wěn)妥構(gòu)造函數(shù)模式

道格拉斯·克拉克福德發(fā)明了JavaScript中的穩(wěn)妥對(duì)象這個(gè)概念。所謂穩(wěn)妥對(duì)象，是指沒(méi)有公共屬性，而且其方法也不引用this對(duì)象。穩(wěn)妥對(duì)象最適合在一些安全環(huán)境中（這些環(huán)境會(huì)禁止使用this和new），或者在防止數(shù)據(jù)被其他應(yīng)用程序改動(dòng)時(shí)使用。穩(wěn)妥構(gòu)造函數(shù)遵循的與寄生構(gòu)造函數(shù)類似的模式，但又兩點(diǎn)不同：一是新創(chuàng)建對(duì)象的實(shí)例方法不引用this；二是不使用new操作符調(diào)用構(gòu)造函數(shù)。按照穩(wěn)妥構(gòu)造函數(shù)的要求，可以將前面的Person構(gòu)造函數(shù)重寫如下：

function Person(name, age, job){
 //創(chuàng)建要返回的新對(duì)象
 var o = new Object();
 //可以在這里定義私有變量和函數(shù)
 //添加方法
 o.sayName = function(){
  alert(this.name);
 };
 //返回對(duì)象
 return o;
}

注意，在以這種模式創(chuàng)建的對(duì)象中，除了使用sayName()方法之外，沒(méi)有其他辦法訪問(wèn)name的值?？梢韵裣旅媸褂梅€(wěn)妥的Person構(gòu)造函數(shù)：

var person =Person("weiqi",22,"banzhuan");
person.sayName(); //weiqi

這樣，變量person中保存的是一個(gè)穩(wěn)妥對(duì)象，而除了sayName()方法外，沒(méi)有別的方式可以訪問(wèn)其他數(shù)據(jù)成員。即使有其他代碼會(huì)給這個(gè)對(duì)象添加方法或數(shù)據(jù)成員，但也不可能有別的辦法訪問(wèn)傳入到構(gòu)造函數(shù)中的原始數(shù)據(jù)。穩(wěn)妥構(gòu)造函數(shù)模式提供的這種安全性，使得他非常適合在某些安全執(zhí)行環(huán)境–例如，ADsafe(ADsafe)提供的環(huán)境下使用。

注意：與寄生構(gòu)造函數(shù)模式類似，使用穩(wěn)妥構(gòu)造函數(shù)模式創(chuàng)建的對(duì)象與構(gòu)造函數(shù)之間沒(méi)有什么關(guān)系，因此instanceof操作符對(duì)這種對(duì)象也沒(méi)有意義。

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

最新評(píng)論