javascript中的装饰器如何应用_可以修饰哪些声明-js教程-PHP中文网

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

狼影

发布： 2025-12-23 21:58:02

原创

116人浏览过

JavaScript装饰器是Stage 3提案，支持修饰类、类方法、访问器及字段，不支持普通函数等；分为类装饰器（1参数）、方法装饰器（3参数）、参数装饰器（3参数），需TS或Babel配置启用。

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

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

Studio Global

Studio Global AI 是一个内容生成工具，帮助用户客制化生成风格和内容，以合理价格提供无限生成，希望将 AI 带给全世界所有人。

405

查看详情

立即学习“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