如何修改JavaScript函数调用toString()时显示的函数名称

问题原因 #

Function.prototype.toString() 的返回值并非读取函数的 name 属性动态生成，而是取自函数定义时的源代码快照，所以单纯修改 name 属性不会改变 toString() 的输出结果。

实现方案 #

方案1：单独重写目标函数的toString方法 #

适合只需要处理单个函数的场景，不会影响全局其他函数的行为：

function foo() {}
// 修改name属性
Object.defineProperty(foo, 'name', {value: 'bar'})
// 重写当前实例的toString方法
foo.toString = function() {
  return `function ${this.name}() {}`
}

// 测试
console.log(foo.toString()) // 输出 "function bar() {}"

方案2：全局重写Function.prototype.toString #

适合需要批量适配所有函数的场景，注意要保留原始toString的逻辑避免破坏原有功能：

// 先缓存原始的toString方法
const originalFunctionToString = Function.prototype.toString;

Function.prototype.toString = function() {
  // 先获取原始输出结果
  const rawOutput = originalFunctionToString.call(this);
  // 把原始函数名替换为当前name属性的值
  return rawOutput.replace(/^function\s+[^(\s]+/, `function ${this.name}`);
}

// 测试
function foo() {}
Object.defineProperty(foo, 'name', {value: 'bar'})
console.log(foo.toString()) // 输出 "function bar() {}"

// 带参数和函数体的场景也可以正常适配
function add(a, b) {
  return a + b;
}
Object.defineProperty(add, 'name', {value: 'sum'})
console.log(add.toString()) 
// 输出 "function sum(a, b) { return a + b; }"

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