JavaScript装饰器是用于增强类及成员行为的语法特性,接收目标、名称、描述符等参数并返回新描述符或类;类装饰器在定义时执行一次,可替换类或注入元数据;方法/访问器装饰器通过修改descriptor.value等实现功能扩展;函数装饰器可通过高阶函数模拟;需Babel或TS支持,注意执行顺序与配置。

JavaScript装饰器是一种语法特性,用于在不修改原始代码的前提下,为类、方法、访问器或参数添加额外行为。它本质上是函数,接收目标对象、属性名、描述符等参数,返回新的描述符或修改后的目标,从而实现功能增强。
装饰器如何作用于类
类装饰器接收三个参数:目标构造函数、类名(undefined)、类描述符(目前为undefined,仅作占位)。它通常用于注入元数据、注册实例、添加静态属性或封装整个类逻辑。
- 可以返回一个新类来替换原类,比如添加日志、权限检查或自动绑定方法
- 常见用法包括:自动订阅事件、标记组件类型(如 React 中的 @observer)、注入依赖(如 Angular 的 @Component)
- 注意:类装饰器只在类定义时执行一次,不能用于普通对象字面量
装饰器如何修饰类成员(方法/访问器)
方法装饰器接收目标对象(原型或构造函数)、属性名、属性描述符。它能修改方法的行为,比如缓存结果、防抖、权限校验或性能监控。
- 通过修改 descriptor.value 可包装原函数,例如添加 try-catch 或计时逻辑
- 可读取 descriptor.enumerable 或 configurable 来控制属性可见性与可配置性
- 访问器(getter/setter)装饰器同理,但需同时处理 get 和 set 描述符
函数装饰器与实用工具模式
虽然标准不直接支持“函数装饰器”,但可通过高阶函数模拟类似效果:把函数传入装饰函数,返回增强后的新函数。
立即学习“Java免费学习笔记(深入)”;
- 例如 memoize(fn) 返回带缓存的版本,debounce(fn, ms) 返回防抖版本
- 组合多个装饰器时可用管道写法:compose(throttle, log, validate)(handler)
- 这类函数本质是纯函数式扩展,不依赖语法糖,兼容所有环境
使用前提与注意事项
装饰器目前处于 Stage 3 提案阶段,需借助 Babel(@babel/plugin-proposal-decorators)或 TypeScript 编译支持。启用时建议明确设置 legacy: false(新提案行为),避免与旧版语义混淆。
- 装饰器表达式必须是可求值的函数,不能是箭头函数字面量(因需 this 绑定)
- 多个装饰器从上到下执行,但应用顺序是从下到上(类似数组 reduceRight)
- 类字段装饰器(如 @state name = '')需配合 @babel/plugin-proposal-decorators 和 @babel/plugin-proposal-class-properties










