首先放一段示例代碼
@testable
class MyTestableClass {
// ...
}
function testable(target) {
target.isTestable = true;
}
MyTestableClass.isTestable // true
代碼中@testable即為一個修飾器镣隶〖辏可以看到诡右，修飾器本質(zhì)上是一個函數(shù)。將類作為修飾器函數(shù)的參數(shù)傳入到函數(shù)內(nèi)部怀酷，在函數(shù)內(nèi)部為類掛載了屬性與方法稻爬。
除了在類上使用修飾器外，還可以在類內(nèi)部屬性上使用修飾器蜕依。示例如下:
class Person {
@readonly
name() { return `${this.first} ${this.last}` }
}
這個很好理解桅锄，表明Person類中的name屬性是只讀的。
那么readonly修飾器函數(shù)是怎樣的呢?
function readonly(target, name, descriptor){
// descriptor對象原來的值如下
// {
// value: specifiedFunction,
// enumerable: false,
// configurable: true,
// writable: true
// };
descriptor.writable = false;
return descriptor;
}
readonly(Person.prototype, 'name', descriptor);
當(dāng)修飾器作用到類屬性上時样眠，實(shí)則將類原型作為對象傳入到了修飾器函數(shù)內(nèi)部友瘤，第二個參數(shù)即為作用的類屬性名，第三個參數(shù)是該屬性的一些默認(rèn)屬性檐束。修改默認(rèn)屬性即可控制該類屬性的一些行為(比如說是否可復(fù)寫該方法等)辫秧。
修飾器的兩種使用方法就是上面??這些了。
注意被丧，我們提到修飾器實(shí)則就是一個函數(shù)盟戏，所以，遇到React中的這種寫法也就很好理解了
@connect(mapStateToProps, mapDispatchToProps)
function connect(mapStateToProps,mapDispatchToProps){
return function(){}
}
