具名函数表达式在调用栈中显示真实函数名，提升错误定位效率；匿名函数、箭头函数及未命名IIFE均显示为anonymous或空括号，不利于调试；function.name可验证命名有效性，但箭头函数不可靠。
具名函数表达式在调用栈中显示真实函数名，匿名函数表达式则显示为 anonymous 或空括号，直接影响错误定位效率。
调用栈里一眼就能看出区别
浏览器开发者工具（如 Chrome DevTools）的 Call Stack 面板会如实反映函数的内部名称：
- 具名函数表达式：
const handler = function onSubmit(e) { ... }→ 堆栈中显示为 onSubmit - 匿名函数表达式：
const handler = function() { ... }→ 堆栈中显示为 anonymous - 箭头函数：
element.addEventListener('click', () => {})→ 同样显示为 anonymous，且无法注入可读名 - IIFE 未命名：
(function() {})()→ 堆栈中只显示 ()，无法区分来源模块
运行时验证函数是否具名
可通过 function.name 属性快速判断（注意箭头函数 name 不可靠）：
-
function hello() {}.name === 'hello'→ true（函数声明） -
(function world() {}).name === 'world'→ true（具名函数表达式） -
(function() {}).name === ''→ true（纯匿名） -
(() => {}).name→ 可能是空字符串或 undefined，不可依赖
为什么具名函数表达式更适合调试场景
它不只是“好看”，而是解决实际问题：
- 事件监听器：用
btn.addEventListener('click', function handleClick() {...})，出错时堆栈直接标出 handleClick - 递归逻辑：如树遍历，
function dfs(node) { dfs(node.left) }比const dfs = function(node) { dfs(node.left) }更稳定——后者一旦变量被重赋值就中断 - 对象方法定义：避免使用简洁方法
obj.method() {}（本质是匿名），改用method: function method() {}，确保函数体内可用 method 自我引用 - 单次回调也建议命名：
arr.map(function transformItem(item) { return item.id })，比箭头函数更易追溯数据流
常见误区与规避方式
别把“简洁”当成默认选项，尤其在关键路径上：
- 误以为
const fn = function() {}和function fn() {}在堆栈中表现一致 → 实际前者若不具名，仍显示 anonymous - 依赖变量名代替函数名 → 变量可被重新赋值、作用域可被闭包改变，而函数内部名 只在函数体内有效且不可变
- 用箭头函数替代所有回调 → 它没有
arguments.callee，也不支持自引用，递归或解绑事件时容易出错 - 构建阶段忽略 devtool 支持 → Webpack/Vite 开启 source map + devtool: 'source-map' 可进一步增强具名函数的堆栈可读性
