JavaScript的反射元编程如何实现AOP切面？

答案是JavaScript通过Proxy和Reflect可实现AOP，利用Proxy拦截目标对象的方法调用，在方法执行前后或异常时注入日志、监控等横切逻辑，结合Reflect确保原方法正确执行，实现代码解耦。

JavaScript的反射元编程可以通过 Proxy 和 Reflect 实现AOP（面向切面编程）的切面功能。核心思路是利用 Proxy 拦截目标对象的方法调用，在方法执行前、后或抛出异常时插入横切逻辑，比如日志、性能监控、权限校验等。

1. 使用 Proxy 拦截方法调用

Proxy 可以包装一个对象，拦截其属性和方法的访问。通过拦截 get 操作，我们可以判断获取的是否是函数，然后动态包裹该函数，实现切面增强。

    function createAOPProxy(target) {
      return new Proxy(target, {
        get: function (obj, prop) {
          const value = obj[prop];
          // 判断是否为函数
          if (typeof value === 'function') {
            return function (...args) {
              console.log(`【前置通知】调用方法: ${prop}, 参数:`, args);
              let result;
              try {
                // 执行原方法
                result = Reflect.apply(value, obj, args);
                console.log(`【后置通知】方法 ${prop} 执行成功`);
                return result;
              } catch (e) {
                console.error(`【异常通知】方法 ${prop} 抛出异常:`, e.message);
                throw e;
              } finally {
                console.log(`【最终通知】方法 ${prop} 执行结束`);
              }
            };
          }
          return value;
        }
      });
    }
  

2. 应用切面到目标对象

将需要增强的对象传入 AOP 工厂函数，返回一个被代理的对象，所有方法调用都会自动触发切面逻辑。

BiLin AI

免费的多语言AI搜索引擎

下载

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

    // 原始对象
    const userService = {
      getUser(id) {
        if (id <= 0) throw new Error("ID无效");
        return { id, name: "张三" };
      },
      saveUser(user) {
        console.log("保存用户:", user);
      }
    };

    // 创建带切面的代理对象
    const proxiedUserService = createAOPProxy(userService);

    // 调用方法，自动触发切面
    proxiedUserService.getUser(1);
    // 输出：
    // 【前置通知】调用方法: getUser, 参数: [1]
    // 【后置通知】方法 getUser 执行成功
    // 【最终通知】方法 getUser 执行结束

    proxiedUserService.saveUser({ name: "李四" });
  

3. 支持更灵活的切面规则

可以扩展 AOP 函数，支持按方法名匹配、只对特定方法织入切面，或传入不同的通知（advice）函数。

    function createFlexibleAOP(target, adviceConfig) {
      return new Proxy(target, {
        get(obj, prop) {
          const value = obj[prop];
          if (typeof value === 'function' && adviceConfig[prop]) {
            const { before, after, afterThrowing } = adviceConfig[prop];
            return function (...args) {
              before && before(args);
              try {
                const result = Reflect.apply(value, obj, args);
                after && after(result);
                return result;
              } catch (e) {
                afterThrowing && afterThrowing(e);
                throw e;
              }
            };
          }
          return value;
        }
      });
    }

    // 使用配置化切面
    const advisedUserService = createFlexibleAOP(userService, {
      getUser: {
        before: (args) => console.log("[getUser] 参数校验:", args),
        after: (result) => console.log("[getUser] 缓存结果:", result),
        afterThrowing: (e) => console.warn("[getUser] 记录失败日志")
      }
    });