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

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

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

　　可以再下載一個(gè)plugin配置類(lèi)里面屬性的寫(xiě)法

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

　　在babelrc中配置插件：

　　2.1 使用decorator的前期配置

　　1.vscode里面去除裝飾器報(bào)錯(cuò)的方法

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

　　就可以了。

　　2.搭建一個(gè)簡(jiǎn)單的webpack 來(lái)使用裝飾器

　　由于目前瀏覽器和node暫時(shí)不支持裝飾器,所以我們可以配置一個(gè)webpack來(lái)使用裝飾器

　　全局安裝：

　　啟動(dòng)配置 創(chuàng)建一個(gè)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 開(kāi)始使用decorator

　　1.類(lèi)的修飾

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

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

　　2.方法的修飾

　　修飾器不僅可以修飾類(lèi)，還可以修飾類(lèi)的屬性。

　　上面代碼中，修飾器readonly用來(lái)修飾“類(lèi)”的name方法。

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

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

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

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

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

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

　　5.應(yīng)用

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

　　6.core-decorators.js

　　core-decorators.js是一個(gè)第三方模塊，提供了幾個(gè)常見(jiàn)的修飾器，通過(guò)它可以更好地理解修飾器。

　　(1)@readonly

　　readonly修飾器使得屬性或方法不可寫(xiě)。

　　(2)@override

　　override修飾器檢查子類(lèi)的方法，是否正確覆蓋了父類(lèi)的同名方法，如果不正確會(huì)報(bào)錯(cuò)。

　　(3)@deprecate (別名@deprecated)

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