js实现函数监听

函数监听的基本概念

函数监听通常指在特定函数执行前后插入自定义逻辑，常用于调试、性能分析或扩展功能。JavaScript中可以通过多种方式实现函数监听。

使用装饰器模式

装饰器模式允许在不修改原函数代码的情况下扩展功能。ES6引入的装饰器语法糖可以简化这一过程。

function logDecorator(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 Example {
  @logDecorator
  sum(a, b) {
    return a + b;
  }
}

使用Proxy对象

Proxy可以拦截目标对象的操作，包括函数调用。

const handler = {
  apply: function(target, thisArg, argumentsList) {
    console.log(`Function called with args: ${argumentsList}`);
    return target.apply(thisArg, argumentsList);
  }
};

const originalFunction = function(a, b) { return a + b; };
const proxiedFunction = new Proxy(originalFunction, handler);

直接包装函数

对于简单场景，可以直接包装原函数实现监听。

function listen(fn, callback) {
  return function(...args) {
    callback('before', args);
    const result = fn.apply(this, args);
    callback('after', result);
    return result;
  };
}

const monitoredFn = listen(
  (a, b) => a + b,
  (event, data) => console.log(event, data)
);

事件发射器模式

通过事件发射器实现更复杂的监听机制。

const EventEmitter = require('events');

class ObservableFunction extends EventEmitter {
  constructor(fn) {
    super();
    this.fn = fn;
  }

  execute(...args) {
    this.emit('beforeExecute', args);
    const result = this.fn(...args);
    this.emit('afterExecute', result);
    return result;
  }
}

const observable = new ObservableFunction((a, b) => a + b);
observable.on('beforeExecute', args => console.log('Before:', args));
observable.on('afterExecute', result => console.log('After:', result));

浏览器环境下的全局函数监听

在浏览器中可能需要监听全局函数调用。

const originalAlert = window.alert;
window.alert = function(message) {
  console.log('Alert called with:', message);
  return originalAlert.call(window, message);
};

每种方法适用于不同场景，装饰器适合类方法，Proxy提供更细粒度控制，直接包装简单易用，事件发射器适合复杂交互，全局替换适用于浏览器环境。选择时需考虑兼容性需求和功能复杂度。