JavaScript代碼復用模式

bergwhite 發布于2019-08-21 10:21 / 1772人閱讀

摘要：如下代碼所示，可以使用構造函數來創建父對象，這樣做的話，自身的屬性和構造函數的原型的屬性都將被繼承。方法繼承自對象這是中構造函數鏈的一個示例。

代碼復用及其原則

代碼復用，顧名思義就是對曾經編寫過的代碼的一部分甚至全部重新加以利用，從而構建新的程序。在談及代碼復用的時候，我們首先可以想到的是繼承性。代碼復用的原則是：

優先使用對象組合，而不是類繼承

在js中，由于沒有類的概念，因此實例的概念也就沒多大意義，js中的對象是簡單的鍵-值對，可以動態的創建和修改它們。

但在js中，我們可以使用構造函數和new操作符來實例化一個對象，這與其他使用類的編程語言在語法上有其相似之處。

例如：

var trigkit4 = new Person();

js在調用構造函數Person時似乎看起來是一個類，但其實際上仍然是一個函數，這讓我們產生了一些假定在類的基礎上的開發思路和繼承模式，我們可以稱之為“類式繼承模式”。

傳統的繼承模式是需要class關鍵字的，我們假定以上的類式繼承模式為現代繼承模式，這是一種不需要以類的方式考慮的模式。

類式繼承模式

看下面兩個構造函數Parent()和Child()的例子：

當使用new Child()語句創建一個對象時，它會通過原型從Parent()實例獲取它的功能，比如：

var kid = new Child();
kid.say();//Allen

原型鏈

討論一下類式繼承模式下原型鏈的工作原理，我們將對象看做是內存中某處的塊，該內存塊包含數據以及指向其他塊的引用。當用new Parent()語句創建一個對象時，就會創建如下圖左邊的這樣一個塊，這個塊保存了name屬性，如果想訪問say()方法，我們可以通過指向構造函數Parent()的prototype（原型）屬性的隱式鏈接__proto__，便可訪問右邊區塊Parent.prototype。

那么，當使用var kid = new Child()創建新對象時會發生什么？如下圖：

使用new Child()語句所創建的對象除了隱式鏈接__proto__外，它幾乎是空的。這種情況下，__proto__指向了在inherit()函數中使用new Parent()語句所創建的對象

當執行kid.say()時，由于最左下角的區塊對象并沒有say()方法，因此他將通過原型鏈查詢中間的區塊對象，然而，中間的區塊對象也沒有say()方法，因此他又順著原型鏈查詢到最右邊的區塊對象，而該對象正好有say()方法。完了嗎？

執行到這里的時候并沒有完，在say()方法中引用了this.name，this指向構造函數所創建的對象，在這里，它指向了new Child()這個區塊，然而，new Child()中并沒有name屬性，為此，將查詢中間區塊，而中間區塊正好有name屬性，至此，原型鏈的查詢完畢。

更詳細的討論請查看我這篇文章：JavaScript學習總結（五）原型和原型鏈詳解

共享原型

本模式的法則在于：可復用的成員應該轉移到原型中而不是放置在this中。因此，處于繼承的目的，任何值得繼承的東西都應該放在原型中實現。所以，可以將子對象的原型與父對象的原型設置為相同即可，如下示例所示：

function inherit(C,P){
    C.prototype = P.prototype;
}

子對象和父對象共享同一個原型，并且可以同等的訪問say()方法。然而，子對象并沒有繼承name屬性

原型繼承

原型繼承是一種“現代”無類繼承模式。看如下實例：

在原型模式中，并不需要使用對象字面量來創建父對象。如下代碼所示，可以使用構造函數來創建父對象，這樣做的話，自身的屬性和構造函數的原型的屬性都將被繼承。

本模式中，可以選擇僅繼承現有構造函數的原型對象。對象繼承自對象，而不論父對象是如何創建的，如下實例：

繼承一個對象的功能

使用構造函數鏈的概念和Function.apply()方法，來模擬js中傳統的類繼承行為：

首先，在newObject的構造函數中，在oldObject上調用一個apply方法，傳入對新的對象的引用和參數數組。apply方法繼承自Function對象

newObject.prototype = new oldObject();

這是js中構造函數鏈的一個示例。當創建一個newObject的新實例的時候，newObject以這樣一種方式繼承了舊對象的方法和屬性。

GPU云服務器云服務器代碼復用 javascript命令模式 javascript嚴格模式 javascript設計模式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85382.html

設計模式（通往高手之路的必備技能）

摘要：設計模式的定義在面向對象軟件設計過程中針對特定問題的簡潔而優雅的解決方案。從前由于使用的局限性，和做的應用相對簡單，不被重視，就更談不上設計模式的問題。 ‘從大處著眼，從小處著手’，以前對這句話一知半解，自從踏出校門走入社會，開始工作以來，有了越來越深的理解，偶有發現這句話用在程序開發中也有用，所以，近段時間開始嘗試著分析jQuery源碼，分析angularjs源碼，學習設計模式。設...

paraller 2019-08-21 18:35 評論0 收藏0
5分鐘即可掌握的前端高效利器：JavaScript 策略模式

摘要：策略模式由兩部分構成一部分是封裝不同策略的策略組，另一部分是。策略模式的典型應用場景是表單校驗中，對于校驗規則的封裝。然而圖像的壓縮及上傳錯誤處理等部分是公用的。遂考慮使用策略模式封裝。淺談 JavaScript 中策略模式的使用：什么是設計模式什么是策略模式策略模式在 JavaScript 中的應用（使用策略模式封裝百度AI識別調用）策略模式在 Vue 組件封裝中的應用（...

BlackFlagBin 2019-08-23 11:48 評論0 收藏0
JavaScript設計模式與開發實踐 - 策略模式

摘要：引言本文摘自設計模式與開發實踐在現實中，很多時候也有多種途徑到達同一個目的地。將不變的部分和變化的部分隔開是每個設計模式的主題，策略模式也不例外，策略模式的目的就是將算法的使用與算法的實現分離開來。一個基于策略模式的程序至少由兩部分組成。引言本文摘自《JavaScript設計模式與開發實踐》在現實中，很多時候也有多種途徑到達同一個目的地。比如我們要去某個地方旅游，可以根據具體的實...

xi4oh4o 2019-08-21 17:38 評論0 收藏0
javascript設計模式學習日記--模板方法模式

摘要：是模板方法，他封裝了子類中算法框架，它作為一個算法的模板，去指導子類以什么樣的順序去執行代碼。制定算法骨架，讓子類具體實現，這大概就是模板方法模式了吧模板方法模式：把相似的流程抽象出來作為一個父類，來封裝好子類的算法框架，然后子類繼承這個父類，并且可以重寫非公有的方法，來實現自己的業務邏輯。聚個栗子泡茶泡咖啡是很好的例子，不同企業的面試流程也是一個很好的例子對于很多大型公司，...

jsdt 2019-08-22 16:57 評論0 收藏0
《Node.js設計模式》歡迎來到Node.js平臺

摘要：事件多路復用器收集資源的事件并且把這些事件放入隊列中，直到事件被處理時都是阻塞狀態。最后，處理事件多路復用器返回的每個事件，此時，與系統資源相關聯的事件將被讀并且在整個操作中都是非阻塞的。本系列文章為《Node.js Design Patterns Second Edition》的原文翻譯和讀書筆記，在GitHub連載更新，同步翻譯版鏈接。歡迎關注我的專欄，之后的博文將在專欄同步：...

Paul_King 2019-08-21 17:46 評論0 收藏0