JavaScript設(shè)計(jì)模式之原型模式詳情
前言
設(shè)計(jì)模式呢最多的可能是用到類,我們?nèi)ネㄟ^(guò)類來(lái)封裝一些實(shí)用的方法,通過(guò)設(shè)計(jì)模式去實(shí)現(xiàn)各個(gè)方法之間的解耦等,由于JS中的繼承是用原型鏈繼承的,所以原型模式是用原型實(shí)例指向創(chuàng)建對(duì)象的類,使用于創(chuàng)建新的對(duì)象的類共享原型對(duì)象的屬性以及方法
案例
比如我們現(xiàn)在需要實(shí)現(xiàn)一個(gè)頁(yè)面上的輪播圖,可能需要用到對(duì)輪播圖操作的方法,比如聚焦,切換,點(diǎn)擊展開(kāi)等動(dòng)作,那么我們可以創(chuàng)一個(gè)圖片輪播的方法,也可以叫做類
上面這個(gè)方法只是一個(gè)基礎(chǔ)的方法,但在實(shí)際操作中我們可能會(huì)有不同的各種各樣的需求需要我們來(lái)實(shí)現(xiàn),那樣子我們就需要在基礎(chǔ)功能上加上一些擴(kuò)張來(lái)實(shí)現(xiàn)我們的需求,我們擴(kuò)展的需要要依賴于我們的基礎(chǔ)方法,比如切換圖片的時(shí)候可能是上下方向的滑動(dòng),左右方向的滑動(dòng),也可能是自由方位的活動(dòng)等功能,而且在圖片滑動(dòng)過(guò)程中的動(dòng)畫,比如漸變,大小縮放,都是可以拓展開(kāi)的功能。
上面是在基礎(chǔ)類上通過(guò)繼承的方法去重寫切換下一張圖片的方法,這就是我們可以通過(guò)繼承的方式去改變我們的基礎(chǔ)擴(kuò)展更多的方法,又節(jié)省了很多相同的地方,下面用一個(gè)實(shí)例來(lái)看一下
回顧
回顧一下之前我們對(duì)于原型鏈繼承的了解,我們會(huì)發(fā)現(xiàn),如果我們將屬性和函數(shù)都放在基礎(chǔ)類的構(gòu)造函數(shù)中,那么作為基礎(chǔ)類會(huì)被我們擴(kuò)展的功能繼承,所以每一次繼承都會(huì)調(diào)用構(gòu)造函數(shù)中的方法,那么可能在一定程度上會(huì)影響系統(tǒng)的性能,我們可以將一些性能消耗大的放到原型上面,簡(jiǎn)單但有差異的東西可以放到構(gòu)造函數(shù)中
小結(jié):
原型模式就是將可復(fù)用的、可共享的、耗時(shí)大的從基類中提出來(lái)然后放在其原型中,然后子類通過(guò)組合繼承或者寄生組合式繼承而將方法和屬性繼承下來(lái),對(duì)于子類中那些需要重寫的方法進(jìn)行重寫,這樣子類創(chuàng)建的對(duì)象既具有子類的屬性和方法也共享了基類的原型方法
原型的這種設(shè)計(jì)模式,是一種比較簡(jiǎn)單的設(shè)計(jì)模式,由于初始化都做一些重復(fù)性的東西,造成的性能消耗。為了提高性能創(chuàng)建一種共享機(jī)制,這樣每當(dāng)創(chuàng)建基類時(shí),對(duì)于每次創(chuàng)建的一些簡(jiǎn)單而又差異化的屬性我們可以放在構(gòu)造函數(shù)中,而我們將一些消耗資源比較大的方法放在基類的原型中,這樣就會(huì)避免很多不必要的消耗,這也就是原型模式的一個(gè)雛形
原型的拓展
原型對(duì)象是一個(gè)共享的對(duì)象,不論是父類的實(shí)例對(duì)象或者是子類的繼承,都是對(duì)它的一個(gè)指向引用,所以原型對(duì)象才會(huì)被共享。既然被共享,那么對(duì)原型對(duì)象的拓展,不論是子類或者父類的實(shí)例對(duì)象都會(huì)繼承下來(lái)
由于倆個(gè)子類都繼承同一個(gè)父類,所以在原型上聲明方法的時(shí)候,由于原型對(duì)象是一個(gè)共享的對(duì)象,指向同一個(gè)引用,所以一個(gè)子類可以訪問(wèn)到另一個(gè)子類在原型上聲明的方法,雖然這種做法比較自由,可以有較高的拓展性,但同時(shí)也不能隨意使用,否則可能會(huì)影響到其他實(shí)例的屬性或者是方法,這樣做是一個(gè)比較低效的操作。
但如創(chuàng)建一個(gè)實(shí)例對(duì)象的構(gòu)造函數(shù)比較復(fù)雜,或者耗時(shí)比較長(zhǎng),最好不要用new關(guān)鍵字去復(fù)制這些基類,但可以通過(guò)對(duì)這些對(duì)象屬性或者方法進(jìn)行復(fù)制來(lái)實(shí)現(xiàn)創(chuàng)建,如果涉及多個(gè)對(duì)象,我們也可以通過(guò)原型模式來(lái)實(shí)現(xiàn)對(duì)新對(duì)象的創(chuàng)建。那么首先要有一個(gè)原型模式的對(duì)象復(fù)制方法。
上面這個(gè)函數(shù)為我們提供了復(fù)制原型的方法,通過(guò)去獲取另一個(gè)構(gòu)造函數(shù)的模板屬性,遍歷到另一個(gè)構(gòu)造函數(shù)中,最后通過(guò)new返回這個(gè)復(fù)制的新的構(gòu)造函數(shù)
比如我們現(xiàn)在創(chuàng)建了一個(gè)構(gòu)造函數(shù),這個(gè)構(gòu)造函數(shù)沒(méi)有基類,只是一些屬性和方法的模板對(duì)象,我們就可以通過(guò)復(fù)制的方法來(lái)實(shí)現(xiàn)構(gòu)造出一個(gè)新的構(gòu)造函數(shù)
并且由于我們定義復(fù)制函數(shù)時(shí)候已經(jīng)有new結(jié)果的返回,所以但我們?cè)谑褂玫臅r(shí)候,就可以直接使用方法,而不需要通過(guò)new 去實(shí)現(xiàn)
到此這篇關(guān)于JavaScript設(shè)計(jì)模式之原型模式詳情的文章就介紹到這了,更多相關(guān)JS原型模式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript新功能介紹之findLast()和findLastIndex()
最近工作中遇到了一個(gè)關(guān)于查找數(shù)組里面的目標(biāo)元素的方法,所以下面這篇文章主要給大家介紹了關(guān)于JavaScript新功能之findLast()?和findLastIndex()的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04javascript寫的簡(jiǎn)單的計(jì)算器,內(nèi)容很多,方法實(shí)用,推薦
最近用javascript寫了一個(gè)簡(jiǎn)單的計(jì)算器,自己測(cè)試感覺(jué)還好,代碼都給了注釋,非常不錯(cuò),推薦大家學(xué)習(xí)。2011-12-12Window.Open如何在同一個(gè)標(biāo)簽頁(yè)打開(kāi)
這篇文章主要介紹了Window.Open如何在同一個(gè)標(biāo)簽頁(yè)打開(kāi),需要的朋友可以參考下2014-06-06微信小程序?qū)崿F(xiàn)文章關(guān)注功能詳細(xì)流程
在社交小程序里有個(gè)常見(jiàn)的場(chǎng)景是關(guān)注功能,我們本篇以關(guān)注已經(jīng)發(fā)布的文章為例,講解一下關(guān)注功能如何實(shí)現(xiàn)2022-08-08微信小程序?qū)崿F(xiàn)同時(shí)上傳多張圖片
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)同時(shí)上傳多張圖片,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-02-02js實(shí)現(xiàn)中文轉(zhuǎn)拼音的完整步驟記錄
這篇文章主要給大家介紹了關(guān)于js實(shí)現(xiàn)中文轉(zhuǎn)拼音的相關(guān)資料,主要利用了pinyin-pro包,可以完美的實(shí)現(xiàn)所需要的功能,需要的朋友可以參考下2021-06-06詳談js中標(biāo)準(zhǔn)for循環(huán)與foreach(for in)的區(qū)別
下面小編就為大家?guī)?lái)一篇詳談js中標(biāo)準(zhǔn)for循環(huán)與foreach(for in)的區(qū)別。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11