当前位置：首页 > JavaScript

js实现aop

2026-03-14 10:53:29JavaScript

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

AOP 是一种编程范式，允许开发者将横切关注点（如日志记录、性能监控、事务管理等）从业务逻辑中分离出来。JavaScript 可以通过以下几种方式实现 AOP。

使用高阶函数

高阶函数可以包装目标函数，在目标函数执行前后插入额外的逻辑。

js实现aop

function logBeforeAfter(targetFunction) {
    return function(...args) {
        console.log('Before executing:', targetFunction.name);
        const result = targetFunction.apply(this, args);
        console.log('After executing:', targetFunction.name);
        return result;
    };
}

function sayHello(name) {
    console.log(`Hello, ${name}!`);
}

const wrappedSayHello = logBeforeAfter(sayHello);
wrappedSayHello('World');

使用原型链扩展

通过修改 Function 的原型链，可以为所有函数添加 AOP 功能。

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

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

function sayHello(name) {
    console.log(`Hello, ${name}!`);
}

const wrappedSayHello = sayHello
    .before(() => console.log('Before sayHello'))
    .after(() => console.log('After sayHello'));

wrappedSayHello('World');

使用 ES6 的 Proxy

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

js实现aop

const handler = {
    apply: function(target, thisArg, args) {
        console.log('Before calling:', target.name);
        const result = target.apply(thisArg, args);
        console.log('After calling:', target.name);
        return result;
    }
};

function sayHello(name) {
    console.log(`Hello, ${name}!`);
}

const proxiedSayHello = new Proxy(sayHello, handler);
proxiedSayHello('World');

使用装饰器（Decorator）

在支持装饰器的环境中（如 TypeScript 或 Babel），可以通过装饰器实现 AOP。

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 Greeter {
    @log
    sayHello(name) {
        return `Hello, ${name}!`;
    }
}

const greeter = new Greeter();
greeter.sayHello('World');

使用第三方库

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

// 使用 aspect.js 示例
const { aspect, after } = require('aspect.js');

class Greeter {
    sayHello(name) {
        return `Hello, ${name}!`;
    }
}

aspect(Greeter).after('sayHello', (result, name) => {
    console.log('After sayHello:', result, name);
});

const greeter = new Greeter();
greeter.sayHello('World');