装饰器到底是个啥玩意儿？

先说一句，装饰器在 TypeScript 里就像给代码穿上外套。

哈哈，你要是把类、属性、方法dou套上这层外套，运行时它们会悄悄被改造。

别急，我慢慢跟你掰扯。

装饰器本质上是一个函数，接受目标对象的元信息。

这个函数Ke以在编译阶段把一些逻辑塞进去，等到实际运行时再生效。

比如说你想给每个方法加日志，只要写个 @Log 就行。

说实话，这玩意儿真的省事儿。

不过要想玩转它，你得先弄清楚它们的执行顺序，否则可Neng会踩坑。

一步步拆解执行顺序 整体流程先抖个底

整个过程分两段：先求值，再执行。

求值阶段会把所有装饰器表达式算出来生成对应的装饰器函数对象。

这个阶段是从上到下、从左到右依次进行的。

接下来就是执行阶段了关键点来了——这一次是**从后往前**、**从右到左**。

所以Ru果你在同一个成员上写了 @first @second， first 的工厂先跑，second 的工厂后跑；但真正执行时 second 会先动手，然后才是 first。

不同成员类型的排队规则

别以为只kan同一个声明就完事了类里还有属性、方法、访问器、参数这些家伙，它们各自有自己的排队顺序。

大体上Ke以这么记：

属性装饰器 → 方法装饰器 → 参数装饰器 → 类装饰器

同类成员内部，再按照 **实例成员 → 静态成员** 的顺序走。

Ru果有多个同类型装饰器，总是后面那个先执行。

实例示例：全家福版

function logFactory{
    console.log;
    return function{
        console.log;
    }
}
@logFactory
class Demo{
    @logFactory
    prop:number;
    @logFactory
    static staticProp:string;
    constructor p:string){}
    @logFactory
    method arg:number){}
    @logFactory
    static staticMethod arg:number){}
}

跑一下上面的 console 会这么输出：

工厂：实例属性

工厂：静态属性

工厂：构造参数

工厂：实例方法

工厂：方法参数

工厂：静态方法

*...省略其它*...

*注意*: 真正的“执行”顺序会倒着来比如 “静态方法参数” Zui早被调用。

细节补丁：参数装饰器逆向走位

AOP 爱好者常常忘记一点——参数装饰器是 **从右往左** 执行的。

也就是说Ru果一个方法有两个参数分别打了 @A 和 @B，控制台会先kan到 B 再kan到 A 的日志。

小技巧：调试顺序的小彩蛋

Clever 的朋友们Ke以在每个装饰器里加点颜色输出或者时间戳，这样一眼就Nengkan出谁先谁后。

# 为什么百度不收录？#

C…啊，对不起，我刚才跑题了回到正题。说到 SEO，hen多人会问：

为什么百度不收录我的页面？

其实原因主要有三点：

内容质量不够高——重复、薄弱或缺乏价值dou容易被过滤。

站点结构不友好——没有合理的标题层级、缺少 meta 信息，会让爬虫迷路。

服务器响应异常——返回码不是 200 或者响应慢，dou可Neng导致抓取失败。

咱就是说只要把这些坑填平，再加点原创、有深度的内容，大概率就Neng被百度收录啦！你懂的~

实战小结——怎么避免踩坑？

C…不对不对，我差点忘了重点！这里给你几条实用建议：

*先打开 experimentalDecorators 和 emitDecoratorMetadata 两个编译选项*——没有它们根本用不了装饰器。

*保持装饰器函数纯粹*——别在里面Zuo副作用太大的事，不然调试起来头大。

*多层嵌套时用日志明确每一步的“求值”和“执行”*——这样Neng快速定位顺序错误。

*Ru果涉及类继承，记得子类的装饰器会在父类之后执行*——这点经常被忽视。

*Zui后把所有 decorator 写在同一个文件或模块里*——避免循环依赖导致奇怪报错。

装饰器不是万Neng钥匙呀！

虽然它Neng帮你省掉不少冗余代码，但滥用也会让代码可读性下降，就像穿太多外套一样，又热又累。害，还是得适度使用才行。

好了这篇文章差不多结束啦。Ru果还有啥疑问，随时来找我聊聊呗~ 哈哈！祝你玩转 TypeScript 装饰器，一路顺风！

---