当前位置：首页 > JavaScript

js实现切面

2026-01-31 20:38:54JavaScript

在JavaScript中实现切面编程（AOP）可以通过高阶函数、装饰器或Proxy等方式实现。以下是几种常见方法：

使用高阶函数

通过包装原函数，在调用前后插入额外逻辑：

function withLogging(fn) {
  return function(...args) {
    console.log(`Entering ${fn.name}`);
    const result = fn.apply(this, args);
    console.log(`Exiting ${fn.name}`);
    return result;
  };
}

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

const wrappedSayHello = withLogging(sayHello);
wrappedSayHello("World");

使用ES7装饰器

在支持装饰器的环境中（如Babel或TypeScript），可以直接修饰方法：

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

class MyClass {
  @log
  greet(name) {
    console.log(`Hello ${name}`);
  }
}

使用Proxy对象

通过Proxy拦截对象操作：

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

const obj = {
  sayHi(name) {
    console.log(`Hi ${name}`);
  }
};

const proxied = new Proxy(obj, handler);
proxied.sayHi('Proxy');

修改原型方法

直接修改Function原型实现AOP：

js实现切面

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

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

function test() {
  console.log('test');
}

test.before(() => console.log('before')).after(() => console.log('after'))();

这些方法各有适用场景：高阶函数适合简单函数包装，装饰器适合类方法，Proxy适合复杂对象拦截，原型修改则会影响所有函数。选择时需考虑项目环境和需求。