当前位置：首页 > JavaScript

js 实现aop

2026-01-31 16:38:04JavaScript

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

AOP 是一种编程范式，通过将横切关注点（如日志、性能监控、事务管理等）与核心业务逻辑分离，提高代码的模块化和可维护性。以下是几种在 JavaScript 中实现 AOP 的方法：

使用高阶函数

通过高阶函数包装目标函数，可以在函数执行前后注入逻辑。

js 实现aop

function wrapFunction(targetFn, beforeFn, afterFn) {
  return function(...args) {
    if (beforeFn) beforeFn.apply(this, args);
    const result = targetFn.apply(this, args);
    if (afterFn) afterFn.apply(this, args);
    return result;
  };
}

const originalFn = () => console.log('核心逻辑');
const wrappedFn = wrapFunction(
  originalFn,
  () => console.log('前置逻辑'),
  () => console.log('后置逻辑')
);

wrappedFn();

使用原型链扩展

通过修改对象的原型链，可以在方法调用前后注入逻辑。

Function.prototype.before = function(beforeFn) {
  const self = this;
  return function(...args) {
    beforeFn.apply(this, args);
    return self.apply(this, args);
  };
};

Function.prototype.after = function(afterFn) {
  const self = this;
  return function(...args) {
    const result = self.apply(this, args);
    afterFn.apply(this, args);
    return result;
  };
};

const fn = () => console.log('核心逻辑');
const wrappedFn = fn
  .before(() => console.log('前置逻辑'))
  .after(() => console.log('后置逻辑'));

wrappedFn();

使用 ES6 的 Proxy

Proxy 可以拦截对象的操作，非常适合实现 AOP。

js 实现aop

const createAopProxy = (target, before, after) => {
  return new Proxy(target, {
    apply(target, thisArg, args) {
      if (before) before.apply(thisArg, args);
      const result = target.apply(thisArg, args);
      if (after) after.apply(thisArg, args);
      return result;
    }
  });
};

const originalFn = () => console.log('核心逻辑');
const proxiedFn = createAopProxy(
  originalFn,
  () => console.log('前置逻辑'),
  () => console.log('后置逻辑')
);

proxiedFn();

使用装饰器（Decorator）

ES7 的装饰器语法可以更方便地实现 AOP。

function log(target, name, descriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function(...args) {
    console.log(`调用方法 ${name}，参数：${args}`);
    const result = originalMethod.apply(this, args);
    console.log(`方法 ${name} 返回值：${result}`);
    return result;
  };
  return descriptor;
}

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

const example = new Example();
example.add(1, 2);

使用 AOP 库

一些库（如 aspect.js）提供了更完善的 AOP 支持。

import { aspect, after, before } from 'aspect.js';

class Example {
  @before(() => console.log('前置逻辑'))
  @after(() => console.log('后置逻辑'))
  method() {
    console.log('核心逻辑');
  }
}

const example = new Example();
example.method();