在前端开发中，我们经常需要对函数名称进行修改或者添加一些额外的信息。而在 JavaScript 中，我们可以通过 Symbol 和 Object.defineProperty 来设置函数的名称。不过这些方法还是比较繁琐，如果不熟练可能会容易出错。为了方便，我们可以使用 npm 包 set-function-name 实现快捷设置函数名称的功能。
安装 set-function-name
使用 npm 命令安装 set-function-name：
npm install set-function-name -S
使用 set-function-name
使用 set-function-name，只需要通过一个函数调用即可设置函数名称：
-- -------------------- ---- ------- ----- --------------- - ---------------------------- -------- ------ -- - ------ - - - - -------------------- ------ --------------------- -- ---展开代码
在上面的例子中，我们通过调用 setFunctionName 函数将 add 函数的名称设置为 sum，然后使用 console.log 打印出来，可以看到 add 函数的名称已经被设置成了 sum。
除了设置函数名称外，set-function-name 还支持设置属性 descriptor：
-- -------------------- ---- ------- ----- --------------- - ---------------------------- -------- ------ -- - ------ - - - - -------------------- ------ - --------- ----- -- ------------------------------------------------ -------- -- - ------ ------ --------- ------ ----------- ------ ------------- ---- -展开代码
在上面的例子中，我们通过调用 setFunctionName 函数将 add 函数的名称设置为 sum，并且将其 writable 属性设置为 false。然后使用 Object.getOwnPropertyDescriptor 获取 add 函数 name 属性的描述符，可以看到 writable 已经被设置为了 false。
set-function-name 源码分析
set-function-name 的实现还是比较简单的。它的源码如下：
function setFunctionName(fn, name, descriptor) { Object.defineProperty(fn, 'name', { value: name, ...(descriptor || {}) }) }
它的实现原理就是通过 Object.defineProperty 函数设置函数的名称和 descriptor。
总结
set-function-name 是一个非常方便的 npm 包，它可以帮助我们快速地设置函数名称和 descriptor。在实际开发中，它可以帮助我们提高开发效率，避免代码出错。如果你有类似需求，那么不妨试一试 set-function-name，它会给你带来意想不到的便利。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560a181e8991b448dee07
