JavaScript中如何通过引用或直接操作修改函数名称？

核心疑问答复 #

function.name 并不是浏览器在HTML页面加载时统一创建的API属性，它是每个函数实例创建时自动生成的ECMAScript标准内置属性：

• 默认属性描述符为 writable: false、configurable: true，所以直接赋值修改不会生效，这就是你示例代码中改名失败的原因
• 普通自定义对象/数组的属性默认是可写的，所以直接赋值可以生效，这是两者表现不同的核心原因

修改函数name的两种实现方式 #

1. 引用修改（修改原函数name，所有指向该函数的引用都会同步生效） #

因为name属性是可配置的，我们可以通过Object.defineProperty修改：

let function_1 = function() { let a; return a = b + c; };
let function_2 = function_1;

Object.defineProperty(function_2, 'name', {
  value: 'newname'
});

console.log(function_2.name); // "newname"
console.log(function_1.name); // "newname" 两个引用指向同一个函数，修改会同步

2. 独立修改（仅新引用的name生效，不影响原函数） #

如果不需要和原函数共享name，需要创建新的函数实例再修改：

let function_1 = function() { let a; return a = b + c; };
// 封装生成新的函数实例，和原函数逻辑一致但相互独立
let function_2 = function(...args) {
  return function_1.apply(this, args);
};

Object.defineProperty(function_2, 'name', {
  value: 'newname'
});

console.log(function_1.name); // "function_1" 原函数name不受影响
console.log(function_2.name); // "newname" 新函数name修改生效

补充验证 #

你可以通过以下代码查看函数name的属性描述符，确认其可写状态：

let function_1 = function() {};
console.log(Object.getOwnPropertyDescriptor(function_1, 'name'));
// 输出：{value: 'function_1', writable: false, enumerable: false, configurable: true}

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