什么是javascript装饰器_如何用它增强函数功能_网络技术

什么是javascript装饰器_如何用它增强函数功能

发布时间 - 2026-01-02 00:00:00 点击率：次

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 装饰器示例

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

立即学习“Java免费学习笔记（深入）”；

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 # java # typescript # 浏览器 # app # 工具

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：将嵌套对象数组转换为结构化键值对数组的完整教程

下一篇：如何用JavaScript实现数据加密_Web Crypto

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：将嵌套对象数组转换为结构化键值对数组的完整教程

下一篇：如何用JavaScript实现数据加密_Web Crypto