当前位置：首页 > JavaScript

aop实现js

2026-02-01 11:01:07JavaScript

AOP 实现 JavaScript 的方法

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

使用高阶函数

高阶函数是接受函数作为参数或返回函数的函数，可以用于在函数执行前后注入逻辑。

aop实现js

function wrapFunction(originalFunction, before, after) {
    return function(...args) {
        if (before) before.apply(this, args);
        const result = originalFunction.apply(this, args);
        if (after) after.apply(this, args);
        return result;
    };
}

const originalFunction = (a, b) => a + b;
const wrappedFunction = wrapFunction(
    originalFunction,
    () => console.log('Before execution'),
    () => console.log('After execution')
);

wrappedFunction(2, 3); // Logs before and after execution

使用装饰器（ES7+）

装饰器是一种语法糖，用于修改类或方法的行为。需要 Babel 或 TypeScript 支持。

aop实现js

function log(target, name, descriptor) {
    const originalMethod = descriptor.value;
    descriptor.value = function(...args) {
        console.log(`Calling ${name} with args:`, args);
        const result = originalMethod.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); // Logs before and after execution

使用 Proxy

Proxy 可以拦截对象的操作，适合对对象方法进行 AOP 处理。

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

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

const proxy = new Proxy(obj, handler);
proxy.add(2, 3); // Logs before and after execution

使用第三方库

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

// 使用 meld
const meld = require('meld');

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

meld.before(obj, 'add', () => console.log('Before add'));
meld.after(obj, 'add', () => console.log('After add'));

obj.add(2, 3); // Logs before and after execution