技术咨询：var bar = function(){}与var bar = function foo(){}的区别

嘿，这个问题问得超实用！很多JS开发者刚开始都会纠结这两种写法的差异，我来给你拆解明白～

先明确两个写法的本质 #

• a) var bar = function() {}; 这是匿名函数表达式：函数本身没有自己的名字，只有变量bar指向它。
• b) var bar = function foo() {}; 这是具名函数表达式：函数本身有一个内部名字foo，同时变量bar也指向这个函数。

给函数命名foo的重要性&两者核心差异 #

1. 递归调用更靠谱 #

如果你的函数需要递归调用自己，匿名写法会依赖外部变量bar——万一bar被重新赋值，递归直接崩了；但具名写法里的foo是函数内部专属的标识符，不受外部变量影响。看例子：

// 匿名写法的隐患
var bar = function() {
  if (Math.random() > 0.5) return;
  bar(); // 这里调用的是外部变量bar
};
bar = "我不是函数了";
bar(); // 报错：不是函数！

// 具名写法的安心操作
var bar = function foo() {
  if (Math.random() > 0.5) return;
  foo(); // 直接调用函数自己的名字，跟外部bar没关系
};
bar = "我不是函数了";
// 虽然外部调用不了，但函数内部递归依然正常（如果之前没执行完的话）

2. 调试时定位bug更快 #

当函数抛出错误时，浏览器控制台或Node的错误栈里，匿名函数只会显示(anonymous function)，你得挨个找是哪个匿名函数出问题；但具名函数会直接显示foo，一眼就能锁定目标，调试效率拉满。

3. 函数name属性更准确 #

ES6之后，函数自带name属性：

• 匿名函数的name会被自动设置为变量名bar（早期浏览器可能是空值）；
• 具名函数的name属性就是你定义的foo，能更准确反映函数本身的标识。

var bar1 = function() {};
console.log(bar1.name); // 输出 "bar1"（ES6+）

var bar2 = function foo() {};
console.log(bar2.name); // 输出 "foo"

4. 作用域隔离：foo只能在函数内部访问 #

具名函数的名字foo是函数内部作用域专属的，外部根本访问不到——你在函数外面写foo()会直接报错，避免了全局作用域污染。而匿名函数只能通过外部变量bar来访问。

总结怎么选？ #

• 如果你的函数逻辑简单，不需要递归，也不太在意调试标识，匿名写法a完全够用，简洁省事；
• 如果需要递归调用、想提升调试体验，或者希望函数有一个独立的内部标识，那具名写法b会是更稳妥的选择。

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