作者：easonruan，騰訊 CSIG 前端開(kāi)發(fā)工程師

1. 裝飾器的樣子

我們先來(lái)看看 Decorator 裝飾器長(zhǎng)什么樣子，大家可能沒(méi)在項(xiàng)目中用過(guò) Decorator 裝飾器，但多多少少會(huì)看過(guò)下面裝飾器的寫(xiě)法：

/*?Nest.Js?cats.controller.ts?*/ import?{?Controller,?Get?}?from?'@nestjs/common';@Controller('cats') export?class?CatsController?{@Get()findAll():?string?{return?'This?action?returns?all?cats';} }

摘自《Nest.Js》官方文檔

上述代碼大家可以不著急去理解，主要是讓大家對(duì)裝飾器有一個(gè)初步了解，后面我們會(huì)逐一分析 Decorator 裝飾器的實(shí)現(xiàn)原理以及具體用法。

2. 為什么要理解裝飾器

2.1 淺一點(diǎn)來(lái)說(shuō)，理解才能讀懂 VS Code 源碼

Decorator 裝飾器是 ECMAScript 的語(yǔ)言提案，目前還處于 stage-2 階段，但是借助 TypeScript 或者 Babel，已經(jīng)有大量的優(yōu)秀開(kāi)源項(xiàng)目深度用上它了，比如：VS Code, Angular, Nest.Js(后端 Node.js 框架), TypeORM, Mobx(5) 等等

舉個(gè)例子：https://github.com/microsoft/vscode/blob/main/src/vs/workbench/services/editor/browser/codeEditorService.ts#L22

作為一個(gè)有追求的程序員，你可能會(huì)問(wèn)：上面代碼的裝飾器代表什么含義？去掉裝飾器后能不能正常運(yùn)行？

如果沒(méi)弄懂裝飾器，很難讀懂 VS Code 這些優(yōu)秀項(xiàng)目源碼的核心思想。所以說(shuō)你不需要熟練使用裝飾器，但一定要理解裝飾器的用法。

2.2 深一點(diǎn)來(lái)說(shuō)，理解才能弄懂 AOP , IoC, DI 等優(yōu)秀編程思想

1.AOP 即面向切面編程 (Aspect Oriented Programming)

AOP 主要意圖是將日志記錄，性能統(tǒng)計(jì)，安全控制，異常處理等代碼從業(yè)務(wù)邏輯代碼中劃分出來(lái)，將它們獨(dú)立到非指導(dǎo)業(yè)務(wù)邏輯的方法中，進(jìn)而改變這些行為的時(shí)候不影響業(yè)務(wù)邏輯的代碼。

簡(jiǎn)而言之，就是“優(yōu)雅”的把“輔助功能邏輯”從“業(yè)務(wù)邏輯”中分離，解耦出來(lái)。

圖摘自《簡(jiǎn)談前端開(kāi)發(fā)中的 AOP(一) -- 前端 AOP 的實(shí)現(xiàn)思路》

2.IoC 即 控制反轉(zhuǎn) (Inversion of Control)，是解耦的一種設(shè)計(jì)理念

3.DI 即 依賴注入 (Dependency Injection)，是 IoC 的一種具體實(shí)現(xiàn)

使用 IoC 前：

使用 IoC 后：

圖摘自《兩張圖讓你理解 IoC (控制反轉(zhuǎn))》

IoC 控制反轉(zhuǎn)的設(shè)計(jì)模式可以大幅度地降低了程序的耦合性。而 Decorator 裝飾器在 VS Code 的控制反轉(zhuǎn)設(shè)計(jì)模式里，其主要作用是實(shí)現(xiàn) DI 依賴注入的功能和精簡(jiǎn)部分重復(fù)的寫(xiě)法。由于該步驟實(shí)現(xiàn)較為復(fù)雜，我們先從簡(jiǎn)單的例子為切入點(diǎn)去了解裝飾器的基本原理。

3. 裝飾器的概念區(qū)分

在理解裝飾器之前，有必要先對(duì)裝飾器的 3 個(gè)概念進(jìn)行區(qū)分。

3.1 Decorator Pattern (裝飾器模式)

是一種抽象的設(shè)計(jì)理念，核心思想是在不修改原有代碼情況下，對(duì)功能進(jìn)行擴(kuò)展。

3.2 Decorator (裝飾器)

是一種特殊的裝飾類(lèi)函數(shù)，是一種對(duì)裝飾器模式理念的具體實(shí)現(xiàn)。

3.3 @Decorator (裝飾器語(yǔ)法)

是一種便捷的語(yǔ)法糖(寫(xiě)法)，通過(guò) @ 來(lái)引用，需要編譯后才能運(yùn)行。理解了概念之后可以知道：裝飾器的存在就是希望實(shí)現(xiàn)裝飾器模式的設(shè)計(jì)理念。

說(shuō)法 1：在不修改原有代碼情況下，對(duì)功能進(jìn)行擴(kuò)展。也就是對(duì)擴(kuò)展開(kāi)放，對(duì)修改關(guān)閉。

說(shuō)法 2：優(yōu)雅地把“輔助性功能邏輯”從“業(yè)務(wù)邏輯”中分離，解耦出來(lái)。（AOP 面向切面編程的設(shè)計(jì)理念）

4. 裝飾器的實(shí)戰(zhàn)：記錄函數(shù)耗時(shí)

現(xiàn)在有一個(gè) 關(guān)羽(GuanYu) 類(lèi)，它有兩個(gè)函數(shù)方法：attack(攻擊) 和 run(奔跑)

class?GuanYu?{attack()?{console.log('揮了一次大刀')}run()?{console.log('跑了一段距離')} }

而我們都是優(yōu)秀的程序員，時(shí)時(shí)刻刻都有著經(jīng)營(yíng)思維 (性能優(yōu)化)，因此想給 關(guān)羽(GuanYu) 的函數(shù)方法提前做好準(zhǔn)備：記錄關(guān)羽的每一次 attack(攻擊) 和 run(奔跑) 的執(zhí)行時(shí)間，以便于后期做性能優(yōu)化。

4.1 做法一：復(fù)制粘貼，不用思考一把梭就是干

拿到需求，不用多想，立刻在函數(shù)前后，添加記錄函數(shù)耗時(shí)的邏輯代碼，并復(fù)制粘貼到其他地方：

class?GuanYu?{attack()?{ +???const?start?=?+new?Date()console.log('揮了一次大刀') +???const?end?=?+new?Date() +???console.log(`耗時(shí):?${end?-?start}ms`)}run()?{ +???const?start?=?+new?Date()console.log('跑了一段距離') +???const?end?=?+new?Date() +???console.log(`耗時(shí):?${end?-?start}ms`)} }

但是這樣直接修改原函數(shù)代碼有以下幾個(gè)問(wèn)題：

理解成本高

統(tǒng)計(jì)耗時(shí)的相關(guān)代碼與函數(shù)本身邏輯并無(wú)關(guān)系，對(duì)函數(shù)結(jié)構(gòu)造成了破壞性的修改，影響到了對(duì)原函數(shù)本身的理解

維護(hù)成本高

如果后期還有更多類(lèi)似的函數(shù)需要添加統(tǒng)計(jì)耗時(shí)的代碼，在每個(gè)函數(shù)中都添加這樣的代碼非常低效，也大大提高了維護(hù)成本

4.2 做法二：裝飾器模式，不修改原代碼擴(kuò)展功能

4.2.1 裝飾器前置基礎(chǔ)知識(shí)

在開(kāi)始用裝飾器實(shí)現(xiàn)之前必須掌握以下基礎(chǔ)：

Object.getOwnPropertyDescriptor()

返回指定對(duì)象上一個(gè)自有屬性對(duì)應(yīng)的屬性描述符

var?a?=?{?b:?()?=>?{}?} var?descriptor?=?Object.getOwnPropertyDescriptor(a,?'b') console.log(descriptor) /***?{*???configurable:?true,??//?可配置的*???enumerable:?true,????//?可枚舉的*???value:?()?=>?{},?????//?該屬性對(duì)應(yīng)的值（數(shù)值，對(duì)象，函數(shù)等）*???writable:?true,??????//?可寫(xiě)入的*?}*/

這里要注意一個(gè)點(diǎn)是：value 可以是 JavaScript 的任意值，比如函數(shù)方法，正則，日期等

Object.defineProperty()

在一個(gè)對(duì)象上定義或修改一個(gè)屬性的描述符：

const?object1?=?{};Object.defineProperty(object1,?'property1',?{value:?'ThisIsNotWritable',writable:?false });object1.property1?=?'newValue'; //?throws?an?error?in?strict?modeconsole.log(object1.property1); //?expected?output:?'ThisIsNotWritable'

4.2.2 【重點(diǎn)】手寫(xiě)一個(gè)裝飾器函數(shù)

有了上面的兩個(gè)基礎(chǔ)后，我們開(kāi)始利用裝飾器模式的設(shè)計(jì)理念，用純函數(shù)的形式寫(xiě)一個(gè)裝飾器，實(shí)現(xiàn)記錄函數(shù)耗時(shí)功能。為了讓大家更深刻理解裝飾器的原理，我們先不用 @Decorator 這個(gè)語(yǔ)法糖。

下面代碼是本文的重點(diǎn)，大家可以放慢閱讀速度，理解后再繼續(xù)往下看：

//?裝飾器函數(shù) function?decoratorLogTime(target,?key)?{const?targetPrototype?=?target.prototype//?Step1?備份原來(lái)類(lèi)構(gòu)造器上的屬性描述符?Descriptorconst?oldDescriptor?=?Object.getOwnPropertyDescriptor(targetPrototype,?key)//?Step2?編寫(xiě)裝飾器函數(shù)業(yè)務(wù)邏輯代碼const?logTime?=?function?(...arg)?{//?Before?鉤子let?start?=?+new?Date()try?{//?執(zhí)行原來(lái)函數(shù)return?oldDescriptor.value.apply(this,?arg)?//?調(diào)用之前的函數(shù)}?finally?{//?After?鉤子let?end?=?+new?Date()console.log(`耗時(shí):?${end?-?start}ms`)}}//?Step3?將裝飾器覆蓋原來(lái)的屬性描述符的?valueObject.defineProperty(targetPrototype,?key,?{...oldDescriptor,value:?logTime}) }class?GuanYu?{attack()?{console.log('揮了一次大刀')}run()?{console.log('跑了一段距離')} } //?Step4?手動(dòng)執(zhí)行裝飾器函數(shù)，裝飾?GuanYu?的?attack?函數(shù) decoratorLogTime(GuanYu,?'attack') //?Step4?手動(dòng)執(zhí)行裝飾器函數(shù)，裝飾?GuanYu?的?run?函數(shù) decoratorLogTime(GuanYu,?'run')const?guanYu?=?new?GuanYu() guanYu.attack() //?揮了一次大刀 //?耗時(shí):?0ms guanYu.run() //?跑了一段距離 //?耗時(shí):?0ms

以上就是裝飾器的具體實(shí)現(xiàn)方法，其核心思路是：

Step1 備份原來(lái)類(lèi)構(gòu)造器 (Class.prototype) 的屬性描述符 (Descriptor)

利用 Object.getOwnPropertyDescriptor 獲取

Step2 編寫(xiě)裝飾器函數(shù)業(yè)務(wù)邏輯代碼

利用執(zhí)行原函數(shù)前后鉤子，添加耗時(shí)統(tǒng)計(jì)邏輯

Step3 用裝飾器函數(shù)覆蓋原來(lái)屬性描述符的 value

利用 Object.defineProperty 代理

Step4 手動(dòng)執(zhí)行裝飾器函數(shù)，裝飾 Class(類(lèi)) 指定屬性

從而實(shí)現(xiàn)在不修改原代碼的前提下，執(zhí)行額外邏輯代碼

5. @Decorator 裝飾器語(yǔ)法糖

但上一步 4.2.2 手寫(xiě)的裝飾器函數(shù)存在兩個(gè)可優(yōu)化的點(diǎn)：

是否可以讓裝飾器函數(shù)更關(guān)注業(yè)務(wù)邏輯？

Step1, Step2 是通用邏輯的，每個(gè)裝飾器都需要實(shí)現(xiàn)，簡(jiǎn)單來(lái)說(shuō)就是可復(fù)用的。

是否可以讓裝飾器寫(xiě)法更簡(jiǎn)單？

純函數(shù)實(shí)現(xiàn)的裝飾器，每裝飾一個(gè)屬性都要手動(dòng)執(zhí)行裝飾器函數(shù)，詳見(jiàn) Step4 步驟。針對(duì)上述優(yōu)化點(diǎn)，裝飾器草案中有一顆特別甜的語(yǔ)法糖，也就是 @Decorator ，它能夠幫你省去很多繁瑣的步驟來(lái)用上裝飾器。

只需要在想使用的裝飾器前加上@符號(hào)，裝飾器就會(huì)被應(yīng)用到目標(biāo)上。

5.1 @Decorator 語(yǔ)法糖的便捷性

下面我們用 @Decorator 的寫(xiě)法，來(lái)實(shí)現(xiàn)同樣的功能，看看代碼量可以精簡(jiǎn)多少：

//?Step2?編寫(xiě)裝飾器函數(shù)業(yè)務(wù)邏輯代碼 function?logTime(target,?key,?descriptor)?{const?oldMethed?=?descriptor.valueconst?logTime?=?function?(...arg)?{let?start?=?+new?Date()try?{return?oldMethed.apply(this,?arg)?//?調(diào)用之前的函數(shù)}?finally?{let?end?=?+new?Date()console.log(`耗時(shí):?${end?-?start}ms`)}}descriptor.value?=?logTimereturn?descriptor }class?GuanYu?{//?Step4?利用?@?語(yǔ)法糖裝飾指定屬性@logTimeattack()?{console.log('揮了一次大刀')}//?Step4?利用?@?語(yǔ)法糖裝飾指定屬性@logTimerun()?{console.log('跑了一段距離')} }const?guanYu?=?new?GuanYu() guanYu.attack() //?[LOG]:?揮了一次大刀 //?[LOG]:?耗時(shí):?3ms guanYu.run() //?[LOG]:?跑了一段距離 //?[LOG]:?耗時(shí):?3ms

為了讓更直觀了解上述代碼是否可以編譯后正常執(zhí)行，

我們可以從 TypeScript Playground 直接看到編譯后的代碼以及運(yùn)行結(jié)果，

注意！為了方便理解，記得關(guān)閉配置 emitDecoratorMetadata 禁止輸出元數(shù)據(jù)，

元數(shù)據(jù)是另一個(gè)比較復(fù)雜的知識(shí)點(diǎn)，我們本篇文章先跳過(guò)

關(guān)閉后編譯的代碼會(huì)更簡(jiǎn)單

我們打開(kāi)上面代碼的在線 Playground 鏈接，點(diǎn)擊 Run 運(yùn)行按鈕，即可看到其正常運(yùn)行和輸出結(jié)果：

對(duì)比純手寫(xiě)的裝飾器，用 @Decorator 語(yǔ)法糖可以省去 2 個(gè)重復(fù)的步驟：

• Step1 備份原來(lái)類(lèi)構(gòu)造器 (Class.prototype) 的屬性描述符 (Descriptor)

  const?oldDescriptor?=?Object.getOwnPropertyDescriptor(targetPrototype,?key)

• Step3 用裝飾器函數(shù)覆蓋原來(lái)屬性描述符的 value

  Object.defineProperty(targetPrototype,?key,?{...oldDescriptor,value:?logTime })

開(kāi)發(fā)者僅需兩步即可實(shí)現(xiàn)裝飾器的功能，可以更專(zhuān)注于裝飾器本身的業(yè)務(wù)邏輯：

• Step2 編寫(xiě)裝飾器函數(shù)業(yè)務(wù)邏輯代碼

  function?logTime(target,?key,?descriptor)?{const?oldMethed?=?descriptor.valueconst?logTime?=?function?(...arg)?{let?start?=?+new?Date()try?{return?oldMethed.apply(this,?arg)?//?調(diào)用之前的函數(shù)}?finally?{let?end?=?+new?Date()console.log(`耗時(shí):?${end?-?start}ms`)}}descriptor.value?=?logTimereturn?descriptor }

• Step4 利用 @ 語(yǔ)法糖裝飾指定屬性

  @logTime attack()?{console.log('揮了一次大刀') }

5.2 【重點(diǎn)】分析 @Decorator 語(yǔ)法糖編譯后的代碼

@Decorator 語(yǔ)法糖很甜，但卻不能直接食用。因?yàn)檠b飾器目前僅僅是 ECMAScript 的語(yǔ)言提案，還處于 stage-2 階段，無(wú)論是最新版的 Chrome 瀏覽器還是 Node.js 都不能直接運(yùn)行帶有 @Decorator 語(yǔ)法糖的代碼。我們需要借助 TypeScript 或者 Babel 的能力，將源碼編譯后才能正常運(yùn)行。而在 TypeSciprt Playground 上，我們可以直接看到編譯后代碼。

為了更清晰容易理解，我們把編譯后的業(yè)務(wù)代碼先注釋掉，只看裝飾器實(shí)現(xiàn)的相關(guān)代碼：

"use?strict"; //?Part1?裝飾器工具函數(shù)(__decorate)的定義 var?__decorate?=?(this?&&?this.__decorate)?||?function?(decorators,?target,?key,?desc)?{var?c?=?arguments.length,?r?=?c?<?3???target?:?desc?===?null???desc?=?Object.getOwnPropertyDescriptor(target,?key)?:?desc,?d;if?(typeof?Reflect?===?"object"?&&?typeof?Reflect.decorate?===?"function")?r?=?Reflect.decorate(decorators,?target,?key,?desc);else?for?(var?i?=?decorators.length?-?1;?i?>=?0;?i--)?if?(d?=?decorators[i])?r?=?(c?<?3???d(r)?:?c?>?3???d(target,?key,?r)?:?d(target,?key))?||?r;return?c?>?3?&&?r?&&?Object.defineProperty(target,?key,?r),?r; };function?logTime(target,?key,?descriptor)?{//?... }class?GuanYu?{//?... }//?Part2?裝飾器工具函數(shù)(__decorate)的執(zhí)行 __decorate([logTime],?GuanYu.prototype,?"attack",?null); __decorate([logTime],?GuanYu.prototype,?"run",?null);//?...

上述代碼核心點(diǎn)是兩個(gè)部分，一個(gè)是定義，一個(gè)是執(zhí)行。定義部分較為復(fù)雜，我們先從執(zhí)行入手：Part2 裝飾器工具函數(shù)(__decorate)的執(zhí)行會(huì)傳入以下 4 個(gè)參數(shù)：

裝飾器業(yè)務(wù)邏輯函數(shù)

類(lèi)的構(gòu)造器

類(lèi)的構(gòu)造器屬性名

屬性描述符(可以為 null)

為了方便理解 Part1 裝飾器工具函數(shù) __decorate 的定義，我們需要精簡(jiǎn) __decorate 的函數(shù)代碼，讓它變成最簡(jiǎn)單的樣子，而精簡(jiǎn)代碼的前提是收集條件：

• 條件 1 (this && this.__decorate) 可刪除

這里的 this 是指 window 對(duì)象，這一步的含義是避免重復(fù)定義 __decorate 函數(shù)，屬于輔助代碼，可刪掉。

• 條件 2 c < 3 === false

Part1 的 c = arguments.length 代表參數(shù)的個(gè)數(shù)，由 Part2 我們知道工具函數(shù)會(huì)傳入 4 個(gè)參數(shù)，因此在本次案例中 c < 3 參數(shù)個(gè)數(shù)小于 3 的情況不存在，即 c < 3 === false，

• 條件 3 c > 3 === true

本次案例中 c > 3 參數(shù)大于 3 的情況存在，即 c > 3 === true 。

• 條件 4 desc === null

同時(shí)在 Part1 我們知道第四個(gè)參數(shù) desc 傳入的值就是 null ，即 desc === null

• 條件 5 typeof Reflect !== "object"

Reflect 反射是 ES6 的語(yǔ)法，本文為了更容易理解，暫不引入新的 ES6 特性和語(yǔ)法，讓環(huán)境默認(rèn)為 ES5，即不存在 Reflect 對(duì)象，即 typeof Reflect !== "object"，有了上述條件后，我們可以進(jìn)一步精簡(jiǎn) __decorate 的方法

• 代碼片段 1：

r?=?c?<?3???target?:?desc?===?null???desc?=?Object.getOwnPropertyDescriptor(target,?key)?:?desc//?根據(jù)?c?<?3?===?false?,?desc?===?null?條件 //?精簡(jiǎn)后r?=?desc?=?Object.getOwnPropertyDescriptor(target,?key) //?r?和?desc?此時(shí)代表的是屬性的描述符?Descriptor

• 代碼片段 2：

if?(d?=?decorators[i])?r?=?(c?<?3???d(r)?:?c?>?3???d(target,?key,?r)?:?d(target,?key))?||?r;//?根據(jù)?c?<?3?===?false?,?c?>?3?===?true?條件 //?精簡(jiǎn)后if?(d?=?decorators[i])?r?=?d(target,?key,?r)?||?r;

• 代碼片段 3：

if?(typeof?Reflect?===?"object"?&&?typeof?Reflect.decorate?===?"function")?r?=?Reflect.decorate(decorators,?target,?key,?desc);//?為了方便理解，本案例暫認(rèn)為?Reflect?不存在 //?精簡(jiǎn)后//?空

• 代碼片段 4：

return?c?>?3?&&?r?&&?Object.defineProperty(target,?key,?r),?r;//?根據(jù)?c?>?3?===?true,?r?是屬性描述符，必定存在 //?精簡(jiǎn)后Object.defineProperty(target,?key,?r) return?r;

• 精簡(jiǎn)后整體代碼：

var?__decorate?=?function?(decorators,?target,?key,?desc)?{var?c?=?arguments.length;//?Step1?備份原來(lái)類(lèi)構(gòu)造器?(Class.prototype)?的屬性描述符?(Descriptor)var?r?=?desc?=?Object.getOwnPropertyDescriptor(target,?key),var?d;for?(var?i?=?decorators.length?-?1;?i?>=?0;?i--)?{//?d?為裝飾器業(yè)務(wù)邏輯函數(shù)if?(d?=?decorators[i])?{//?執(zhí)行?d，并傳入?target?類(lèi)構(gòu)造器，key?屬性名，r?屬性描述符r?=?d(target,?key,?r)?||?r;}}//?Step3?用裝飾器函數(shù)覆蓋原來(lái)屬性描述符Object.defineProperty(target,?key,?r)return?r; };

代碼經(jīng)過(guò)精簡(jiǎn)之后核心原理還是和我們 4.2.2 手寫(xiě)一個(gè)裝飾器函數(shù)的原理是一樣的。

Step1 備份原來(lái)類(lèi)構(gòu)造器 (Class.prototype) 的屬性描述符 (Descriptor)

利用 Object.getOwnPropertyDescriptor 獲取

**Step3 用裝飾器函數(shù)覆蓋原來(lái)屬性描述符的 value **

利用 Object.defineProperty 代理

TypeScript 對(duì)裝飾器編譯后的代碼，只不過(guò)是把裝飾器可復(fù)用的邏輯抽離成一個(gè)工具函數(shù)，方便復(fù)用而已。分析到這里，是不是對(duì) @Decorator 裝飾器最根本的實(shí)現(xiàn)有了更深入的了解？從上面的例子，我們也進(jìn)一步驗(yàn)證了：

Decorator Pattern 裝飾器模式的設(shè)計(jì)理念：在不修改原有代碼情況下，對(duì)功能進(jìn)行擴(kuò)展

Decorator 裝飾器的具體實(shí)現(xiàn)，本質(zhì)是函數(shù)，參數(shù)有 target, key, descriptor

@Decoretor 是裝飾器的一種語(yǔ)法糖，只是一種便捷寫(xiě)法，編譯后本質(zhì)還是一個(gè)函數(shù)

6. 帶參數(shù)的裝飾器：裝飾器工廠函數(shù)

在上面的「記錄函數(shù)耗時(shí)」例子中，如果我們希望在日志前面加個(gè)可變的標(biāo)簽，如何實(shí)現(xiàn)？

答案是使用帶參數(shù)的裝飾器

重點(diǎn)：logTime 是個(gè)高階函數(shù)，可以理解成裝飾器工廠函數(shù)，其接收參數(shù)執(zhí)行后，返回一個(gè)裝飾器函數(shù)

function?logTime(tag)?{?//?這是一個(gè)裝飾器工廠函數(shù)return?function(target,?key,?descriptor)?{??//?這是裝飾器const?oldMethed?=?descriptor.valueconst?logTime?=?function?(...arg)?{let?start?=?+new?Date()try?{return?oldMethed.apply(this,?arg)}?finally?{let?end?=?+new?Date()console.log(`【${tag}】耗時(shí):?${end?-?start}ms`)}}descriptor.value?=?logTimereturn?descriptor} }class?GuanYu?{@logTime('攻擊')attack()?{console.log('揮了一次大刀')},@logTime('奔跑')run()?{console.log('跑了一段距離')} }//?...

編譯后：

//?...__decorate([logTime('攻擊')],?GuanYu.prototype,?"attack",?null); __decorate([logTime('奔跑')],?GuanYu.prototype,?"run",?null);//?...

看了編譯后的代碼，我們就很容易知道帶參數(shù)裝飾器的具體實(shí)現(xiàn)原理，無(wú)非是直接先執(zhí)行裝飾器工廠函數(shù)，此時(shí)傳入對(duì)應(yīng)參數(shù)，然后返回一個(gè)新的裝飾器業(yè)務(wù)邏輯的函數(shù)。

7. 五種裝飾器：類(lèi)、屬性、方法、參數(shù)、訪問(wèn)器

我們上面學(xué)了那么多裝飾器的內(nèi)容，其實(shí)只學(xué)了一種裝飾器：方法裝飾器，而裝飾器一共有 5 種類(lèi)型可被我們使用：

類(lèi)裝飾器

屬性裝飾器

方法裝飾器

訪問(wèn)器裝飾器

參數(shù)裝飾器

先來(lái)個(gè)全家福，然后我們逐一攻破

//?類(lèi)裝飾器 @classDecorator class?GuanYu?{//?屬性裝飾器@propertyDecoratorname:?string;//?方法裝飾器@methodDecoratorattack?(//?參數(shù)裝飾器@parameterDecoratormeters:?number)?{}//?訪問(wèn)器裝飾器@accessorDecoratorget?horse()?{} }

7.1 類(lèi)裝飾器

類(lèi)型聲明：

//?類(lèi)裝飾器 function?classDecorator(target:?any)?{return?//?... };

• @參數(shù)：只接受一個(gè)參數(shù)

target: 類(lèi)的構(gòu)造器

• @返回：如果類(lèi)裝飾器返回了一個(gè)值，她將會(huì)被用來(lái)代替原有的類(lèi)構(gòu)造器的聲明

  因此，類(lèi)裝飾器適合用于繼承一個(gè)現(xiàn)有類(lèi)并添加一些屬性和方法。例如我們可以添加一個(gè) addToJsonString 方法給所有的類(lèi)來(lái)新增一個(gè) toString 方法

function?addToJSONString(target)?{return?class?extends?target?{toJSONString()?{return?JSON.stringify(this);}}; }@addToJSONString class?C?{public?foo?=?"foo";public?num?=?24; }console.log(new?C().toJSONString()) //?[LOG]:?"{"foo":"foo","num":24}"

7.2 方法裝飾器

已經(jīng)在上面章節(jié)介紹過(guò)利用方法裝飾器來(lái)實(shí)現(xiàn)「記錄函數(shù)耗時(shí)」功能，現(xiàn)在我們重新復(fù)習(xí)下

類(lèi)型聲明：

//?方法裝飾器 function?methodDecorator(target:?any,?propertyKey:?string,?descriptor:?PropertyDescriptor)?{return?//?... };

• @參數(shù)：

target: 對(duì)于靜態(tài)成員來(lái)說(shuō)是類(lèi)的構(gòu)造器，對(duì)于實(shí)例成員來(lái)說(shuō)是類(lèi)的原型鏈

propertyKey: 屬性的名稱(chēng)

descriptor: 屬性的描述器

• @返回：如果返回了值，它會(huì)被用于替代屬性的描述器。

• 利用方法裝飾器我們可以實(shí)現(xiàn)更多的具體場(chǎng)景，比如「打印 Request 的請(qǐng)求參數(shù)和結(jié)果」功能：

  function?loggerParamsResult(target,?propertyKey,?descriptor)?{const?original?=?descriptor.value;descriptor.value?=?async?function?(...args)?{let?resultlet?errortry?{result?=?await?original.call(this,?...args);}?catch(e)?{error?=?new?Error(e)}if?(error)?{console.error('請(qǐng)求失敗！')console.error('請(qǐng)求參數(shù):?',?...args)console.error('失敗原因:?',?error)}?else?{console.log('請(qǐng)求成功！')console.log('請(qǐng)求參數(shù)',?...args)console.log('請(qǐng)求結(jié)果:?',?result)}return?result;} }class?App?{@loggerParamsResultrequest(data)?{return?new?Promise((resolve,?reject)?=>?{const?random?=?Math.random()?>?0.5if?(random)?{resolve(random)}?else?{reject(random)}})} }const?app?=?new?App(); app.request({?url:?'https://www.tencent.com'});//?[LOG]:?"請(qǐng)求成功！" //?[LOG]:?"請(qǐng)求參數(shù)",??{ //???"url":?"https://www.tencent.com" //?} //?[LOG]:?"請(qǐng)求結(jié)果:?",??true//?[ERR]:?"請(qǐng)求失敗！" //?[ERR]:?"請(qǐng)求參數(shù):?",??{ //???"url":?"https://www.tencent.com" //?} //?[ERR]:?"失敗原因:?",??false

  總結(jié)：

  無(wú)論是「記錄函數(shù)耗時(shí)」還是「打印 Request 的請(qǐng)求參數(shù)和結(jié)果」，本質(zhì)都是在實(shí)現(xiàn) Before / After 鉤子，因此我們只需要記住方法裝飾器可以實(shí)現(xiàn)與 Before / After 鉤子 相關(guān)的場(chǎng)景功能。

  課后題：

  除了上述兩個(gè)例子，大家還能想到方法裝飾器有什么好的應(yīng)用場(chǎng)景嗎？

  7.3 屬性裝飾器

  類(lèi)型聲明：

  //?屬性裝飾器 function?propertyDecorator(target:?any,?propertyKey:?string)?{}

  • @參數(shù): 只接受兩個(gè)參數(shù)，少了 descriptor 描述器

• target: 對(duì)于靜態(tài)成員來(lái)說(shuō)是類(lèi)的構(gòu)造器，對(duì)于實(shí)例成員來(lái)說(shuō)是類(lèi)的原型鏈

• propertyKey: 屬性的名稱(chēng)

• @返回: 返回的結(jié)果將被忽略

• 利用屬性裝飾器，我們可以實(shí)現(xiàn)一個(gè)非常簡(jiǎn)單的屬性監(jiān)聽(tīng)功能 ，當(dāng)屬性改變時(shí)觸發(fā)指定函數(shù)：

  function?observable(fnName)?{??//?裝飾器工廠函數(shù)return?function?(target:?any,?key:?string):?any?{??//?裝飾器let?prev?=?target[key];Object.defineProperty(target,?key,?{set(next)?{target[fnName](prev,?next);prev?=?next;}})} }class?Store?{@observable('onCountChange')count?=?-1;onCountChange(prev,?next)?{console.log('>>>?count?has?changed!')console.log('>>>?prev:?',?prev)console.log('>>>?next:?',?next)} }const?store?=?new?Store(); store.count?=?10//?[LOG]:?">>>?count?has?changed!" //?[LOG]:?">>>?prev:?",??undefined //?[LOG]:?">>>?next:?",??-1 //?[LOG]:?">>>?count?has?changed!" //?[LOG]:?">>>?prev:?",??-1 //?[LOG]:?">>>?next:?",??10

  7.4 訪問(wèn)器裝飾器

  訪問(wèn)器裝飾器總體上講和方法裝飾器很接近，唯一的區(qū)別在于第三個(gè)參數(shù) descriptor 描述器中有的 key 不同：

  方法裝飾器的描述器的 key 為：

  • value

  • writable

  • enumerable

  • configurable

  訪問(wèn)器裝飾器的描述器的 key 為：

  • get

  • set

  • enumerable

  • configurable

  類(lèi)型聲明：

  //?訪問(wèn)器裝飾器 function?methodDecorator(target:?any,?propertyKey:?string,?descriptor:?PropertyDescriptor)?{return?//?... };

  例如，我們可以將某個(gè)屬性在賦值的時(shí)候做一層代理，額外相加一個(gè)值：

  function?addExtraNumber(num)?{??//?裝飾器工廠函數(shù)return?function?(target,?propertyKey,?descriptor)?{?//?裝飾器const?original?=?descriptor.set;descriptor.set?=?function?(value)?{const?newObj?=?{}Object.keys(value).forEach(key?=>?{newObj[key]?=?value[key]?+?num})return?original.call(this,?newObj)}} }class?C?{private?_point?=?{?x:?0,?y:?0?}@addExtraNumber(2)set?point(value:?{?x:?number,?y:?number?})?{this._point?=?value;}get?point()?{return?this._point;} }const?c?=?new?C(); c.point?=?{?x:?1,?y:?1?};console.log(c.point)//?[LOG]:?{ //???"x":?3, //???"y":?3 //?}

  7.5 參數(shù)裝飾器

  類(lèi)型聲明：

  //?參數(shù)裝飾器 function?parameterDecorator(target:?any,?methedKey:?string,?parameterIndex:?number)?{}

  • @參數(shù)：接收三個(gè)參數(shù)

• target: 對(duì)于靜態(tài)成員來(lái)說(shuō)是類(lèi)的構(gòu)造器，對(duì)于實(shí)例成員來(lái)說(shuō)是類(lèi)的原型鏈

• methedKey: 方法的名稱(chēng)，注意！是方法的名稱(chēng)，而不是參數(shù)的名稱(chēng)

• parameterIndex: 參數(shù)在方法中所處的位置的下標(biāo)

• @返回：返回的值將會(huì)被忽略

• 單獨(dú)的參數(shù)裝飾器能做的事情很有限，它一般都被用于記錄可被其它裝飾器使用的信息。

  function?Log(target,?methedKey,?parameterIndex)?{console.log(`方法名稱(chēng)?${methedKey}`);console.log(`參數(shù)順序?${parameterIndex}`); }class?GuanYu?{attack(@Log?person,?@Log?dog)?{console.log(`向?${person}?揮了一次大刀`)} }//?[LOG]:?"方法名稱(chēng)?attack" //?[LOG]:?"參數(shù)順序?0"

  7.6 裝飾器參數(shù)總結(jié)

  8. 裝飾器順序

  8.1 同種裝飾器組合順序：洋蔥模型

  如果同一個(gè)方法有多個(gè)裝飾器，其執(zhí)行順序是怎樣的？

  答案：

  以方法裝飾器為例，同種裝飾器組合后，其順序會(huì)像剝洋蔥一樣，

  先從外到內(nèi)進(jìn)入，然后由內(nèi)向外執(zhí)行。和 Koa 的中間件順序類(lèi)似。

  function?dec(id){console.log('裝飾器初始化',?id);return?function?(target,?property,?descriptor)?{console.log('裝飾器執(zhí)行',?id);} }class?Example?{@dec(1)@dec(2)method(){} }//?裝飾器初始化?1 //?裝飾器初始化?2 //?裝飾器執(zhí)行?2 //?裝飾器執(zhí)行?1 I2b3cL.png

  其原理，看編譯后的代碼就非常清楚：

  重點(diǎn)：

• dec(1), dec(2) 初始化時(shí)就執(zhí)行

• for (var i = decorators.length - 1; i >= 0; i--) 是從右向左，倒敘執(zhí)行

//?由于本段代碼不存在?c?<?3?(參數(shù)少于3個(gè))?的情況，為了方便理解已精簡(jiǎn)了部分不可能執(zhí)行的代碼 var?__decorate?=?function?(decorators,?target,?key,?desc)?{var?c?=?arguments.length,r?=?desc?=?Object.getOwnPropertyDescriptor(target,?key),d;for?(var?i?=?decorators.length?-?1;?i?>=?0;?i--)if?(d?=?decorators[i])?r?=?d(target,?key,?r)?||?r;Object.defineProperty(target,?key,?r)return?r; };function?dec(id)?{console.log('裝飾器初始化',?id);return?function?(target,?property,?descriptor)?{console.log('裝飾器執(zhí)行',?id);}; } class?Example?{method()?{?} } __decorate([dec(1),dec(2) ],?Example.prototype,?"method",?null);//?裝飾器初始化?1 //?裝飾器初始化?2 //?裝飾器執(zhí)行?2 //?裝飾器執(zhí)行?1

8.2 不同類(lèi)型裝飾器順序：有規(guī)則有規(guī)律

• 實(shí)例成員：(參數(shù) > 方法) / 訪問(wèn)器 / 屬性 裝飾器 (按順序)

• 靜態(tài)成員：(參數(shù) > 方法) / 訪問(wèn)器 / 屬性 裝飾器 (按順序)

• 構(gòu)造器：參數(shù)裝飾器

• 類(lèi)裝飾器

多種裝飾器優(yōu)先級(jí)為：

實(shí)例成員最高，內(nèi)部成員里面的裝飾器則按定義順序執(zhí)行，

依次排下來(lái)，類(lèi)裝飾器最低

function?f(key:?string):?any?{//?console.log("初始化:?",?key);return?function?()?{console.log("執(zhí)行:?",?key);}; }@f("8.?類(lèi)") class?C?{@f("4.?靜態(tài)屬性")static?prop?:?number;@f("5.?靜態(tài)方法")static?method(@f("6.?靜態(tài)方法參數(shù)")?foo)?{}constructor(@f("7.?構(gòu)造器參數(shù)")?foo)?{}@f("2.?實(shí)例方法")method(@f("1.?實(shí)例方法參數(shù)")?foo)?{}@f("3.?實(shí)例屬性")prop?:?number; }//?"執(zhí)行:?",??"1.?實(shí)例方法參數(shù)" //?"執(zhí)行:?",??"2.?實(shí)例方法" //?"執(zhí)行:?",??"3.?實(shí)例屬性" //?"執(zhí)行:?",??"4.?靜態(tài)屬性" //?"執(zhí)行:?",??"6.?靜態(tài)方法參數(shù)" //?"執(zhí)行:?",??"5.?靜態(tài)方法" //?"執(zhí)行:?",??"7.?構(gòu)造器參數(shù)" //?"執(zhí)行:?",??"8.?類(lèi)"

9. 裝飾器總結(jié)

9.1 應(yīng)用場(chǎng)景

裝飾器很像是組合一系列函數(shù)，類(lèi)似于高階函數(shù)和類(lèi)。

合理利用裝飾器對(duì)一些非內(nèi)部邏輯相關(guān)的代碼進(jìn)行封裝提煉，

能夠幫助我們快速完成重復(fù)性的工作，節(jié)省時(shí)間，極大提高開(kāi)發(fā)效率。

• 類(lèi)裝飾器

可添加額外的方法和屬性，比如：擴(kuò)展 toJSONString 方法

• 方法裝飾器

可實(shí)現(xiàn) Before / After 鉤子功能，比如：記錄函數(shù)耗時(shí)，打印 request 參數(shù)結(jié)果，節(jié)流防抖

• 屬性裝飾器

可監(jiān)聽(tīng)屬性改變觸發(fā)其他事件，比如：實(shí)現(xiàn) count 監(jiān)聽(tīng)器

• 訪問(wèn)器裝飾器

• 參數(shù)裝飾器

當(dāng)然，還有更多可以使用裝飾器的場(chǎng)景等著我們?nèi)グl(fā)現(xiàn)

• 運(yùn)行時(shí)類(lèi)型檢查

• 依賴注入

9.2 優(yōu)點(diǎn)

• 在不修改原有代碼情況下，對(duì)功能進(jìn)行擴(kuò)展。也就是對(duì)擴(kuò)展開(kāi)放，對(duì)修改關(guān)閉。

• 優(yōu)雅地把“輔助性功能邏輯”從“業(yè)務(wù)邏輯”中分離，解耦出來(lái)。（AOP 面向切面編程的設(shè)計(jì)理念）

• 裝飾類(lèi)和被裝飾類(lèi)可以獨(dú)立發(fā)展，不會(huì)相互耦合

• 裝飾模式是 Class 繼承的一個(gè)替代模式，可以理解成組合

9.3 缺點(diǎn)

但是糖再好吃，也不要吃太多，容易壞牙齒的，濫用過(guò)多裝飾器會(huì)導(dǎo)致很多問(wèn)題：

• 理解成本：過(guò)多帶業(yè)務(wù)功能的裝飾器會(huì)使代碼本身邏輯變得撲朔迷離

• 調(diào)試成本：裝飾器層次增多，會(huì)增加調(diào)試成本，很難追溯到一個(gè) Bug 是在哪一層包裝導(dǎo)致的

9.4 注意事項(xiàng)

• 裝飾器的功能邏輯代碼一定是輔助性的

比如日志記錄，性能統(tǒng)計(jì)等，這樣才符合 AOP 面向切面編程的思想，如果把過(guò)多的業(yè)務(wù)邏輯寫(xiě)在了裝飾器上，效果會(huì)適得其反。

• 裝飾器語(yǔ)法尚未定案以及未被納入 ES 標(biāo)準(zhǔn)，標(biāo)準(zhǔn)化的過(guò)程還需要很長(zhǎng)時(shí)間

由于裝飾器語(yǔ)法未來(lái)制定的標(biāo)準(zhǔn)可能與當(dāng)前的裝飾器實(shí)現(xiàn)方案有所不同，Mobx 6 出于兼容性的考慮，放棄了裝飾器的用法，并建議使用 makeObservable / makeAutoObservable 代替。

詳情請(qǐng)查看：https://zh.mobx.js.org/enabling-decorators.html

裝飾器提案目前進(jìn)度：https://github.com/tc39/proposal-decorators

最近熱文：

5000 萬(wàn)行以上大型代碼倉(cāng)庫(kù)工程實(shí)踐


帶你快速了解 Docker 和 Kubernetes


? ??


? ? ? ? ? ?? ? ??? “科技公益，向善而生”

? ? ? ? ????2021科技公益-系列技術(shù)直播 來(lái)啦！

掃描海報(bào)下方二維碼，一鍵預(yù)定直播，精彩不容錯(cuò)過(guò)！

點(diǎn)擊下方【閱讀原文】也可直接預(yù)約直播！

總結(jié)

以上是生活随笔為你收集整理的一文读懂 @Decorator 装饰器——理解 VS Code 源码的基础的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。