装饰者模式

装饰者模式

装饰器模式: 动态地给函数赋能。

JavaScript 的装饰者模式

生活中的例子: 天气冷了, 就添加衣服来保暖；天气热了, 就将外套脱下；这个例子很形象地含盖了装饰器的神韵, 随着天气的冷暖变化, 衣服可以动态的穿上脱下。

 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(self,arguments)        return self.apply(self,arguments)      }    }    // 后置代码   Function.prototype.after = function(fn){     const self = this     return function(){       self.apply(self,arguments)       return fn.apply(self,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()