JavaScript中给函数name属性赋值后打印仍为原函数名是什么原因

问题原因 #

函数的name是ES6之后加入ECMAScript规范的内置原生属性，对于函数声明创建的函数，该属性默认是不可写入的，直接赋值操作会被静默忽略，如果你开启严格模式运行代码，还会直接抛出类型错误提示你无法修改只读属性。

你可以通过Object.getOwnPropertyDescriptor方法查看该属性的配置项：

function a(){}
console.log(Object.getOwnPropertyDescriptor(a, 'name'))

返回的属性描述符如下：

{
  value: "a",
  writable: false,
  enumerable: false,
  configurable: true
}

其中writable: false就代表该属性的值不能直接通过赋值语句修改，所以你执行a.name = 'foo'没有生效，打印仍然得到原来的函数名a。

修改方法 #

因为该属性的configurable为true，你可以通过Object.defineProperty方法直接修改属性值：

function a(){}
Object.defineProperty(a, 'name', {
  value: 'foo'
})
console.log(a.name) // 输出 foo

如果你需要后续多次修改name属性，也可以在配置里把writable设为true，之后就可以直接赋值修改了。

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