ES6-修饰器

首先放一段示例代码

@testable
class MyTestableClass {

  // ...

}

function testable(target) {
  target.isTestable = true;
}

MyTestableClass.isTestable // true

代码中@testable即为一个修饰器。可以看到，修饰器本质上是一个函数。将类作为修饰器函数的参数传入到函数内部，在函数内部为类挂载了属性与方法。

除了在类上使用修饰器外，还可以在类内部属性上使用修饰器。示例如下:

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

这个很好理解，表明Person类中的name属性是只读的。

那么readonly修饰器函数是怎样的呢?

function readonly(target, name, descriptor){

  // descriptor对象原来的值如下

  // {

  //   value: specifiedFunction,

  //   enumerable: false,

  //   configurable: true,

  //   writable: true

  // };

  descriptor.writable = false;

  return descriptor;

}

readonly(Person.prototype, 'name', descriptor);

当修饰器作用到类属性上时，实则将类原型作为对象传入到了修饰器函数内部，第二个参数即为作用的类属性名，第三个参数是该属性的一些默认属性。修改默认属性即可控制该类属性的一些行为(比如说是否可复写该方法等)。

修饰器的两种使用方法就是上面👆这些了。

注意，我们提到修饰器实则就是一个函数，所以，遇到React中的这种写法也就很好理解了

@connect(mapStateToProps, mapDispatchToProps)
function connect(mapStateToProps,mapDispatchToProps){
  return function(){}
}