一、工廠模式
工廠模式是軟件工程領域一種廣爲人知的設計模式,這種模式抽象了創建具體對象的過程。考慮到ECMAScript中無法創建類,開發人員就發明了一種函數,用函數來封裝以特定接口創建對象的細節,如下所示:
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");
函數createPerson()
能夠根據接受的參數來構建一個包含所有必要信息的Person
對象。可以多次調用這個函數,每次都會返回一個包含三個屬性一個方法的對象。工廠模式雖然解決了創建多個相似對象的問題,但卻沒有解決對象識別的問題,即怎麼樣知道這是哪個對象類型。
二、構造函數模式
像Array、Object這樣的原生構造函數,在運行時會自動出現在執行環境中。此外,我們可以創建自定義個構造函數,從而定義自定義類型的屬性和方法。例如,我們可以使用構造函數重寫上個例子:
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");
在這個例子中,Person()
函數取代了createPerson()
函數,我們注意到Person()
與createPerson()
的不同之處在於:
- 沒有顯式的創建對象
- 直接將屬性和方法賦值給this對象
- 沒有
return
語句
此外,還應該注意到函數名Person使用的是大寫字母P。按照慣例,構造函數始終都應該以一個大寫字母開頭,而非構造函數則應該以一個小寫字母開頭。這個做法借鑑了其他OO語言,主要是爲了區別於ECMAScript中的其他函數。因爲構造函數本身也是函數,只不過可以創建對象而已。
要創建一個Person
實例,必須使用new
操作符。以上這種方式會經過以下四個步驟:
1.創建一個新對象
2.將構造函數的作用域賦給新對象(因此this指向這個新對象)
3.執行構造函數中的代碼
4.返回新對象
在前面例子的最後,person1
和person2
分別保存着Person
的一個不同的實例。這兩個對象都有一個constructor
(構造函數)屬性,該屬性指向Person
。如下:
對象的console.log(person1.constructor == Person); //true console.log(person2.constructor == Person); //true
constructor
屬性最初是用來標識對象類型的。但是,提到檢測對象類型,還是instanceof
操作符比較可靠一些。我們在這個例子中創建的對象都是Object對象的實例,也是Person
對象的實例,這一點通過instanceof
操作符可以驗證。
創建自定義的構造函數意味着將來可以將他的實例標識爲一種特定的類型;而這正是構造函數模式勝過工廠模式的地方。在這個例子中,console.log(person1 instanceof Object); //true console.log(person1 instanceof Person); //true console.log(person2 instanceof Object); //true console.log(person2 instanceof Person); //true
person1
和person2
之所以同是Object
的實例,是因爲所有的對象都繼承自Object。
構造函數的主要問題,就是每個方法都要在實例上重新創建一遍,造成內存浪費。在前面的例子中,person1
和person2
都有一個名爲sayName()
的方法,但是兩個方法不是同一Function
的實例。不要忘了ECMAScript中的函數也是對象,因此每定義一個函數,也就是實例化了一個對象,從邏輯角度講,此時的構造函數可以這樣定義:
從這個角度來看構造函數,更容易看明白每個function Person(name, age, job){ this.name = name; this.age = age; this.job = job; this.sayName = new Function("alert(this.name);") //與聲明函數在邏輯上是等價的 }
Person
實例都會包含一個不同的Function
實例的本質。說明白些,會導致不同的作用域鏈和標識符解析,但是創建Function
新實例的機制仍然是相同的。因此,不同實例上的同名函數是不相等的,以下代碼可以證實這一點。
然而,創建兩個完成同樣任務的alert(person1.sayName == person2.sayName); //false
Function
實例的確沒有必要;況且有this
對象在,根本不用在執行代碼前就把函數綁定到特定的對象上。因此,可以像下面這樣,通過把函數定義轉移到構造函數外部來解決這個問題。
這樣做解決了多個函數解決相同問題的問題,但是有產生了新的問題,在全局作用域中實際上只被某個對象調用,這讓全局對象有點名不副實。更讓人無法接受的是:如果對象需要定義很多方法,那麼就要定義很多全局函數,於是我們這個自定義的引用類型就絲毫沒有封裝性可言了。好在這些問題可以使用原型模式來解決。function Person(name, age, job){ this.name = name; this.age = age; this.job = job; this.sayName = sayName; } function sayName(){ alert(this.name); }
三、原型模式
我們創建的每個函數都有一個
prototype
(原型)屬性,這個屬性是一個指針,指向一個對象,而這個對象的用途是包含可以由特定類型的所有實例共享的屬性和方法。使用原型對象的實例就是讓所有實例共享它所包含的屬性和方法。換句話說,不必在構造函數中定義對象的實例信息,而是可以將這些信息直接添加到原型對象中,如下所示:
在此,我們將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
屬性中,構造函數變成了空函數。即便如此,我們仍然可以通過構造函數來創建新對象,而且新對象還會具有相同的屬性和方法。但是與構造函數不同的是,新對象的這些屬性和方法是由所有實例共享的。換句話說,person1
和person2
訪問的都是同一組屬性和同一個sayName()
函數。要理解原型模式的工作原理,就必須先理解ECMAScript中原型對象的性質。
原型對象的本性由於篇幅太長將會在下一章節詳細分析。上面我們說了原型模式的好處,接下來我們來看一下原型模式的缺點。原型模式省略了爲構造函數傳遞參數的這一環節,結果所有實例在默認情況下都具有相同的屬性值。這會在某些程度上帶來一種不便,這並不是原型模式最大的問題,因爲如果我們想爲一個通過原型模式創建的對象添加屬性時,添加的這個屬性就會屏蔽原型對象的保存的同名屬性。換句話說,就是添加的這個屬性會阻止我們去訪問原型中的屬性,但並不會改變原型中的屬性。
原型模式最大的問題是由其共享的本質所導致的。原型中所有的屬性被很多實例共享,這種共享對函數非常合適,對包含基本值的屬性也說的過去,但是對引用類型的屬性值來說問題就比較突出了,下面我們來看一個例子:
上面的例子中,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
對象有一個名爲friends
的屬性,該屬性包含一個字符串數組。然後創建了兩個Person
的實例,接着修改person1.friends
引用的數組,向數組中添加一個字符串,由於數組存在於Person.prototype
中而不是person1
中,所以person2.friends
也會被修改。但是一般每個對象都是要有屬於自己的屬性的,所以我們很少看到有人單獨使用原型模式來創建對象。四、組合使用構造函數模式和原型模式
創建自定義類型最常見的方式就是組合使用構造函數模式與原型模式。構造函數模式用於定義實例屬性,原型模式用於定義方法和共享的屬性。結果,每個實例都會有自己的一份實例屬性的副本,但同時又共享着對方法的引用,最大限度的節省了內存。另外,這種混成模式還支持向構造函數傳遞參數;可謂是集兩種模式之長。下面的代碼重寫了前面的例子:
在這個例子中,實例屬性都是在構造函數中定義的,而由所有實例共享的屬性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
constructor
和方法sayName()
則是在原型中定義的。所以修改了person1.friends
並不會改變person2.friends
,因爲他們分別引用了不同的數組。
這種構造函數與原型模式混成的模式,是目前在ECMAScript中使用最廣泛、認同度最高的一種創建自定義類型的方法。可以說,這是用來定義引用的一種默認形式。五、動態原型模式
有其他OO語言經驗的開發人員在看到獨立的構造函數和原型時,很可能會感到非常的困惑。動態原型模式就是用來解決這個問題的一個方案,它把所有的信息都封裝在了構造函數中,而通過構造函數中初始化原型(僅在必要的情況下),又保持了同時使用構造函數和原型的優點。換句話說,可以通過檢查某個應該存在的方法是否有效,來決定是否要初始化原型。來看一個例子:
注意構造函數代碼中的if語句,這裏只在function Person(name, age){ this.name = name; this.age = age; this.friends = ["乾隆","康熙"]; //注意if語句 if(typeof this.sayName!="function"){ Person.prototype.sayName = function(){ alert(this.name); } } } var person1 = new Person("wei",29); person1.friends.push("嬴政"); person1.sayName();
sayName()
方法不存在的情況下才會將它添加到原型中。這斷代碼只有在第一次調用構造函數的時候纔會被執行。此後,原型已經被初始化,不需要再做什麼修改。不過要記住,這裏所做的修改能立即在所有實例中得到反映。因此,這種方法可以說確實非常完美。其中if語句檢查的是初始化之後應該存在的任何方法和屬性–不必再用一大堆if來檢查每個屬性和方法,只檢查其中一個即可。對於採用這樣模式創建的對象,還可以使用instanceof
操作符來確定他的類型。- 注意:使用動態原型模式時,不能使用對象字面量重寫原型。如果在已經創建了實例的情況下重寫原型,那麼就會切斷現有的實例與新原型之間的聯繫。
六、寄生構造函數模式
通常,在上述幾種模式都不適合的情況下可以使用寄生構造函數模式。這種模式的基本思想是創建一個函數,該函數的作用僅僅是封裝創建對象的代碼,然後再返回新創建的對象,但從表面看,這個函數又很像典型的構造函數。來看一個例子:
在這個例子中,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"
Person
函數創建了一個對象,並以相應的屬性和方法初始化該對象,然後返回了這個對象。除了使用new
操作符把使用的包裝函數叫做構造函數之外,這個模式和工廠模式並沒有多大的區別。構造函數在不返回值的情況下,會默認返回新對象的實例。而通過在構造函數的末尾添加一個return
語句,可以重寫調用構造函數時返回的值。
這個模式可以在特殊的情況下來爲對象創建構造函數。假設我們想創建一個具有額外方法的特殊數組。由於不能直接修改Array
構造函數,因此可以使用這個模式:
在這個例子中,我們創建了一個名爲function SpecialArray(){ //創建數組 var values = new Array(); //添加值 values.push.apply(values,arguments); //添加方法 values.toPipedString = function(){ return this.join("|"); } //返回數組 return values; } var colors = new SpecialArray("red","blue","green"); console.log(colors.toPipedString()); //red|blue|green
SpecialArray
的構造函數。在這個函數的內部,首先創建了一個數組,然後push()
方法初始化了數組的值。隨後又給數組實例添加了toPipedString()
方法,用來返回以豎線分隔的數組值。最後將數組以函數的形式返回。接着,我們調用了SpecialArray
構造函數,傳入了初始化的值,並調用了toPipedString()
方法。
關於寄生構造函數模式,有一點需要聲明:首先,返回的對象與構造函數或者構造函數的原型沒有任何關係;也就是說,構造函數返回的對象與在構造函數外部創建的對象沒有什麼不同。爲此,不能依賴instanceof
操作符來確定對象的類型。由於存在這一的問題,我們建議在可以使用其他模式的情況下不要使用這種模式。七、穩妥構造函數模式
道格拉斯·克拉克福德發明了JavaScript中的穩妥對象這個概念。所謂穩妥對象,是指沒有公共屬性,而且其方法也不引用this
對象。穩妥對象最適合在一些安全環境中(這些環境會禁止使用this
和new
),或者在防止數據被其他應用程序改動時使用。穩妥構造函數遵循的與寄生構造函數類似的模式,但又兩點不同:一是新創建對象的實例方法不引用this
;二是不使用new
操作符調用構造函數。按照穩妥構造函數的要求,可以將前面的Person
構造函數重寫如下:
注意,在以這種模式創建的對象中,除了使用function Person(name, age, job){ //創建要返回的新對象 var o = new Object(); //可以在這裏定義私有變量和函數 //添加方法 o.sayName = function(){ alert(this.name); }; //返回對象 return o; }
sayName()
方法之外,沒有其他辦法訪問name
的值。可以像下面使用穩妥的Person
構造函數:
這樣,變量var person =Person("weiqi",22,"banzhuan"); person.sayName(); //weiqi
person
中保存的是一個穩妥對象,而除了sayName()
方法外,沒有別的方式可以訪問其他數據成員。即使有其他代碼會給這個對象添加方法或數據成員,但也不可能有別的辦法訪問傳入到構造函數中的原始數據。穩妥構造函數模式提供的這種安全性,使得他非常適合在某些安全執行環境–例如,ADsafe(www.adsafe.org)提供的環境下使用。
注意:與寄生構造函數模式類似,使用穩妥構造函數模式創建的對象與構造函數之間沒有什麼關係,因此instanceof
操作符對這種對象也沒有意義。