建立物件的幾種模式

2021-09-22 12:44:36 字數 2745 閱讀 7443

以後堅持一日一更,和大家分享我每天學習的成果及經驗,讓想要學習的小夥伴少走彎路。

一、建構函式或字面量創單物件

這些方式有明顯的缺點:使用同乙個介面建立很多物件,會產生大量的重複**。為了解決這個問題,出現了工廠模式。

二、工廠模式

考慮在es中無法建立類(es6前),開發人員發明了一種函式,用函式來封裝以特定介面建立物件的細節。(實現起來是在乙個函式內建立好物件,然後把物件返回)。

function

createperson

(name,age,job)

;return0;

}var person1=

createperson

("nicholas",29

,"software engineer");

var person2=

createperson

("greg",27

,"doctor"

);

函式createperson()能夠根據接受的引數來構建乙個包含所有必要資訊的person物件。工廠模式雖然解決了建立多個相似物件的問題,但卻沒有解決物件識別的問題,即怎麼知道乙個物件的型別。隨著js發展,又乙個模式出現了。

三、建構函式模式

像object和array這樣的原生建構函式,在執行時會自動出現在執行環境。此外,也可以建立自定義的建構函式,從而定義自定義物件型別的屬性和方法。

function

person

(name,age,job);}

var person1=

newperson

(...);

var person2=

newperson

(...

);

與工廠模式相比,具有以下特點:

1、沒有顯式建立物件;

2、直接將屬性和方法賦給了this物件;

3、沒有return語句;

4、要建立新例項,必須使用new操作符;(否則屬性和方法將會被新增到window物件)

5、可以使用instanceof操作符檢測物件型別

建構函式的問題:建構函式內部的方法會被重複建立,不同例項內的同名函式是不相等的。可通過將方法移到建構函式外部解決這一問題,但面臨

新問題:封裝性不好。

這些問題可通過原型模式解決。

四、原型模式

我們建立的每個函式都有乙個prototype屬性,這個屬性是乙個指標,指向乙個物件,而這個物件的用途是包含可以由特定型別的所有例項共享的屬性和方法。(prototype就是通過呼叫建構函式而建立的那個物件例項的原型物件)。

使用原型物件的好處是可以讓所有物件例項共享它所包含的屬性和方法。換句話說,不必在建構函式中定義物件例項的資訊,而是可以將這些資訊直接新增到原型物件中。

function

person()

person.prototype.name=

"nicholas"

;person.prototype.age=29;

person.prototype.job=

"..."

;person.prototype.

sayname

=function()

;var person1=

newperson()

;person1.

sayname()

;//"nicholas"

更常見的做法是用乙個包含所有屬性和方法的物件字面量來重寫整個原型物件,並重設constructor屬性。

function

person()

person.prototype=};

object.

defineproperty

(person.prototype,

"constructor",)

;

原型物件的問題:

1、他省略了為建構函式傳遞初始化引數這一環節,結果所有例項在預設情況下都將取得相同的屬性值,雖然這會在一定程度帶來一定的不便,但不是最大的問題,最大的問題是由其共享的本性所決定的。

2、對於包含基本值的屬性可以通過在例項上新增乙個同名屬性隱藏原型中的屬性。然後,對於包含引用資料型別的值來說,會導致問題。

這些問題導致很少單獨使用原型模式。

五、組合使用建構函式模式和原型模式

這是建立自定義型別的最常見的方式。

建構函式模式用於定義例項屬性,而原型模式用於定義方法和共享的屬性。所以每個例項都會有自己的乙份例項屬性的副本,但同時共享著對方法的引用,最大限度的節省了記憶體。同時支援向建構函式傳遞引數。

function

person

(name,age,job)

person.prototype=};

var person1=

newperson

(...

);

六、動態原型模式
function

person

(name,age,job);}

}

這裡只有sayname()不存在的情況下,才會將它新增到原型中,這段**只會在初次呼叫建構函式時才執行。這裡對原型所做的修改,能夠立刻在所有例項中得到反映。

七、object.create()

es5定義了乙個名為object.create()的方法,它建立乙個新物件,其中第乙個引數是這個物件的原型,第二個引數對物件的屬性進行進一步描述。

js建立物件的幾種模式

原理 在乙個函式內部完成建立物件新增屬性和方法。缺陷 無法識別物件的型別。佔記憶體,沒有提取公共方法。例項 function createperson name,age,job return o var person1 createperson nicholas 29 software engine...

JS中建立物件的幾種模式

created by sibuk on 2017 6 5.工廠模式 function createperson name,age,job return o var person1 createperson nicholas 29,software engineer var person2 creat...

細節 js 建立物件的幾種模式舉例

var sayname function function createperson name,age obj.name name obj.age age obj.sayname sayname return obj var newperson createperson oliver 18 cons...