JavaScript設計模式之原型模式怎么實現

本篇內容主要講解“JavaScript設計模式之原型模式怎么實現”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“JavaScript設計模式之原型模式怎么實現”吧!

前言

設計模式呢最多的可能是用到類，我們去通過類來封裝一些實用的方法，通過設計模式去實現各個方法之間的解耦等，由于JS中的繼承是用原型鏈繼承的，所以原型模式是用原型實例指向創建對象的類，使用于創建新的對象的類共享原型對象的屬性以及方法

案例

比如我們現在需要實現一個頁面上的輪播圖，可能需要用到對輪播圖操作的方法，比如聚焦，切換，點擊展開等動作，那么我們可以創一個圖片輪播的方法，也可以叫做類

上面這個方法只是一個基礎的方法，但在實際操作中我們可能會有不同的各種各樣的需求需要我們來實現，那樣子我們就需要在基礎功能上加上一些擴張來實現我們的需求，我們擴展的需要要依賴于我們的基礎方法，比如切換圖片的時候可能是上下方向的滑動，左右方向的滑動，也可能是自由方位的活動等功能，而且在圖片滑動過程中的動畫，比如漸變，大小縮放，都是可以拓展開的功能。

上面是在基礎類上通過繼承的方法去重寫切換下一張圖片的方法，這就是我們可以通過繼承的方式去改變我們的基礎擴展更多的方法，又節省了很多相同的地方，下面用一個實例來看一下

回顧

回顧一下之前我們對于原型鏈繼承的了解，我們會發現，如果我們將屬性和函數都放在基礎類的構造函數中，那么作為基礎類會被我們擴展的功能繼承，所以每一次繼承都會調用構造函數中的方法，那么可能在一定程度上會影響系統的性能，我們可以將一些性能消耗大的放到原型上面，簡單但有差異的東西可以放到構造函數中

小結：

原型模式就是將可復用的、可共享的、耗時大的從基類中提出來然后放在其原型中，然后子類通過組合繼承或者寄生組合式繼承而將方法和屬性繼承下來，對于子類中那些需要重寫的方法進行重寫，這樣子類創建的對象既具有子類的屬性和方法也共享了基類的原型方法

原型的這種設計模式，是一種比較簡單的設計模式，由于初始化都做一些重復性的東西，造成的性能消耗。為了提高性能創建一種共享機制，這樣每當創建基類時，對于每次創建的一些簡單而又差異化的屬性我們可以放在構造函數中，而我們將一些消耗資源比較大的方法放在基類的原型中，這樣就會避免很多不必要的消耗，這也就是原型模式的一個雛形

原型的拓展

原型對象是一個共享的對象，不論是父類的實例對象或者是子類的繼承，都是對它的一個指向引用，所以原型對象才會被共享。既然被共享，那么對原型對象的拓展，不論是子類或者父類的實例對象都會繼承下來

由于倆個子類都繼承同一個父類，所以在原型上聲明方法的時候，由于原型對象是一個共享的對象，指向同一個引用，所以一個子類可以訪問到另一個子類在原型上聲明的方法，雖然這種做法比較自由，可以有較高的拓展性，但同時也不能隨意使用，否則可能會影響到其他實例的屬性或者是方法，這樣做是一個比較低效的操作。

但如創建一個實例對象的構造函數比較復雜，或者耗時比較長，最好不要用new關鍵字去復制這些基類，但可以通過對這些對象屬性或者方法進行復制來實現創建，如果涉及多個對象，我們也可以通過原型模式來實現對新對象的創建。那么首先要有一個原型模式的對象復制方法。

上面這個函數為我們提供了復制原型的方法，通過去獲取另一個構造函數的模板屬性，遍歷到另一個構造函數中，最后通過new返回這個復制的新的構造函數

比如我們現在創建了一個構造函數，這個構造函數沒有基類，只是一些屬性和方法的模板對象，我們就可以通過復制的方法來實現構造出一個新的構造函數

并且由于我們定義復制函數時候已經有new結果的返回，所以但我們在使用的時候，就可以直接使用方法，而不需要通過new 去實現

到此，相信大家對“JavaScript設計模式之原型模式怎么實現”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！