js-JavaScript常見的建立物件的幾種方式
1、通過Object建構函式或物件字面量建立單個物件
這些方式有明顯的缺點:使用同一個介面建立很多物件,會產生大量的重複程式碼。為了解決這個問題,出現了工廠模式。
2、工廠模式
考慮在ES中無法建立類(ES6前),開發人員發明了一種函式,用函式來封裝以特定介面建立物件的細節。(實現起來是在一個函式內建立好物件,然後把物件返回)。
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 0; } var person1=createPerson("Nicholas",29,"Software Engineer"); var person2=createPerson("Greg",27,"Doctor");
函式createPerson()能夠根據接受的引數來構建一個包含所有必要資訊的Person物件。工廠模式雖然解決了建立多個相似物件的問題,但卻沒有解決物件識別的問題,即怎麼知道一個物件的型別。隨著JS發展,又一個模式出現了。
3、建構函式模式
像Object和Array這樣的原生建構函式,在執行時會自動出現在執行環境。此外,也可以建立自定義的建構函式,從而定義自定義物件型別的屬性和方法。
function Person(name,age,job){ this.name=name; this.age=age; this.job=job; this.sayName=function(){ alert(this.name); }; } var person1=new Person(...); var person2=new Person(...);
與工廠模式相比,具有以下特點:
- 沒有顯式建立物件;
- 直接將屬性和方法賦給了this物件;
- 沒有return語句;
- 要建立新例項,必須使用new操作符;(否則屬性和方法將會被新增到window物件)
- 可以使用instanceof操作符檢測物件型別
建構函式的問題:
建構函式內部的方法會被重複建立,不同例項內的同名函式是不相等的。可通過將方法移到建構函式外部解決這一問題,但面臨新問題:封裝性不好。
這些問題可通過原型模式解決。
4、原型模式
我們建立的每個函式都有一個prototype屬性,這個屬性是一個指標,指向一個物件,而這個物件的用途是包含可以由特定型別的所有例項共享的屬性和方法。(prototype就是通過呼叫建構函式而建立的那個物件例項的原型物件)。
使用原型物件的好處是可以讓所有物件例項共享它所包含的屬性和方法。換句話說,不必在建構函式中定義物件例項的資訊,而是可以將這些資訊直接新增到原型物件中。
function Person(){ } Person.prototype.name="Nicholas"; Person.prototype.age=29; Person.prototype.job="..."; Person.prototype.sayName=function(){ ... }; var person1=new Person(); person1.sayName();//"Nicholas"
更常見的做法是用一個包含所有屬性和方法的物件字面量來重寫整個原型物件,並重設constructor屬性。
function Person(){ } Person.prototype={ name:"...", age:29, job:"...", sayName:function(){ ... } }; Object.defineProperty(Person.prototype,"constructor",{ enumerable:false, value:Person, });
原型物件的問題:
- 他省略了為建構函式傳遞初始化引數這一環節,結果所有例項在預設情況下都將取得相同的屬性值,雖然這會在一定程度帶來一定的不便,但不是最大的問題,最大的問題是由其共享的本性所決定的。
- 對於包含基本值的屬性可以通過在例項上新增一個同名屬性隱藏原型中的屬性。然後,對於包含引用資料型別的值來說,會導致問題。
這些問題導致很少單獨使用原型模式。
5、組合使用建構函式模式和原型模式
這是建立自定義型別的最常見的方式。
建構函式模式用於定義例項屬性,而原型模式用於定義方法和共享的屬性。所以每個例項都會有自己的一份例項屬性的副本,但同時共享著對方法的引用,最大限度的節省了記憶體。同時支援向建構函式傳遞引數。
function Person(name,age,job){ this.name=name; this.age=age; this.job=job; this.friends=["S","C"]; } Person.prototype={ constructor:Person, sayName:function(){ alert(this.name); } }; var person1=new Person(...);
6、動態原型模式
function Person(name,age,job){ this.name=name; this.age=age; this.job=job; if(typeof this.sayName!="function"){ Person.prototype.sayName=function(){ alert(this.name); }; } }
這裡只有sayName()不存在的情況下,才會將它新增到原型中,這段程式碼只會在初次呼叫建構函式時才執行。這裡對原型所做的修改,能夠立刻在所有例項中得到反映。
7、Object.create()
ES5定義了一個名為Object.create()的方法,它建立一個新物件,其中第一個引數是這個物件的原型,第二個引數對物件的屬性進行進一步描述。