JavaScript装饰器是什么？如何使用装饰器增强函数功能

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战，手把手教大家学习《JavaScript装饰器是什么？如何增强函数功能》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

JavaScript装饰器是用于修改或增强函数、类等行为的语法糖，非原生标准但被TS和Babel广泛支持；以@开头，本质是接收target、propertyKey、descriptor的高阶函数，可拦截并增强方法逻辑。

JavaScript 装饰器（Decorator）是一种用于**修改或增强函数、类、类方法、访问器等行为的语法糖**，它本身不是原生 JavaScript 标准（截至 ECMAScript 2024，仍处于 Stage 3 提案阶段），但已被 TypeScript 和主流构建工具（如 Babel）广泛支持。它的核心思想是：**用一个函数去“包装”另一个函数或类成员，从而在不修改原始代码的前提下，注入额外逻辑（如日志、权限校验、缓存、重试等）**。

装饰器的基本写法与运行时机

装饰器以 @ 符号开头，写在被修饰项的上一行。它本质是一个高阶函数，接收目标对象、属性名、属性描述符等参数，并可返回新的描述符来改变行为。

• 函数装饰器（如修饰类方法）在类定义时执行，而非调用时
• 装饰器函数的参数顺序通常是：(target, propertyKey, descriptor)
• descriptor.value 是原始方法函数，替换它就能拦截调用
• TypeScript 中需启用 experimentalDecorators 编译选项

用装饰器实现函数增强的常见场景

装饰器最实用的地方，是把横切关注点（cross-cutting concerns）从业务逻辑中抽离出来。例如：

• 日志记录：自动打印方法名、入参、耗时
• 防抖/节流：给事件处理函数加延迟或频率限制
• 权限控制：调用前检查用户角色，无权限则直接返回
• 缓存结果：对纯函数结果做内存缓存（类似 memoize）
• 错误统一捕获：包裹 try/catch，避免每个方法重复写异常处理

手写一个实用的 @log 装饰器示例

下面是一个简单但完整的函数装饰器，用于记录方法执行时间：

function log(target, propertyKey, descriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function(...args) {
    console.time(`[LOG] ${propertyKey}`);
    const result = originalMethod.apply(this, args);
    console.timeEnd(`[LOG] ${propertyKey}`);
    return result;
  };
  return descriptor;
}

class Calculator {
  @log
  add(a, b) {
    return a + b;
  }
}

const calc = new Calculator();
calc.add(2, 3); // 控制台输出：[LOG] add: 0.123ms

注意事项与使用前提

装饰器虽简洁有力，但要注意实际落地条件：

• 浏览器原生不支持装饰器语法，必须通过 Babel（@babel/plugin-proposal-decorators）或 TypeScript 编译
• 装饰器不能用于普通函数声明（如 function foo() {}），只适用于类、类成员、访问器、参数（实验性）
• 多个装饰器会从下到上（近到远）依次执行，类似组合函数：@A @B @C 等价于 A(B(C(...)))
• 若需传参（如 @log('debug')），要写成装饰器工厂：返回装饰器函数的函数

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScript装饰器是什么？如何使用装饰器增强函数功能》文章吧，也可关注golang学习网公众号了解相关技术文章。