JavaScript装饰器是什么？怎么用它增强函数功能

编程并不是一个机械性的工作，而是需要有思考，有创新的工作，语法是固定的，但解决问题的思路则是依靠人的思维，这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《JavaScript装饰器是什么？如何用它增强函数功能》，文章讲解的知识点主要包括，如果你对文章方面的知识点感兴趣，就不要错过golang学习网，在这可以对大家的知识积累有所帮助，助力开发能力的提升。

装饰器是JavaScript中用于增强函数、类及成员行为的语法糖，本质为接收目标对象等参数并返回新描述符的高阶函数；需通过TypeScript或Babel等工具链启用，支持日志、防抖、权限校验等场景，多个装饰器按从下到上、从右到左顺序执行。

装饰器（Decorator）是 JavaScript 中一种用于修改或增强函数、类及其成员（如方法、属性）行为的语法特性，目前处于 TC39 第四阶段提案（已进入 ECMAScript 标准草案），在 TypeScript 和支持实验性语法的现代 JavaScript 环境（如 Babel、ESBuild、Vite）中可直接使用。

装饰器本质：高阶函数的语法糖

装饰器本质上是一个接收目标对象、属性名、描述符等参数，并返回新描述符（或修改原描述符）的函数。它不是运行时魔法，而是编译期（或转译期）介入对象定义过程的机制。

• 函数装饰器作用于函数声明或导出表达式，常用于包装执行逻辑（如日志、防抖、权限校验）
• 类装饰器作用于整个类构造器，可用于注册、元数据注入、子类自动增强等
• 方法/访问器/属性装饰器作用于类内部成员，可劫持调用、拦截赋值、添加元数据

启用装饰器需配置环境

原生 JavaScript 浏览器暂不支持装饰器语法（截至 2024 年底），需借助工具链：

• TypeScript：在 tsconfig.json 中开启 "experimentalDecorators": true 和 "emitDecoratorMetadata": true
• Babel：安装 @babel/plugin-proposal-decorators，插件配置启用 legacy: false（符合标准提案）
• Vite / Next.js / Remix：通常默认支持，检查文档确认装饰器模式（legacy 或 2023-11）

常见实用装饰器写法

以方法装饰器为例，实现一个简单的日志记录装饰器：

function log(target, propertyKey, descriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function(...args) {
    console.log(`[LOG] 调用 ${String(propertyKey)}，参数：`, args);
    const result = originalMethod.apply(this, args);
    console.log(`[LOG] ${String(propertyKey)} 返回：`, result);
    return result;
  };
}

使用方式：

class Calculator {
  @log
  add(a, b) {
    return a + b;
  }
}
<p>const calc = new Calculator();
calc.add(2, 3); // 控制台输出调用与返回信息</p>

其他高频场景：

• @debounce(300)：防抖方法调用
• @readonly：冻结方法不可重写（设置 descriptor.writable = false）
• @auth('admin')：运行前校验用户角色
• @memoize：自动缓存函数结果（基于参数序列化）

装饰器组合与顺序

多个装饰器可叠加使用，执行顺序为**从下到上、从右到左**（类似函数组合）：

class User {
  @log
  @debounce(200)
  @throttle(1000)
  save() { /* ... */ }
}

等价于：log(debounce(throttle(save)))。注意：装饰器本身不改变原始方法，而是通过修改描述符间接影响行为，因此顺序直接影响增强逻辑的包裹层次。

好了，本文到此结束，带大家了解了《JavaScript装饰器是什么？怎么用它增强函数功能》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！