浏览器与Node.js中执行同一段JavaScript代码的行为差异

先看你给出的代码：

let bar = 'bar';
function foo() {
  return bar;
}
console.log(foo());
bar = 'baz';

差异产生的核心原因 #

这种输出差异本质是两者的执行环境与作用域处理机制不同：

• Node.js环境：
  Node.js里每个单独文件默认作为独立模块运行，模块有自己的顶层作用域，而非全局作用域。代码同步执行时，console.log(foo())在bar = 'baz'之前调用，此时bar的取值是初始的'bar'，所以输出bar。

• 浏览器环境：
  在浏览器的传统非模块脚本中，let声明的变量会挂载到全局作用域（window对象）。但你遇到的输出baz的情况，大概率是控制台的异步显示特性导致的——虽然代码同步执行时console.log(foo())获取的是'bar'，但部分旧版浏览器或特定场景下，控制台会延迟渲染输出内容，等后续bar = 'baz'执行后，显示的内容被更新成了'baz'。在现代标准浏览器的正常同步执行场景下，实际输出应该也是'bar'。

是否符合直觉？ #

从JavaScript的同步执行逻辑来看，代码是按顺序执行的：先声明并初始化bar，再调用函数输出当前值，最后才修改bar。所以输出bar才是符合直觉的，这也是Node.js和现代标准浏览器的实际执行结果。浏览器出现baz的情况属于控制台显示的特殊情况，并非代码本身的执行逻辑问题。

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