JavaScript 中創建對象的 7 種模式

作者:旗smile
原文地址:http://blog.csdn.net/u014346301/article/details/52204967

ECMA-262把對象定義為:“無序屬性的集合,其屬性可以包含基本值、對象或者函數。”嚴格來講,這就相當于說明對象是一組沒有特定順序的值。對象的每個屬性或方法都有一個名字,而每個名字都映射到一個值。正因為這樣,我們可以把ECMAScript的對象想象成散列表:無非就是一組名對值,其中值可以是數據或函數。

創建自定義對象最簡單的方式就是創建一個Object的實例,然后再為他添加屬性和方法,如下所示:

var person = new Object();
person.name = "liubei";
person.age = 29;
person.job = "shayemuyou";

person.sayName = function(){
    alert(this.name);
}

上面的例子創建了一個名為person的對象,并為他添加了三個屬性和一個方法。其中sayName()方法用于顯示name屬性,this.name將被解析為person.name,早期的開發人員經常使用這個模式來創建對象,后來對象字面量的方法成了創建對象的首選模式,上面的例子用對象字面量的語法可以寫成如下這樣:

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

這個例子中的person對象和前面的對象是一樣的,都有相同的屬性和方法。

雖然Object構造函數或者對象字面量的方法都可以用來創建單個對象,但是這些方法有個明顯的缺點:使用同一個接口創建很多對象,會產生大量的重復代碼。為了解決這個方法,人們開始使用工廠模式的一種變體。

一、工廠模式

工廠模式是軟件工程領域一種廣為人知的設計模式,這種模式抽象了創建具體對象的過程。考慮到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. 返回新對象

在前面例子的最后,person1person2分別保存著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

創建自定義的構造函數意味著將來可以將他的實例標識為一種特定的類型;而這正是構造函數模式勝過工廠模式的地方。在這個例子中,person1person2之所以同是Object的實例,是因為所有的對象都繼承自Object。

構造函數的主要問題,就是每個方法都要在實例上重新創建一遍,造成內存浪費。在前面的例子中,person1person2都有一個名為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()方法和所有的屬性直接添加在了Personprototype屬性中,構造函數變成了空函數。即便如此,我們仍然可以通過構造函數來創建新對象,而且新對象還會具有相同的屬性和方法。但是與構造函數不同的是,新對象的這些屬性和方法是由所有實例共享的。換句話說,person1person2訪問的都是同一組屬性和同一個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語言經驗的開發人員在看到獨立的構造函數和原型時,很可能會感到非常的困惑。動態原型模式就是用來解決這個問題的一個方案,它把所有的信息都封裝在了構造函數中,而通過構造函數中初始化原型(僅在必要的情況下),又保持了同時使用構造函數和原型的優點。換句話說,可以通過檢查某個應該存在的方法是否有效,來決定是否要初始化原型。來看一個例子:

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();

注意構造函數代碼中的if語句,這里只在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操作符對這種對象也沒有意義。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,517評論 6 539
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,087評論 3 423
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,521評論 0 382
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,493評論 1 316
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,207評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,603評論 1 325
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,624評論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,813評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,364評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,110評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,305評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,874評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,532評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,953評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,209評論 1 291
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,033評論 3 396
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,268評論 2 375

推薦閱讀更多精彩內容