JavaScript变量提升示例：为何第二个f()输出2而非3？

首先把你的完整代码贴出来，方便咱们一步步分析：

(function() { 
  f(); 
  f = function() { console.log(2); } 
}()); 
function f() { console.log(3); } 
f();

核心原因是变量提升和全局变量的修改，咱们拆解下执行流程就懂了：

1. 变量提升阶段：
   JavaScript在执行代码前，会先处理所有函数声明。这里全局作用域里的function f() { console.log(3); }是函数声明，会被提升到整个作用域的最顶部。这时候全局的f指向的就是这个输出3的函数。

2. 执行立即执行函数(IIFE)：

   • 首先调用f()：此时IIFE内部没有自己的f变量，所以会向上查找全局作用域的f，也就是那个输出3的函数，这一步控制台会输出3。
   • 然后执行f = function() { console.log(2); }：这里注意，代码里没有用var/let/const声明f，JavaScript会把它当成全局变量处理——直接覆盖了全局作用域里的f，把它改成了一个新函数，这个函数执行会输出2。

3. 执行最后一行的f()：
   这时候全局的f已经被IIFE里的代码替换成输出2的函数了，调用它自然就输出2啦。

你之前误以为会输出3，大概率是以为IIFE里的f是局部变量，但实际上因为没加声明关键字，它直接修改了全局的f引用，导致后续全局调用时用的是新函数。

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