這篇文章帶給大家的內容是關於js設計模式：什麼是裝飾者模式？ js裝飾者模式的介紹，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
定義：動態地為一個物件增加一些額外的職責。就增加功能來說，裝飾器模式相比產生子類別更為靈活。
主要解決：一般的，我們為了擴展一個類別經常使用繼承方式實現，由於繼承為類別引入靜態特徵，並且隨著擴展功能的增多，子類別會很膨脹。
何時使用：在不想增加很多子類別的情況下擴充類別。
如何解決：將具體功能職責劃分，同時繼承裝飾者模式。
js裝飾者模式應用實例： 1、孫悟空有72 變，當他變成"廟宇"後，他的根本還是一隻猴子，但是他又有了廟宇的功能。 2.不論一幅畫有沒有畫框都可以掛在牆上，但是通常都是有畫框的，實際上是畫框被掛在牆上。在掛在牆上之前，畫可以被蒙上玻璃，裝到框框裡；這時畫、玻璃和畫框形成了一個物體。
js裝飾者模式優點：裝飾類別和被裝飾類別可以獨立發展，不會相互耦合，裝飾模式是繼承的一個替代模式，裝飾模式可以動態擴展一個實作類的功能。
js裝飾者模式缺點：多層裝飾比較複雜。
js裝飾者模式使用場景： 1、擴充一個類別的功能。 2、動態增加功能，動態撤銷。
注意事項：可代替繼承。
生活中的例子：天氣冷了，就添加衣服來保暖；天氣熱了，就將外套脫下；這個例子很形像地含蓋了裝飾器的神韻，隨著天氣的冷暖變化，衣服可以動態的穿上脫下來。
let wear = function() {
console.log('穿上第一件衣服')
}
const _wear1 = wear
wear = function() {
_wear1()
console.log('穿上第二件衣服')
}
const _wear2 = wear
wear = function() {
_wear2()
console.log('穿上第三件衣服')
}
wear()
// 穿上第一件衣服
// 穿上第二件衣服
// 穿上第三件衣服這種方式有以下缺點：1：臨時變數會變得越來越多；2：this 指向有時會出錯
// 前置代码
Function.prototype.before = function(fn) {
const self = this
return function() {
fn.apply(this, arguments)
return self.apply(this, arguments)
}
}
// 后置代码
Function.prototype.after = function(fn) {
const self = this
return function() {
self.apply(this, arguments)
return fn.apply(this, arguments)
}
}用後置程式碼來實驗下上面穿衣服的demo，
const wear1 = function() {
console.log('穿上第一件衣服')
}
const wear2 = function() {
console.log('穿上第二件衣服')
}
const wear3 = function() {
console.log('穿上第三件衣服')
}
const wear = wear1.after(wear2).after(wear3)
wear()
// 穿上第一件衣服
// 穿上第二件衣服
// 穿上第三件衣服但這樣子有時會污染原生函數，可以做點通變
const after = function(fn, afterFn) {
return function() {
fn.apply(this, arguments)
afterFn.apply(this, arguments)
}
}
const wear = after(after(wear1, wear2), wear3)
wear()相關推薦：
以上是js設計模式：什麼是裝飾者模式？ js裝飾者模式的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
