Angular中如何修改console.log，添加参数处理且避免递归？

这个问题我之前也踩过坑！核心原因就是你在自定义函数里调用的console.log已经被替换成了重写后的版本，所以会无限触发自己，导致栈溢出。通过提前保存原始的console.log引用，再配合bind/apply来维持上下文，就能完美解决。

正确实现步骤 #

1. 先保存原始的console.log：一定要在重写console.log之前完成这一步，确保变量指向的是浏览器/Node原生的日志函数，而不是你自定义的版本。
2. 重写console.log：在自定义函数里对参数做处理，然后调用保存好的原始函数，用apply/call维持正确的上下文（console.log的this应该指向console对象）。

完整代码示例 #

// 保存原始的console.log，用bind确保上下文始终指向console
const originalConsoleLog = console.log.bind(console);

// 重写console.log
console.log = function(...args) {
  // 自定义参数处理逻辑：给所有字符串前缀加上"user1: "
  const processedArgs = args.map(item => {
    if (typeof item === 'string') {
      return `user1: ${item}`;
    }
    // 非字符串类型保持原样（比如数字、对象、数组等）
    return item;
  });

  // 调用原始的console.log，用apply传递处理后的参数并维持上下文
  originalConsoleLog.apply(console, processedArgs);
};

// 测试调用
console.log("hello"); // 输出：user1: hello
console.log("test message", 123, { name: "Alice" }); // 输出：user1: test message 123 { name: 'Alice' }

为什么这样不会递归？ #

因为originalConsoleLog是我们在重写前保存的原生console.log引用，和后续重写的console.log是完全独立的两个函数。自定义函数里调用的是原生版本，不会触发我们的重写逻辑，自然也就不会无限递归了。

关于bind的作用 #

用console.log.bind(console)保存原始函数，是为了确保原生函数的this始终指向console对象。虽然有些环境下直接赋值const originalConsoleLog = console.log也能工作，但在严格模式或者某些特殊环境中，this可能会丢失变成undefined，导致日志无法正常输出。用bind可以避免这种潜在问题。

内容的提问来源于stack exchange，提问作者user14548717