当前位置：首页 > JavaScript

aop实现js

2026-04-06 03:44:49JavaScript

AOP（面向切面编程）在 JavaScript 中的实现

AOP 是一种编程范式，用于将横切关注点（如日志、性能监控、事务管理）与核心业务逻辑分离。在 JavaScript 中，可以通过以下几种方式实现 AOP：

使用高阶函数

高阶函数可以接收函数作为参数并返回新函数，从而在目标函数执行前后插入额外逻辑。

aop实现js

function withLogging(fn) {
  return function(...args) {
    console.log(`Calling function ${fn.name} with args:`, args);
    const result = fn.apply(this, args);
    console.log(`Function ${fn.name} returned:`, result);
    return result;
  };
}

function add(a, b) {
  return a + b;
}

const loggedAdd = withLogging(add);
loggedAdd(2, 3); // 输出调用和返回日志

使用 ES6 Proxy

Proxy 可以拦截对象的各种操作，适合在方法调用前后插入逻辑。

aop实现js

const handler = {
  get(target, prop, receiver) {
    const originalMethod = target[prop];
    if (typeof originalMethod === 'function') {
      return function(...args) {
        console.log(`Before ${prop}`, args);
        const result = originalMethod.apply(this, args);
        console.log(`After ${prop}`, result);
        return result;
      };
    }
    return originalMethod;
  }
};

const obj = {
  add(a, b) {
    return a + b;
  }
};

const proxy = new Proxy(obj, handler);
proxy.add(1, 2); // 输出调用前后的日志

使用装饰器（Decorators）

装饰器是 ES7 提案中的语法，可以方便地实现 AOP。

function log(target, name, descriptor) {
  const original = descriptor.value;
  descriptor.value = function(...args) {
    console.log(`Calling ${name} with`, args);
    const result = original.apply(this, args);
    console.log(`Called ${name}, result:`, result);
    return result;
  };
  return descriptor;
}

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

const calc = new Calculator();
calc.add(2, 3); // 输出调用和返回日志

使用 AOP 库

现有的 JavaScript AOP 库可以简化实现，例如 aspect.js 或 aop.js。

// 使用 aspect.js 示例
import { advice } from 'aspect.js';

class LogAspect {
  @advice.beforeMethod({ classNamePattern: /.*/, methodNamePattern: /.*/ })
  beforeMethod(meta) {
    console.log(`Before ${meta.methodName}`, meta.methodArgs);
  }

  @advice.afterMethod({ classNamePattern: /.*/, methodNamePattern: /.*/ })
  afterMethod(meta) {
    console.log(`After ${meta.methodName}`, meta.methodResult);
  }
}

class MyClass {
  myMethod(x) {
    return x * 2;
  }
}

new MyClass().myMethod(5); // 输出调用前后的日志