JavaScript代码执行疑问：为何两次console.log(a)结果不同？

首先，我把你的代码整理成更易读的格式，方便咱们一步步分析：

var a; 
console.log(a); // 你提到这里输出 undefined
+function() { 
  alert("Hello from IIFE!"); 
}(); // 弹出 alert 弹窗
console.log(a); // 你提到这里输出 Hi
a = 'Hi';

先澄清一个小细节：按照上面的代码顺序，第二次console.log(a)本来应该还是undefined，因为a = 'Hi'是在它之后执行的。不过我猜你可能是把赋值语句的位置写错了？或者是在alert弹窗暂停的时候手动在控制台修改了a的值？没关系，咱们核心聊你的疑问：为什么两次console.log会输出不同结果，这背后是JavaScript的执行规则在起作用。

1. 先搞懂「变量提升」：声明提前，赋值滞后 #

JavaScript在真正执行代码之前，会先做一个编译预处理，其中最关键的就是「变量提升」：

• 所有用var声明的变量，会被提前到当前作用域的最顶部，但变量的赋值操作会留在原来的代码位置，不会提前。
• 所以你的第一行var a;，在编译阶段就已经完成了声明，此时a的默认值是undefined——这是JavaScript给未赋值变量的初始值。

2. 逐行拆解代码的执行流程 #

JavaScript是单线程、按顺序逐行执行的语言，咱们跟着代码走一遍：

• 第一步：执行console.log(a)。这时候a只完成了声明，还没有被赋值，所以读取到的是默认值undefined，控制台输出这个结果。
• 第二步：执行那个立即执行函数（IIFE）+function(){...}()：
  • 这里的+是个小技巧，它把后面的函数声明转换成了函数表达式，这样JavaScript就会立即调用它。
  • 这个函数内部只做了一件事：弹出alert弹窗。注意，它没有修改外部的a变量，所以对a的值没有影响。
  • 当alert弹窗出现时，JavaScript的执行会暂停——直到你点击弹窗的「确定」按钮，代码才会继续往下走。
• 第三步：执行第二次console.log(a)。如果你这里输出的是Hi，那说明在代码执行到这一行之前，a已经被赋值了（比如你把a = 'Hi'写在了这行前面，或者在弹窗暂停期间手动在控制台给a赋了值）。
• 第四步：执行a = 'Hi'。如果这行在第二次console.log之后，那它不会影响之前的输出，只是给a赋了值而已。

3. 核心原因：console.log读取的是变量的「当前值」 #

两次输出不同的本质，就是两次调用console.log时，a的取值状态不一样：

• 第一次调用时，a还没有被赋值，所以是undefined。
• 第二次调用时，a已经被执行了赋值操作，所以读取到的是赋值后的Hi。
• 那个IIFE本身并没有改变a，它只是暂停了代码执行，给a被修改提供了时间窗口（比如你手动改，或者代码里的赋值语句在它之后、第二次log之前）。

一句话总结 #

JavaScript的变量声明会被提前，但赋值只会在代码执行到对应行时生效；console.log会读取调用那一刻变量的当前值。两次输出不同，就是因为两次读取a时，它的状态从「未赋值的undefined」变成了「已赋值的Hi」。

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