JavaScript AOP 实现

JavaScript 里常见的 AOP 落地方式，通常通过函数包装、拦截器、装饰器或代理来实现。

#concept #growing #frontend

JavaScript AOP 实现

JavaScript 里的 AOP 通常不是语言原生能力，而是通过函数包装、拦截器、装饰器或 Proxy 来实现。

[!info] related notes

相关笔记: Axios 拦截器, 全局进度条

常见方式

函数包装：在调用前后附加行为。
拦截器：在请求或响应管线中插入处理。
Proxy：通过 apply 等 trap 包装函数调用。

例如给同步普通函数添加计时，保留接收者、参数、返回值和异常传播：

function withTiming(fn, report) {
  return function (...args) {
    const start = performance.now();
    try {
      return Reflect.apply(fn, this, args);
    } finally {
      report(performance.now() - start);
    }
  };
}

report 应不抛异常，否则会覆盖原函数结果或错误。此例不是构造器包装；若 fn 返回 Promise，计时只到 Promise 返回，不是异步任务完成。异步切面需另行定义 await、拒绝传播和返回契约，不能假定同步包装通用。

AOP 组织日志、计时等横切关注点，不替代业务规则，也不自动形成不可绕过的权限边界。Axios 拦截器是请求管线中的具体应用；全局进度条可在对应开始/结束节点接入。