ES7中修饰器的作用

修饰器是一个函数，它可以给class类或属性上，加上一些其他的操作

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

class类的修饰

修饰器的第一个参数就所要修饰的目标对象。

function testable (target) {
  // 修饰器函数的第一个参数为所要修饰的目标类
  console.log(target);
  target.isOk = true
}
@testable
class Person { 
}
console.log(Person.isOk);

我们利用testable修饰器为Person类添一个私有属性

在打印结果中我么可以看到 在testable修饰器中打印的第一个参数就是目标类本身，并成功添加了一个静态属性

传递参数

如果想传递参数，或着觉得一个参数不够用，我们可以在函数外面在封装一层函数

// 参数传递 (利用闭包的特性保存了参数)
function testable (params) {
  return function (target) {
    target.uname = params
  }
}
// 首先调用testable("张三") 将执行完返回的结果作用于Person
@testable("张三")
class Person { 
}
console.log(Person.uname);  // 张三

 类属性的修饰

修饰器不仅可以修饰类，还可以修饰类的属性

此时修饰器函数一共可以接受三个参数，第一个参数是所要修饰的目标对象，第二个是所要修饰的属性名，第三个是该属性的描述对象

function testable (target, name, descriptor) {
  descriptor.writable = false
  return descriptor
}
class Person {
  add (a, b) {
    return a + b
  }
  @testable
  xx = 'hello'
}
const p1 = new Person()
console.log(p1.add(1, 2));

p1.xx = '123'
console.log(p1.xx);   // hello

 上面代码修改了属性的描述对象 使得属性值无法被修改

 可以在结果中看到 修改属性值的操作并没有生效

修饰器可以起到输出日志的作用

@log修饰器的作用就是在执行原始操作之前进行一次console.log()输出

function log (target, name, descriptor) {
  // 将原始操作保存一下
  const oldValue = descriptor.value
  descriptor.value = function () {
    console.log(`${name}函数执行了，参数有${[...arguments]}`);
    // 执行原始操作将结果返回
    return oldValue.call(null, ...arguments)
  }
}
class Mach {
  @log
  add (a, b) {
    return a + b
  }
  @log
  reduce(a, b) {
    return a - b
  }
  
}

const mach = new Mach
console.log(mach.add(1, 2));
console.log(mach.reduce(1, 2));

在结果中我们可以看到输入日志了