ECMAScript6:官方最新Decorator修饰器构造函数重写了。。。

改变

  • babel发布了最新版本,npm最新版本的模块名称都改成@babel前缀,具体可前往babel英文官网查看,中文网站文档尚未更新
  • 插件 plugin包都已更换名称,以官网为准,不然会报错
  • Decorator 构造函数完全更改,一脸懵逼:),原先target ,name, descriptor3个参数改为一个对象参数,参数字段具体如下图

ECMAScript6:官方最新Decorator修饰器构造函数重写了。。。

具体查看 介绍https://tc39.github.io/propos...

新的写法

根据最新的api我写了小demo如下:

function decoratorclass (target) {
  if (target.kind !== 'class') {
    return
  }
  for (const element of target.elements) {
    if (element.kind !== 'method') {
      continue
    }
    const descriptor = element.descriptor
    const oldMethod = descriptor.value
    descriptor.value = (...args) => {
      console.time(element.key)
      const ret = oldMethod.apply(this, args)
      console.timeEnd(element.key)
      return ret
    }
  }
}

@decoratorclass
class Numberic {
    number = '3.1415926'

    static name = 'Bob'

    add (...num) {
      return num.reduce((p, n) => (p + n), 0)
    }

    all () {
      return '1'
    }
}

new Numberic().add(1, 1, 1)
new Numberic().all(1, 1, 1)

控制台输出
ECMAScript6:官方最新Decorator修饰器构造函数重写了。。。

相关推荐