TypeScript装饰器实现原理

ゝ一世哀愁。 2022-12-28 00:48 126阅读 0赞

## TypeScript注解风格的装饰器 ##

`@decorate`装饰器函数的作用是在调用`eat方法`之前执行执行自定义的功能

function decorate(target, property, descriptor) {   
      var oldValue = descriptor.value
      descriptor.value = msg => { 
        console.log('先洗手')
        msg = `后 ${ msg}`
        return oldValue.apply(null, [msg])
      }
      return descriptor
    }
    
    class Log { 
      @decorate
      eat(msg) { 
          console.log(msg)
      }
    }
    
    const log = new Log()
    log.eat('吃饭')

**运行结果如下：**  
![在这里插入图片描述][20201212213927104.png]

## 用js实现以上`@decorate`装饰器 ##

class Log { 
      eat(msg) { 
          console.log(msg)
      }
    }
    
    const decorate = (target, property) => { 
      var old = target.prototype.eat
      target.prototype[property] = msg => { 
          console.log('先洗手 2')
          msg = `后 ${ msg} 2`
          old(msg)
      }
    }
    
    decorate(Log, 'eat')  //相当于 eat 上面的 @decorate
    
    const log = new Log()
    log.eat('吃饭')

**运行结果如下：**  
![在这里插入图片描述][20201212214234877.png]

## TypeScript装饰器的底层实现原理如下 ##

class Log { 
      eat(msg) { 
          console.log(msg)
      }
    }
    
    function decorate(target, property, descriptor) {   
      var oldValue = descriptor.value
      descriptor.value = msg => { 
        console.log('先洗手 3')
        msg = `后 ${ msg} 3`
        return oldValue.apply(null, [msg])
      }
      return descriptor
    }
    
    const anotation = (target, proterty, decorate) => { 
      const descriptor = decorate(
        Log.prototype,
        proterty,
        Object.getOwnPropertyDescriptor(Log.prototype, proterty)
      )
      Object.defineProperty(Log.prototype, proterty, descriptor)
    }
    anotation(Log, 'eat', decorate)  //相当于 eat 上面的 @decorate
    
    
    const log = new Log()
    log.eat('吃饭')

![在这里插入图片描述][20201212214740617.png]

[20201212213927104.png]: /images/20221120/a12417a51e224a19908bed7532d9bbcb.png
[20201212214234877.png]: /images/20221120/93335d4691074659b233e42061ed670a.png
[20201212214740617.png]: /images/20221120/722697a557084bec9a754c15d3702d36.png