ES7 裝飾者模式Decorator

在程式開發過程中，我們可能希望某個類或者方法，並不是天生就具有很龐大，但是又不是很常用的功能。裝飾者模式可以動態的給某個物件新增一些額外的職責，但是卻不會影響其它的從這個類中派生出的其它物件。

裝飾者模式能夠能夠在不改變自身物件的基礎上，在程式執行期間給物件動態的新增功能。這其實就像我們在遊戲中要給遊戲角色買裝備一樣，同乙個角色本身的各種屬性都是一樣的，但是當我們給它穿上不同的裝備後，角色的各種屬性就會出現差異。

首先建立乙個類

function gengeratehp(target) 
@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的實現原理是以來es5的object.defineproperty方法的而object.defineproperty()方法所做的就是為乙個物件新增新的屬性，或者更改物件的某個已經存在的屬性。

它的呼叫方式是

object.defineproperty(target, prop, descriptor)

其中第乙個引數是代表目標物件，prop代表物件的屬性名，descriptor是對屬性的描述，其欄位決定了prop屬性的一些特性，比如writable屬性就決定了目標物件的屬性是否可以更改。

function nowrite(target, prop, desc) 
class man 
}const xiaoming = new man()
xiaoming.name = 'xiaoming'

這裡就會報錯： typeerror: cannot assign to read only property 『name』

總結起來說，decorate裝飾器模式其實就是在我們需要某個臨時的屬性或方法時，給目標物件加上這個屬性或者方法。裝飾者是一種』即用即付』的方式，與繼承相比更是一種靈活輕便的做法。

ES7 裝飾者模式Decorator

ES7 裝飾器使用示例

ES7 學習筆記

ES7特性總結

ES7 裝飾者模式Decorator

ES7 裝飾器使用示例

ES7 學習筆記

ES7特性總結

相關推薦