国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

JavaScript中創建對象的7種模式詳解

2019-11-19 17:28:17
字體:
來源:轉載
供稿:網友

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、返回新對象

在前面例子的最后,person1和person2分別保存著Person的一個不同的實例。這兩個對象都有一個constructor(構造函數)屬性,該屬性指向Person。如下:

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

對象的constructor屬性最初是用來標識對象類型的。但是,提到檢測對象類型,還是instanceof操作符比較可靠一些。我們在這個例子中創建的對象都是Object對象的實例,也是Person對象的實例,這一點通過instanceof操作符可以驗證。

console.log(person1 instanceof Object);//trueconsole.log(person1 instanceof Person);//trueconsole.log(person2 instanceof Object);//trueconsole.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); //falseconsole.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語句檢查的是初始化之后應該存在的任何方法和屬性

主站蜘蛛池模板: 蒙自县| 集安市| 青海省| 张家港市| 右玉县| 遂川县| 稷山县| 修文县| 隆安县| 洛扎县| 新郑市| 莎车县| 勃利县| 腾冲县| 左云县| 南岸区| 普陀区| 平顺县| 沂源县| 梨树县| 彭州市| 肥东县| 平乐县| 新竹市| 长宁县| 永善县| 定南县| 新建县| 石渠县| 色达县| 海城市| 剑阁县| 卢氏县| 瑞丽市| 香格里拉县| 泸定县| 张家港市| 左云县| 伊通| 三穗县| 五台县|