ES7 裝飾者模式Decorator

aaron 發布于2019-08-20 10:41 / 3218人閱讀

摘要：裝飾者模式可以動態的給某個對象添加一些額外的職責，但是卻不會影響其它的從這個類中派生出的其它對象。裝飾者模式能夠能夠在不改變自身對象的基礎上，在程序運行期間給對象動態的添加功能。裝飾者是一種即用即付的方式，與繼承相比更是一種靈活輕便的做法。

什么是decorator

在程序開發過程中，我們可能希望某個類或者方法，并不是天生就具有很龐大，但是又不是很常用的功能。裝飾者模式可以動態的給某個對象添加一些額外的職責，但是卻不會影響其它的從這個類中派生出的其它對象。
裝飾者模式能夠能夠在不改變自身對象的基礎上，在程序運行期間給對象動態的添加功能。這其實就像我們在游戲中要給游戲角色買裝備一樣，同一個角色本身的各種屬性都是一樣的，但是當我們給它穿上不同的裝備后，角色的各種屬性就會出現差異。

應用實例

首先創建一個類

function gengerateHP(target) {
    target.hp = 1000
}
@generateHP
class Role {    
}
const role = new Role()
console.log(role.hp)    //undefined
console.log(Role.hp)   //1000

其實在這里就產生了疑問，為什么這個hp屬性是加在了Role這個類上，而類的實例卻沒有這個屬性，我們知道類本身指向的是構造函數，它的方法都被定義在prototype屬性上。那么為什么類有hp屬性，而它的實例卻沒有hp這個屬性呢，這說明hp屬性并沒有被定義在prototype屬性上，屬于類卻不屬于某個實例。

decorator的原理

decorator的實現原理是以來ES5的Object.defineProperty方法的而Object.defineProperty()方法所做的就是為一個對象添加新的屬性，或者更改對象的某個已經存在的屬性。
它的調用方式是

Object.defineProperty(target, prop, descriptor) {
}

其中第一個參數是代表目標對象，prop代表對象的屬性名，descriptor是對屬性的描述，其字段決定了prop屬性的一些特性，比如writable屬性就決定了目標對象的屬性是否可以更改。

function noWrite(target, prop, desc) {
    desc.writable = false
    return desc
}
class Man {
    @noWrite
    name() {
        return "小明"
    }
}
const xiaoming = new Man()
xiaoming.name = "xiaoming"

這里就會報錯： TypeError: Cannot assign to read only property ‘name’
總結起來說，decorate裝飾器模式其實就是在我們需要某個臨時的屬性或方法時，給目標對象加上這個屬性或者方法。裝飾者是一種’即用即付’的方式，與繼承相比更是一種靈活輕便的做法。

GPU云服務器云服務器裝飾者模式 jsp 裝飾者裝飾模式策略者模式

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

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

ES7-Decorator-裝飾者模式

摘要：裝飾者要實現這些相同的方法繼承自裝飾器對象創建具體的裝飾器，也是接收作對參數接下來我們要為每一個功能創建一個裝飾者對象，重寫父級方法，添加我們想要的功能。裝飾模式僅僅包裝現有的模塊，使之更加華麗，并不會影響原有接口的功能 —— 好比你給手機添加一個外殼罷了，并不影響手機原有的通話、充電等功能；使用 ES7 的 decorator ES7 中增加了一個 decorator 屬性...

zhangxiangliang 2019-08-26 13:54 評論0 收藏0
5 分鐘即可掌握的 JavaScript 裝飾者模式與 AOP

摘要：下裝飾者的實現了解了裝飾者模式和的概念之后，我們寫一段能夠兼容的代碼來實現裝飾者模式原函數拍照片定義函數裝飾函數加濾鏡用裝飾函數裝飾原函數這樣我們就實現了抽離拍照與濾鏡邏輯，如果以后需要自動上傳功能，也可以通過函數來添加。 showImg(https://segmentfault.com/img/bVbueyz?w=852&h=356); 什么是裝飾者模式當我們拍了一張照片準備發朋友...

chunquedong 2019-08-23 18:16 評論0 收藏0
JS設計模式--裝飾者模式

摘要：當接口比較多，裝飾器也比較多時，可以獨立抽取一個裝飾器父類，實現目標類的所有接口，再創建真正的裝飾器來繼承這個父類。四的實現方式提供了一種類似的注解的語法糖，來實現裝飾者模式。歡迎關注我的公眾號睿Talk，獲取我最新的文章：showImg(https://segmentfault.com/img/bVbmYjo); 一、前言所謂裝飾者模式，就是動態的給類或對象增加職責的設計模式。它...

wmui 2019-08-22 15:17 評論0 收藏0
Decorator:從原理到實踐，我一點都不虛~

摘要：描述符必須是這兩種形式之一不能同時是兩者。可以是任何有效的值數值，對象，函數等。當且僅當該屬性的為時，才能被賦值運算符改變。特點就是不影響之前對象的特性，而新增額外的職責功能。前言原文鏈接:[Nealyang/personalBlog]() showImg(https://segmentfault.com/img/remote/1460000018958861); ES6 已經不必...

XanaHopper 2019-08-23 17:05 評論0 收藏0