JavaScript装饰器现处Stage 3，语法稳定且获主流工具支持，可安全用于生产。TypeScript 5.0+默认启用新装饰器语法，Babel需配置@babel/plugin-proposal-decorators并指定version: "2023-11"，Vite、Webpack等构建工具已兼容。新装饰器采用(value, context)函数签名，与旧版legacy decorators不兼容。核心应用包括：1. 增强方法行为，如通过@log实现自动日志记录与性能监控；2. 控制属性只读性，使用@readonly确保字段不可变，提升数据安全；3. 添加类元数据标签，如@Label("用户管理")为类附加描述信息，便于框架反射读取。装饰器有助于分离关注点，提升代码声明性与组织性，适用于框架开发、状态管理等场景。
JavaScript 中的装饰器（Decorators）目前处于 Stage 3 阶段，属于“候选提案”（Candidate Proposal），意味着语法已经基本稳定，主流工具链已提供支持，正在等待最终纳入正式标准。它不再是实验性功能，而是可以安全用于生产环境的特性。
当前发展阶段与工具支持
现代 JavaScript 装饰器采用 (value, context) 的函数签名，与早期 TypeScript 或 Babel 的 “legacy decorators” 在语义上有显著差异，不能混用。
- TypeScript：从 5.0 版本起，默认启用对 Stage 3 装饰器的支持，推荐使用新语法。
-
Babel：可通过
@babel/plugin-proposal-decorators插件并设置version: "2023-11"来启用新版本装饰器。 - 构建工具：Vite、Webpack 等主流工具已能良好处理经过转译的装饰器代码。
实用应用场景
装饰器的核心价值是实现关注点分离，将横切逻辑（如日志、权限、缓存）从核心业务中剥离。以下是几个典型用例：
1. 方法行为增强（日志、性能监控）
通过包装方法，在不修改原逻辑的情况下添加额外行为。
立即学习“Java免费学习笔记（深入）”；
function log(target, context) {if (context.kind === 'method') {
return function(...args) {
console.log(`调用 ${context.name}，参数:`, args);
const result = this[target.name](...args);
console.log(`${context.name} 返回:`, result);
return result;
};
}
}
@log
getName() { return this.name; }
2. 属性只读或不可变控制
限制类字段或方法的可写性，提升数据安全性。
function readonly(target, context) {if (context.kind === 'field') {
return function (initialValue) {
return { value: initialValue, writable: false };
};
}
}
class User {
@readonly id = 1;
}
// new User().id = 2; // 错误：无法修改只读属性
3. 类元数据标记与配置
为类添加描述信息，便于框架反射或运行时读取。
function Label(name) {return (target, context) => {
target.label = name;
};
}
@Label("用户管理")
class UserController { }
// 其他地方读取
console.log(UserController.label); // "用户管理" 基本上就这些。装饰器让代码更具声明性，适合在框架开发、状态管理、API 封装等场景中使用，虽然需要适应新的心智模型，但一旦掌握，能显著提升代码组织能力。
