修飾器模式

⭐️ 更多前端技術和知識點，搜索訂閱號 JS 菌 訂閱

不會改變原有的對象，而是在其基礎上進行拓展。

實現原理

• 建立一個 A 類
• A 類中的屬性和方法使用 ES7 中的修飾器語法對類和類的屬性增長功能

實現代碼

ts 修飾器語法

以下是 ts 官方文檔的例子：

https://zhongsp.gitbooks.io/typescript-handbook/doc/handbook/Decorators.html

function f() {
    console.log("f(): evaluated");
    return function (target, propertyKey: string, descriptor: PropertyDescriptor) {
        console.log("f(): called");
    }
}

function g() {
    console.log("g(): evaluated");
    return function (target, propertyKey: string, descriptor: PropertyDescriptor) {
        console.log("g(): called");
    }
}

class C {
    @f()
    @g()
    method() {}
}

函數式

let obj = {
  lname: "young",
  fname: "oliver",
  gender: "male",
  getInfo() {
    return "get user infomation";
  }
};

// 這時須要添加一些方法，能夠使用修飾器模式
// 這是須要添加的方法
function getGender() {
  console.log(this.gender);
}
function getFullName() {
  console.log(`${this.fname} ${this.lname}`);
}

obj.getInfo = function() {
  let getInfo = obj.getInfo;
  return function() {
    getInfo();
    getGender.call(obj); // 須要手動綁定 this
    getFullName.call(obj); // 須要手動綁定 this
  };
};

obj.getInfo()();

AOP 裝飾函數

// 前置代碼
Function.prototype.before = function(fn) {
  const self = this
  return function() {
    fn.apply(new(self), arguments)
    return self.apply(new(self), arguments)
  }
}

// 後置代碼
Function.prototype.after = function(fn) {
  const self = this
  return function() {
    self.apply(new(self), arguments)
    return fn.apply(new(self), arguments)
  }
}

const wear1 = function() {
  console.log('穿上第一件衣服')
}

const wear2 = function() {
  console.log('穿上第二件衣服')
}

const wear3 = function() {
  console.log('穿上第三件衣服')
}

const wear = wear1.after(wear2).after(wear3)
wear()

// 穿上第一件衣服
// 穿上第二件衣服
// 穿上第三件衣服

缺點是在 Function 的原型鏈上增長了 before、after 致使原生函數被污染

改爲如下：

const after = function(fn, afterFn) {
  return function() {
    fn.apply(this, arguments)
    afterFn.apply(this, arguments)
  }
}

const wear = after(after(wear1, wear2), wear3)
wear()

請關注個人訂閱號，不按期推送有關 JS 的技術文章，只談技術不談八卦 😊