JavaScript装饰器是Stage 3提案，支持修饰类、类方法、访问器及字段，不支持普通函数等；分为类装饰器（1参数）、方法装饰器（3参数）、参数装饰器（3参数），需TS或Babel配置启用。
JavaScript 中的装饰器（Decorators）目前仍是 Stage 3 提案，尚未正式纳入 ECMAScript 标准，但已被 TypeScript 和 Babel（配合插件）广泛支持。它提供了一种声明式方式来**增强类、类成员（方法、访问器、属性）的行为**，但不能用于普通函数、变量或模块顶层声明。
装饰器可以修饰哪些声明
装饰器语法 @decorator 只能用在以下位置：
-
类声明：修饰整个类，常用于注册、元数据注入或类改造（如 React 的
@observer） - 类中方法（含 getter/setter）：最常见用途，例如日志、防抖、权限校验、缓存
-
类中字段（public 或 private）：需启用
decorators-legacy或使用提案中的新字段装饰器语法（Babel 7.23+ 支持）
❌ 不支持修饰：
– 普通函数声明/表达式
– const/let/var 变量
– 模块导出语句
– if/for 等语句块
– 构造函数（constructor 本身不能加 @，但可装饰其参数——见下文）
装饰器的三种常见类型及写法
装饰器本质是函数，根据作用目标不同，接收参数数量和含义不同：
-
类装饰器：接收 1 个参数 —— 类的构造函数（
target）
@logClass<br>class User { ... } -
方法/访问器装饰器：接收 3 个参数 ——
target（原型或构造函数）、propertyKey（方法名）、descriptor（属性描述符，可改写value或set/get）
@debounce(300)<br>handleClick() { ... } -
参数装饰器（实验性）：接收 3 个参数 ——
target、propertyKey、parameterIndex；仅用于收集元数据（如依赖注入），不能修改参数本身
实际应用示例：防抖方法装饰器
这是非常典型的场景，避免高频触发（如搜索输入、窗口 resize）：
立即学习“Java免费学习笔记（深入）”；
function debounce(wait) {
return function(target, propertyKey, descriptor) {
const originalMethod = descriptor.value;
let timeoutId;
descriptor.value = function(...args) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => originalMethod.apply(this, args), wait);
};
};
}
class SearchBox {
@debounce(400)
onInput(value) {
console.log('发起搜索:', value);
}
}
调用 searchBox.onInput('js') 多次，只会最终执行一次（400ms 后）。
使用前提与配置建议
想在项目中使用装饰器，需明确环境支持：
-
TypeScript：在
tsconfig.json中启用"experimentalDecorators": true和"emitDecoratorMetadata": true（后者用于反射） -
Babel：安装
@babel/plugin-proposal-decorators，推荐配置{"version": "2023-11"}（匹配最新提案） - 注意兼容性：装饰器会改变原始代码结构，生产环境需确保打包工具正确处理；不建议在未编译的浏览器环境中直接运行带装饰器的 JS
