为何在函数内重新定义全局变量会导致其变为undefined？

先看第一个代码段：

var foo = 'bar';
(function() {
  console.log(foo);
}) ();

这里函数内部没有声明自己的foo变量，会向上查找作用域找到全局的foo，所以输出bar，符合预期。

再看第二个代码段：

var foo = 'bar';
(function() {
  console.log(foo);
  var foo = 'bar';
}) ();

问题出在JavaScript的**变量提升（Hoisting）**机制上——用var声明的变量会被“提升”到当前作用域的最顶部，但变量的赋值操作会留在原来的位置。

换句话说，这段函数内部的代码实际会被JavaScript引擎解析成这样：

(function() {
  var foo; // 变量声明被提升到作用域顶部，此时foo为undefined
  console.log(foo); // 输出undefined
  foo = 'bar'; // 赋值操作留在原地
}) ();

同时，因为函数内部声明了foo，根据作用域规则，函数内部会优先使用自身作用域的变量，不会去访问全局的foo，所以全局的foo会被内部变量遮蔽。

总结关键点：

• var声明的变量仅提升声明部分，赋值逻辑留在原位置
• 函数内部的变量声明会遮蔽外部作用域的同名变量
• 因此在赋值前访问变量，得到的就是undefined

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