javascript創(chuàng)建對(duì)象的幾種模式介紹
在js中有幾種模式可以創(chuàng)建對(duì)象,通過對(duì)象操作所包含的屬性與方法。
一般來說,構(gòu)造函數(shù)名稱的第一個(gè)字母為大寫字母,非構(gòu)造函數(shù)名稱的第一個(gè)字母為小寫字母,當(dāng)然,構(gòu)造函數(shù)與一般函數(shù)唯一的區(qū)別只是調(diào)用的方式不同而已,所以任何函數(shù)只要通過new來調(diào)用,那它就可以作為構(gòu)造函數(shù),若不通過new來調(diào)用,則與一般函數(shù)一樣。
談?wù)勎覍?duì)這幾種模式的理解:
工廠模式:創(chuàng)建一個(gè)一般函數(shù),在函數(shù)里創(chuàng)建一個(gè)Object對(duì)象,為這個(gè)對(duì)象增添屬性與方法,同時(shí)賦予其值,最后返回對(duì)象。無法識(shí)別對(duì)象類型。
構(gòu)造函數(shù)模式:創(chuàng)建構(gòu)造函數(shù),使用this來賦值,每當(dāng)創(chuàng)建一個(gè)實(shí)例時(shí),方法都被創(chuàng)建一次,而每個(gè)方法都執(zhí)行相同的命令,這就多余了。這個(gè)缺點(diǎn)可以通過將方法放到全局環(huán)境中,但是,這樣就沒有封裝性了。不過可以通過原型模式解決。
原型模式:每個(gè)函數(shù)都有一個(gè)prototype屬性,該屬性是一個(gè)指針,指向一個(gè)對(duì)象,該對(duì)象包含其函數(shù)創(chuàng)建的所有實(shí)例共享的屬性與方法。
原型對(duì)象,構(gòu)造函數(shù)以及實(shí)例之間的關(guān)系如下圖:
圖解:1:構(gòu)造函數(shù)以及由構(gòu)造函數(shù)創(chuàng)建的實(shí)例,它們的prototype屬性都指向構(gòu)造函數(shù)的原型對(duì)象。
2:構(gòu)造函數(shù)的原型對(duì)象具有constructor屬性,該屬性指向構(gòu)造函數(shù)。
3:構(gòu)造函數(shù)的原型對(duì)象所包含的所有屬性與方法可以被由構(gòu)造函數(shù)所創(chuàng)建的所有實(shí)例共享。
使用對(duì)象字面量重寫原型對(duì)象后,constructor則指向object構(gòu)造函數(shù),若需要其指向另一構(gòu)造函數(shù),則需修改原型對(duì)象的constructor屬性的值,比如:constructor:Person,這樣Person的原型對(duì)象即使被重寫,原型對(duì)象的constructor仍指向Person構(gòu)造函數(shù)。
當(dāng)先創(chuàng)建實(shí)例時(shí):若是直接添加屬性或方法,實(shí)例可以訪問。
若是重寫原型對(duì)象,則構(gòu)造函數(shù)的prototype指向新的原型對(duì)象,而之前創(chuàng)建的實(shí)例的prototype仍指向最初的原型對(duì)象,所以實(shí)例訪問不到新的原型對(duì)象的新屬性或和新方法。
原型對(duì)象包含的是共享的屬性與方法,那么每個(gè)實(shí)例都擁有這些信息,這樣實(shí)例之間就沒有什么不同了,而且還不可以傳參數(shù),這不是我們所想要的。每個(gè)實(shí)例之間有共同的信息,又有不同的信息,所以我們可以組合使用構(gòu)造函數(shù)模式與原型模式。
構(gòu)造函數(shù)模式與原型模式的組合使用:
態(tài)原型模式:將獨(dú)立的構(gòu)造函數(shù)與其原型對(duì)象結(jié)合在一起,在構(gòu)造函數(shù)里初始化原型,為其添加方法。
若該方法不存在,則將其添加到原型對(duì)象上,只在初始化原型時(shí)才執(zhí)行,而且只執(zhí)行一次。
寄生構(gòu)造函數(shù)模式:與工廠模式類似,區(qū)別為:寄生構(gòu)造函數(shù)模式為構(gòu)造函數(shù),通過new來創(chuàng)建實(shí)例。
穩(wěn)妥構(gòu)造函數(shù)模式:沒有公共的屬性,其方法不引用this的對(duì)象。創(chuàng)建實(shí)例時(shí)不使用new。只能通過方法訪問屬性(即傳入的數(shù)據(jù))。
以上這篇javascript創(chuàng)建對(duì)象的幾種模式介紹就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- js面向?qū)ο笾R妱?chuàng)建對(duì)象的幾種方式(工廠模式、構(gòu)造函數(shù)模式、原型模式)
- JavaScript中創(chuàng)建對(duì)象的7種模式詳解
- JavaScript中創(chuàng)建對(duì)象的模式匯總
- js 創(chuàng)建對(duì)象 經(jīng)典模式全面了解
- JavaScript創(chuàng)建對(duì)象方式總結(jié)【工廠模式、構(gòu)造函數(shù)模式、原型模式等】
- javascript工廠模式和構(gòu)造函數(shù)模式創(chuàng)建對(duì)象方法解析
- 在javascript中創(chuàng)建對(duì)象的各種模式解析
- 淺析在javascript中創(chuàng)建對(duì)象的各種模式
- JavaScript創(chuàng)建對(duì)象的四種常用模式實(shí)例分析
- JS 創(chuàng)建對(duì)象的模式實(shí)例小結(jié)
相關(guān)文章
JavaScript中使用自然對(duì)數(shù)ln的方法
這篇文章主要介紹了JavaScript中使用自然對(duì)數(shù)ln的方法,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06javascript 基礎(chǔ)篇2 數(shù)據(jù)類型,語句,函數(shù)
文章里如果有錯(cuò)誤的話,希望能幫忙指正~我也是邊看視頻邊學(xué)習(xí)中,這個(gè)算是個(gè)筆記吧~自認(rèn)為總結(jié)出來的東西比看視頻要節(jié)省點(diǎn)時(shí)間~能幫到別人最好了~幫不到也起碼恩能幫到我自己2012-03-03Javascript中Array.prototype.map()詳解
map 方法會(huì)給原數(shù)組中的每個(gè)元素都按順序調(diào)用一次 callback 函數(shù)。callback 每次執(zhí)行后的返回值組合起來形成一個(gè)新數(shù)組。 callback 函數(shù)只會(huì)在有值的索引上被調(diào)用;那些從來沒被賦過值或者使用 delete 刪除的索引則不會(huì)被調(diào)用。2014-10-10JavaScript 表單處理實(shí)現(xiàn)代碼
這篇文章主要介紹了JavaScript 表單處理實(shí)現(xiàn)代碼,需要的朋友可以參考下2015-04-04JavaScript操作數(shù)組的常用方法總結(jié)
這篇文章總結(jié)了JavaScript操作數(shù)組的常用方法,文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-06-06簡(jiǎn)介JavaScript中strike()方法的使用
這篇文章主要介紹了簡(jiǎn)介JavaScript中strike()方法的使用,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06