方法的修飾器

修飾器不僅可以修飾類，還可以修飾類的屬性。

1. classPerson{
2. @readonly
3. name(){return`${this.first} ${this.last}`}
4. }

上面程式碼中，ES6 修飾器readonly用來修飾“類”的name方法。

修飾器函式readonly一共可以接受三個引數。

1. functionreadonly(target, name, descriptor){
2. // descriptor物件原來的值如下
3. // {
4. // value: specifiedFunction,
5. // enumerable: false,
6. // configurable: true,
7. // writable: true
8. // };
9. descriptor.writable =false;
10. return descriptor;
11. }
12. readonly(Person.prototype,'name', descriptor);
13. // 類似於
14. Object.defineProperty(Person.prototype,'name', descriptor);

修飾器第一個引數是類的原型物件，上例是Person.prototype，修飾器的本意是要“修飾”類的例項，但是這個時候例項還沒生成，所以只能去修飾原型（這不同於類的修飾，那種情況時target引數指的是類本身）；第二個引數是所要修飾的屬性名，第三個引數是該屬性的描述物件。

另外，上面程式碼說明，修飾器（readonly）會修改屬性的描述物件（descriptor），然後被修改的描述物件再用來定義屬性。

下面是另一個例子，修改屬性描述物件的enumerable屬性，使得該屬性不可遍歷。

1. classPerson{
2. @nonenumerable
3. get kidCount(){returnthis.children.length;}
4. }
5. function nonenumerable(target, name, descriptor){
6. descriptor.enumerable =false;
7. return descriptor;
8. }

下面的@log修飾器，可以起到輸出日誌的作用。

1. classMath{
2. @log
3. add(a, b){
4. return a + b;
5. }
6. }
7. function log(target,
   name, descriptor){
8. var oldValue = descriptor.value;
9. descriptor.value =function(){
10. console.log(`Calling "${name}" with`, arguments);
11. return oldValue.apply(null, arguments);
12. };
13. return descriptor;
14. }
15. const math =newMath();
16. // passed parameters should get logged now
17. math.add(2,4);

上面程式碼中，@log修飾器的作用就是在執行原始的操作之前，執行一次console.log，從而達到輸出日誌的目的。

修飾器有註釋的作用。

1. @testable
2. classPerson{
3. @readonly
4. @nonenumerable
5. name(){return`${this.first} ${this.last}`}
6. }

從上面程式碼中，我們一眼就能看出，Person類是可測試的，而name方法是隻讀和不可列舉的。

下面是使用 Decorator 寫法的元件，看上去一目瞭然。

1. @Component({
2. tag:'my-component',
3. styleUrl:'my-component.scss'
4. })
5. exportclassMyComponent{
6. @Prop() first:string;
7. @Prop()last:string;
8. @State() isVisible:boolean=true;
9. render(){
10. return(
11. <p>Hello,my name is{this.first}{this.last}</p>
12. );
13. }
14. }

如果同一個方法有多個修飾器，會像剝洋蔥一樣，先從外到內進入，然後由內向外執行。

1. function dec(id){
2. console.log('evaluated', id);
3. return(target, property, descriptor)=> console.log('executed', id);
4. }
5. classExample{
6. @dec(1)
7. @dec(2)
8. method(){}
9. }
10. // evaluated 1
11. // evaluated 2
12. // executed 2
13. // executed 1

上面程式碼中，外層修飾器@dec(1)先進入，但是內層修飾器@dec(2)先執行。

除了註釋，修飾器還能用來型別檢查。所以，對於類來說，這項功能相當有用。從長期來看，它將是 JavaScript 程式碼靜態分析的重要工具。