JavaScript装饰器使用详解及适用声明

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《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
class User { ... }
• 方法/访问器装饰器：接收 3 个参数 —— target（原型或构造函数）、propertyKey（方法名）、descriptor（属性描述符，可改写 value 或 set/get）
  @debounce(300)
handleClick() { ... }
• 参数装饰器（实验性）：接收 3 个参数 —— target、propertyKey、parameterIndex；仅用于收集元数据（如依赖注入），不能修改参数本身

实际应用示例：防抖方法装饰器

这是非常典型的场景，避免高频触发（如搜索输入、窗口 resize）：

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

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。