許多面向?qū)ο蠖加衐ecorator(裝飾器)函數(shù)，比如python中也可以用decorator函數(shù)來強化代碼，decorator相當(dāng)于一個高階函數(shù)，接收一個函數(shù)，返回一個被裝飾后的函數(shù)。

　　注: javascript中也有decorator相關(guān)的提案，只是目前node以及各瀏覽器中均不支持。只能通過安裝babel插件來轉(zhuǎn)換代碼，插件名叫這個：transform-decorators-legacy。也有在線試用](https://babeljs.io/repl/)，安裝好transform-decorators-legacy之后，就能看到轉(zhuǎn)義后的代碼了：

　　npm i -D @babel/plugin-proposal--decorators

　　可以再下載一個plugin配置類里面屬性的寫法

　　npm i -D @babel/plugin-proposal-class-properties

　　在babelrc中配置插件：

　　2.1 使用decorator的前期配置

　　1.vscode里面去除裝飾器報錯的方法

　　在vscode里打開設(shè)置=>用戶設(shè)置里面加入(tips:打開設(shè)置后也可以直接點擊右上角的'{}'進行用戶設(shè)置)

　　就可以了。

　　2.搭建一個簡單的webpack 來使用裝飾器

　　由于目前瀏覽器和node暫時不支持裝飾器,所以我們可以配置一個webpack來使用裝飾器

　　全局安裝：

　　啟動配置 創(chuàng)建一個webpack.dev.js

　　下載依賴(webpack4.x 方法 )

　　npm install -D babel-loader @babel/core @babel/preset-env

　　配置.babelrc

　　創(chuàng)建好webpack的目錄結(jié)構(gòu)是這樣的

　　package.json的配置

　　2.2 開始使用decorator

　　1.類的修飾

　　許多面向?qū)ο蟮恼Z言都有修飾器(Decorator)函數(shù)，用來修改類的行為。目前，有一個提案將這項功能，引入了 ECMAScript。 下面我們采用一個鋼鐵俠的例子來展開

　　上面代碼中，@transform就是一個修飾器。它修改了IronMan這個類的行為，為它加上了武器屬性weapon。transform函數(shù)的參數(shù)target是IronMan類本身。

　　2.方法的修飾

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

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

　　修飾器函數(shù)readonly一共可以接受三個參數(shù)。

　　修飾器第一個參數(shù)是類的原型對象，上例是Person.prototype，修飾器的本意是要“修飾”類的實例，但是這個時候?qū)嵗€沒生成，所以只能去修飾原型(這不同于類的修飾，那種情況時target參數(shù)指的是類本身);第二個參數(shù)是所要修飾的屬性名，第三個參數(shù)是該屬性的描述對象。

　　4.裝飾器不能用于修飾函數(shù)

　　原本作者設(shè)計的時候 是可以使用這種方式的 比如修飾一個函數(shù)這么寫

　　這意味著裝飾器可以用于任何任務(wù),但是作者認(rèn)為這樣可能有點復(fù)雜 并且還有一個潛在的問題 裝飾器和跟隨變量一塊提升 使得裝飾器語法函數(shù)過早執(zhí)行而導(dǎo)致因為位置的原因產(chǎn)生的一些錯誤 比如:

　　總而言之,作者不希望產(chǎn)生這樣的復(fù)雜性,所以去除了修飾函數(shù),詳情可以參考這篇作者參與討論的帖子

　　5.應(yīng)用

　　至于decorator的應(yīng)用場景在哪里?應(yīng)該大部分AOP的場景都可以用，例如日志系統(tǒng)。 這里就手動來實現(xiàn)一個簡單的日志系統(tǒng)。

　　6.core-decorators.js

　　core-decorators.js是一個第三方模塊，提供了幾個常見的修飾器，通過它可以更好地理解修飾器。

　　(1)@readonly

　　readonly修飾器使得屬性或方法不可寫。

　　(2)@override

　　override修飾器檢查子類的方法，是否正確覆蓋了父類的同名方法，如果不正確會報錯。

　　(3)@deprecate (別名@deprecated)

　　deprecate或deprecated修飾器在控制臺顯示一條警告，表示該方法將廢除。