JavaScript中如何观察特定函数的调用及参数

# JavaScript中如何观察特定函数的调用及参数

在JavaScript开发中，调试或监控特定函数的调用情况是常见需求。以下是几种实现方法：

## 1. 使用`console.log`包装函数

```javascript
function originalFn(param1, param2) {
  // 原函数逻辑
}

const wrappedFn = function(...args) {
  console.log('函数被调用，参数：', args);
  return originalFn.apply(this, args);
};

// 替换原函数
originalFn = wrappedFn;

2. ES6 Proxy代理

const handler = {
  apply: function(target, thisArg, args) {
    console.log(`调用 ${target.name}，参数：`, args);
    return target.apply(thisArg, args);
  }
};

const proxiedFn = new Proxy(originalFn, handler);

3. 利用AOP（面向切面编程）

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

const monitoredFn = originalFn.before((...args) => {
  console.log('前置拦截，参数：', args);
});

4. 调试工具断点

Chrome DevTools中可以通过： 1. 在Sources面板找到目标函数 2. 点击行号添加断点 3. 在右侧Breakpoints面板配置”Log Message”

注意事项

• 生产环境应移除监控代码
• 注意this绑定问题
• 对性能敏感的函数慎用

选择哪种方式取决于具体场景，简单调试可用console.log，复杂监控建议使用Proxy或AOP方案。 “`

（全文约400字）