超级厉害的JavaScript —— ECMAScript 6 标准（11） —— Decorator

什么是Decorator

Decorator是修饰器，用来修饰类的行为，它是ES7的一个实现，目前Babel转码器已经支持。

---

修饰器的使用

修饰器对类的行为的改变，是发生在代码编译时的。修饰器也只能对类以及类的属性使用。

修饰类

function testable(target) {  target.isTestable = true;}@testableclass MyTestableClass {}console.log(MyTestableClass.isTestable) // true

最简化来看：

@decoratorclass A {}// 等同于以下行为class A {}A = decorator(A) || A;

也就是说，修饰器本质就是编译时对target执行的函数。
类修饰器的第一个参数target，就是要修饰的目标类。同时，因为修饰器只是函数，所以可以使用执行的函数，而不是函数指针，只要最后有一个接受target的函数修饰类就可以了：

function testable(isTestable) {  return function(target) {    target.isTestable = isTestable;  }}@testable(true) //执行testable后是返回函数指针class MyTestableClass {}MyTestableClass.isTestable // true@testable(false)    class MyClass {}MyClass.isTestable // false

现在都是添加静态属性，如果想添加实例属性，就只能添加到target的原型（prototype）上了：

function testable(target) {  target.prototype.isTestable = true;}@testableclass MyTestableClass {}let obj = new MyTestableClass();obj.isTestable // true

这里会有个问题！！！！！！！！

修饰属性

修饰属性时修饰函数一共接受三个参数，第一个参数是所要修饰的目标对象（ClassName.prototype），第二个参数是所要修饰的属性，第三个参数是该属性的描述对象，还有一点，修饰属性时需要返回描述对象：

function readonly(target, name, descriptor){    descriptor.writable = false;    return descriptor;}class Person {    @readonly    name() { return "Person" }}

以上Person实例的name方法就是只读的了。

对value的修改可以实现输出日志的作用：

class Math {  @log  add(a, b) {    return a + b;  }}function log(target, name, descriptor) {  var oldValue = descriptor.value;   //暂存了原来的方法  descriptor.value = function() {   //使用新的方法    console.log(`Calling "${name}" with`, arguments);    return oldValue.apply(null, arguments); //最后再调用旧方法获得执行的结果  };  return descriptor;}const math = new Math();// passed parameters should get logged nowmath.add(2, 4);