es6——Decorator 类的修饰器

修饰器（Decorator）是一个函数，用来修饰类的行为，ES2017 引入了这项功能，目前 babel 转码器已经支持
对于类来说，这项功能将是 JavaScript 代码静态分析的重要工具
只能用于类，而不能用于函数（因为函数存在提升，而类不会提升）

• 修饰器对类的行为的改变是在代码编译时发生的，而不是在运行时。这意味着，修饰器能在编译阶段运行代码，也就是说，修饰器本身就是编译时执行的函数

类的修饰：

修饰器的第一个参数就是所要修饰的目标类

  @testable
  class Fun {}

  function testable (target) {
    target.add = true
  }

  console.log(Fun.add)// true

如果觉得一个参数不够用，可以在外部再封装一层函数

  @testable(true)
  class Fun {}

  function testable (value) {
    return function (target) {
      target.add = value
    }
  }

  console.log(Fun.add)// true

方法的修饰

  class Person {
    @readonly
    name () {
      return `${this.first} ${this.last}`
    }
  }

  // readonly 用来修饰类的 name 方法
  // 第一个参数是所要修饰的目标，第二个参数是所要修饰的属性名，第三个参数是该属性描述的对象
  function readonly (target, name, descriptor) {
    // descriptor 对象原来的值如下
    /*{
      value:specifiedFunction,
      enumerable:false,
      configurable:true,
      writable:true
    }*/
    descriptor.writable = false
    return descriptor
  }

  readonly(Person.prototype, 'name', descriptor)
  // 类似于
  Object.defineProperty(Person.prototype, 'name', descriptor)

@log 修饰器起到输出日志的作用

  class Math {
    @log
    add (a, b) {
      return a + b
    }
  }

  function log (target, name, descriptor) {
    let oldValue = descriptor.value

    descriptor.value = function () {
      // 打印日志并传参 true
      
      // Calling "add" with Arguments(2) [2, 4, callee: (...), Symbol(Symbol.iterator): ƒ] true
      console.log(`Calling "${name}" with`, arguments)
      
      // oldValue: function add(a, b) {return a + b;}
      console.log(`oldValue: ${oldValue}`)
      
      return oldValue.apply(null, arguments)
    }

    return descriptor
  }

  const math = new Math()
  math.add(2, 4)

• 由上代码可知，Person 类是可测试的，而 name 方法是只读且不可枚举的。
• 如果同一个方法有多个修饰器，那么该方法会先从外到内进入修饰器，然后由内向外执行
• 例如 readonly 修饰器先进入，但是 nonenumerable 修饰器先执行

  @testable
  class Person {
    @readonly
    @nonenumerable
    name () {return `${this.first} ${this.last}`}
  }

推荐：core-decorators.js ，一个第三方模块，提供了几个常见的修饰器，通过它可以更好的理解修饰器