函数中变量无法正常工作及两段JavaScript代码差异原因咨询

问题1：为何函数中的变量无法正常工作？ #

函数里变量出问题，通常逃不过这几个常见坑，我给你一一拆解：

• 变量作用域搞混：比如用var声明的变量是函数级作用域，要是在if/for这类块级代码里重新声明，会因为变量提升导致意外覆盖；要是直接赋值不声明变量，它会偷偷变成全局变量，完全偏离你想要的局部变量行为。举个例子：

  function test() {
    if (true) {
      var num = 10; // var声明会把变量提升到函数顶部
    }
    console.log(num); // 会输出10，而非你以为的undefined
  }
  

  换成let/const就能严格遵循块级作用域，不会踩这个坑。
• 变量提升的陷阱：var声明的变量会被提升到作用域顶部，但赋值操作不会跟着提升。比如：

  function test() {
    console.log(num); // 输出undefined，不是报错
    var num = 20;
  }
  

  这是因为JS引擎会把代码偷偷解析成：var num; console.log(num); num=20;，所以会出现undefined的情况。
• 闭包导致的变量共享：如果在循环里创建闭包，不小心共享了同一个变量，所有闭包都会拿到循环最后一次的变量值。比如：

  function createHandlers() {
    var handlers = [];
    for (var i = 0; i < 3; i++) {
      handlers.push(function() { console.log(i); });
    }
    return handlers;
  }
  var handlers = createHandlers();
  handlers[0](); // 输出3，而不是预期的0
  

  解决办法要么用let声明循环变量，要么用立即执行函数（IIFE）给每个闭包创建独立作用域。
• 异步操作中的变量引用：比如在setTimeout里引用函数内的变量，当异步回调执行时，变量可能已经被修改了。比如：

  function test() {
    var msg = "hello";
    setTimeout(function() {
      console.log(msg); // 这里会拿到修改后的"world"
    }, 1000);
    msg = "world";
  }
  test(); // 输出world
  

问题2：两段JavaScript代码存在差异的原因（结合常见场景举例） #

因为你没贴具体代码，我拿两个最常见的差异场景来解释，你可以对照自己的代码参考：

场景1：var vs let声明变量的循环差异 #

第一段代码（用var）：

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// 输出：3 3 3

第二段代码（用let）：

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// 输出：0 1 2

差异原因：

• 用var时，循环变量i是函数级（全局环境下就是全局）作用域，所有setTimeout的回调共享同一个i的引用，循环结束时i已经变成3，所以回调执行时全输出3。
• 用let时，每次循环都会创建一个新的块级作用域，每个回调引用的是当前循环迭代的i实例，所以会依次输出0、1、2。

场景2：函数声明 vs 函数表达式的提升差异 #

第一段代码（函数声明）：

test(); // 正常输出"hello"
function test() {
  console.log("hello");
}

第二段代码（函数表达式）：

test(); // 报错：test is not a function
var test = function() {
  console.log("hello");
};

差异原因：

• 函数声明会被完整提升到作用域顶部，所以即使在声明前调用也能正常执行。
• 函数表达式是先把var test提升（值为undefined），赋值操作留在原地，调用时test还是undefined，不是函数，自然报错。

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