首先放一段示例代码
@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(){}
}
