javascript中的装饰器如何应用_可以修饰哪些声明

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）：

标签： react javascript java js json typescript 浏览器 app 工具 ai