js設計模式：什麼是裝飾者模式？ js裝飾者模式的介紹

這篇文章帶給大家的內容是關於js設計模式：什麼是裝飾者模式？ js裝飾者模式的介紹，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

什麼是裝飾者模式？

定義：動態地為一個物件增加一些額外的職責。就增加功能來說，裝飾器模式相比產生子類別更為靈活。

主要解決：一般的，我們為了擴展一個類別經常使用繼承方式實現，由於繼承為類別引入靜態特徵，並且隨著擴展功能的增多，子類別會很膨脹。

何時使用：在不想增加很多子類別的情況下擴充類別。

如何解決：將具體功能職責劃分，同時繼承裝飾者模式。

js裝飾者模式應用實例： 1、孫悟空有72 變，當他變成"廟宇"後，他的根本還是一隻猴子，但是他又有了廟宇的功能。 2.不論一幅畫有沒有畫框都可以掛在牆上，但是通常都是有畫框的，實際上是畫框被掛在牆上。在掛在牆上之前，畫可以被蒙上玻璃，裝到框框裡；這時畫、玻璃和畫框形成了一個物體。

js裝飾者模式優點：裝飾類別和被裝飾類別可以獨立發展，不會相互耦合，裝飾模式是繼承的一個替代模式，裝飾模式可以動態擴展一個實作類的功能。

js裝飾者模式缺點：多層裝飾比較複雜。

js裝飾者模式使用場景： 1、擴充一個類別的功能。 2、動態增加功能，動態撤銷。

注意事項：可代替繼承。

js裝飾者模式實例

生活中的例子：天氣冷了，就添加衣服來保暖；天氣熱了，就將外套脫下；這個例子很形像地含蓋了裝飾器的神韻，隨著天氣的冷暖變化，衣服可以動態的穿上脫下來。

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 指向有時會出錯

AOP 裝飾函數

// 前置代码
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中介者模式的介紹

js設計模式：什麼是職責鏈模式？ js職責鏈模式的介紹

js設計模式：什麼是享元模式？ js享元模式的介紹

以上是js設計模式：什麼是裝飾者模式？ js裝飾者模式的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！