什么是javascript装饰器_如何用它增强函数功能
JavaScript装饰器是用于修改或增强函数、类等行为的语法糖，非原生标准但被TS和Babel广泛支持；以@开头，本质是接收target、propertyKey、descriptor的高阶函数，可拦截并增强方法逻辑。
JavaScript 装饰器（Decorator）是一种用于**修改或增强函数、类、类方法、访问器等行为的语法糖**，它本身不是原生 JavaScript 标准（截至 ECMAScript 2025，仍处于 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.va
lue = 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
lue = 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')），要写成装饰器工厂：返回装饰器函数的函数
