什麼是修飾器

修飾器其實就是一個普通的函數，用來修飾類以及類的方法。
比如:

@test
class DecoratorTest {

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

target 參數就是它修飾的類

這就表示給DecoratorTest這個類加上了一個靜態屬性 testable,等價於:

class DecoratorTest {
    public static testable = true;
}

如果你覺得一個參數不夠用, 可以在外面再套一層函數用來傳遞參數

就像這樣 ：

@testParam(true)
class DecoratorTest {

}
function testParam(boolean bool) {
    return function test(target) {
               target.testable = bool;
           }
}

這樣就更靈活些了。

剛纔我們是用修飾器給類加了一個靜態屬性， 同理加實例屬性只需要在類的原型上給它加個屬性就行了

@testParam(true)
class DecoratorTest {

}
function testParam(boolean bool) {
    return function test(target) {
               target.prototype.testable = bool;
           }
}

::: warning
修飾器對類行為的改變發生在代碼編譯階段，而不是運行階段
:::

可以用在哪

修飾器不僅可以修飾類， 還可以修飾類中的屬性和方法
修飾什麼就放在什麼前面，

修飾類中屬性和方法時，修飾器函數接受三個參數

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

target 是目標對象， name是修飾的屬性名， descriptor是該屬性的描述對象

descriptor 一般長這樣

{
    value : specifiedFunction,
    enumerable: false,
    configurable: true,
    writable: true
}

它定義了該屬性是否可枚舉， 是否可讀，是否可配置

上面的readonly修飾器修飾的屬性不可寫

類似於

Object.defineProperty(target, name, {
                                        value : specifiedFunction,
                                        enumerable: false,
                                        configurable: true,
                                        writable: false
                                    })

不能用在哪

修飾器在js中不能用來修飾函數， 因為js中函數在預編譯階段存在函數提升

第三方庫

core-decorators.js
此模塊封裝了幾個常用的修飾器

• @autobind 使方法中的this 綁定原始對象
  
• @readonly 使屬性和方法不可寫
• @override 檢查子類方法是否正確覆蓋了父類的同名方法，如果不正確會報錯
• @deprecated 會在控制台顯示一條警告，表示該方法將廢除

用vuepress 搭個博客試試水

myblog