具名函数在调试堆栈中显示清晰函数名，匿名函数则显示为anonymous、<anonymous>或空括号，导致调试困难；可通过function.name属性验证，推荐事件监听器、递归逻辑等均使用具名函数表达式提升可读性。
在调试堆栈中，匿名函数和具名函数最直观的区别就是函数名的显示方式：具名函数会清晰显示函数名，而匿名函数通常显示为 anonymous、<anonymous> 或空括号 ()，甚至在某些环境中直接显示为 fn 或 function —— 没有业务含义。
堆栈中具名函数的典型表现
当你使用具名函数（包括函数声明、具名函数表达式）时，调用栈会如实反映其内部名称：
-
函数声明：如
function fetchData() { ... }，堆栈中显示为fetchData -
具名函数表达式：如
const handler = function onSubmit(e) { ... }，堆栈中显示为onSubmit（注意：不是handler），因为该名称仅在函数体内有效且专用于自身引用和调试 - 浏览器开发者工具（如 Chrome DevTools）的“Call Stack”面板、错误日志、Performance 面板都会优先使用这个内部名称
堆栈中匿名函数的典型表现
匿名函数缺乏可识别标识，导致调试线索断裂：
- 函数表达式未命名：
const onClick = function() { ... }→ 堆栈中显示为anonymous或<anonymous> - 箭头函数：
element.addEventListener('click', () => {...})→ 堆栈中同样显示为anonymous，且无法通过任何方式注入可读名 - 立即执行函数（IIFE）若未命名：
(function() { ... })()→ 显示为<anonymous>，难以区分是哪个模块或哪次初始化触发的 - 多个匿名回调嵌套时，堆栈可能连续出现数个
anonymous，无法判断层级归属
如何快速验证当前函数是否具名
运行时可通过 function.name 属性检查（注意：箭头函数的 name 是只读且不可设的）：
-
function hello(){}.name === 'hello'→ true -
(function world(){}).name === 'world'→ true（具名函数表达式） -
(function(){}).name === ''→ true（纯匿名） -
(() => {}).name === 'undefined'或空字符串（取决于引擎，但始终不可靠）
提升堆栈可读性的实用做法
不依赖“要不要命名”的权衡，而是把命名当作调试刚需来落实：
- 事件监听器尽量用具名函数表达式：
btn.addEventListener('click', function handleClick() { ... }) - 递归或深度遍历逻辑必须用具名函数表达式，避免因变量重赋值导致崩溃
- 即使只用一次的回调，也建议命名：
array.map(function transformItem(item) { return item.id })，比箭头函数更利于排查 - 构建工具（如 Webpack、Vite）开启
devtool: 'source-map'并配合function.name可显著改善生产环境堆栈可读性
