TypeScript装饰器@decorate实现原理

TypeScript注解风格的装饰器

下面我们来看看@decorate装饰器怎么使用：
如下装饰器在eat方法上，@decorate装饰器函数的作用是在调用eat方法之前执行自定义的功能

//TypeScript
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('吃饭')

运行结果如下：

如图可知： 装饰器的作用就是在eat方法外在套了一层方法，执行完特定方法后再执行eat方法

用js实现以上@decorate装饰器

//js
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('吃饭')

运行结果如下：

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

//js
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('吃饭')