当前位置：首页 > JavaScript

js实现aop

2026-02-01 12:07:58JavaScript

js实现aop

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

AOP是一种编程范式，允许在不修改原有代码的情况下，通过"切面"动态添加功能。以下是几种常见的实现方式：

使用函数装饰器模式

function before(fn, beforeFn) {
  return function() {
    beforeFn.apply(this, arguments);
    return fn.apply(this, arguments);
  };
}

function after(fn, afterFn) {
  return function() {
    const result = fn.apply(this, arguments);
    afterFn.apply(this, arguments);
    return result;
  };
}

// 使用示例
const originalFn = () => console.log('原始函数');
const loggedFn = before(originalFn, () => console.log('调用前'));
loggedFn(); // 先输出"调用前"，再输出"原始函数"

通过原型链扩展

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

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

// 使用示例
const test = () => console.log('test');
test.before(() => console.log('before'))();

使用ES6 Proxy实现

function createAopProxy(target, advice) {
  return new Proxy(target, {
    apply: function(target, thisArg, argumentsList) {
      advice.before && advice.before.apply(thisArg, argumentsList);
      const result = Reflect.apply(target, thisArg, argumentsList);
      advice.after && advice.after.call(thisArg, result);
      return result;
    }
  });
}

// 使用示例
const fn = (a, b) => a + b;
const proxiedFn = createAopProxy(fn, {
  before: function() { console.log('参数:', ...arguments); },
  after: function(result) { console.log('结果:', result); }
});
proxiedFn(2, 3); // 输出参数和结果

使用高阶组件（React场景）

function withLogging(WrappedComponent) {
  return class extends React.Component {
    componentDidMount() {
      console.log('组件已挂载');
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}

// 使用示例
const MyComponent = () => <div>Hello</div>;
const EnhancedComponent = withLogging(MyComponent);