装饰者模式

装饰者模式

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

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()