JavaScript中变量作用域与未定义（undefined）陷阱

JavaScript变量作用域的基础

JavaScript中的变量根据作用域范围主要分为两类：全局变量和局部变量。直接定义（通常在脚本顶层）的变量是全局变量，可被所有脚本访问；在函数内部定义的变量是局部变量，仅在该函数体内有效。当全局变量与局部变量同名时，局部变量会在其作用域内优先隐藏（覆盖）同名的全局变量。

关键概念：变量提升与作用域链

理解“点击Test2按钮弹出undefined”这一经典现象，需要掌握两个核心知识点：1. 变量提升（Hoisting）：在任何代码执行前，当前作用域内所有使用 var 声明的变量都会被提升到作用域顶部，但不会进行初始化（赋值为 undefined）。2. 词法作用域与作用域链：JavaScript引擎在读取变量时，会先在当前作用域查找，找不到才向上级作用域（如全局）查找。

场景深度解析：三种函数行为对比

通过以下三个典型的函数场景，我们可以清晰地看到不同写法对运行结果的直接影响：

第1步：分析完全覆盖全局变量的场景

• 目的：观察局部变量如何彻底隐藏全局变量。
• 代码特征：函数内部使用 var a = "局部变量"; 声明了与全局同名的新变量。
• 结果：无论何时调用，函数内的 a 始终指向这个局部变量，弹窗显示“局部变量”。全局变量在此函数范围内被暂时屏蔽。

第2步：剖析产生undefined的经典陷阱

• 目的：识别变量提升带来的隐患。
• 代码特征：先写 alert(a);，后写 var a = "...";。
• 原因详解：虽然逻辑上是先打印后定义，但由于变量提升，实际执行顺序等效于：
  var a; // 此时a被赋予初始值undefined alert(a); // 输出undefined a = "局部变量"; // 真正赋值发生在此处。
  
• 结果：第一次 alert 弹出的正是未被赋值的 undefined，随后第二次弹出的才是真正的“局部变量”。这是初学者最容易踩的坑。

第3步：演示不声明var的隐性风险

• 目的：展示省略 var 时的变量归属问题。
• 代码特征：函数内部直接使用 a = "局部变量"; 而未加 var 声明。
• 结果：a 会被视为全局变量。第一次弹窗直接读取了外部的“全局变量”；第二次弹窗则是修改全局变量后的值。这会导致意想不到的副作用，污染全局命名空间。

总结与建议

上述三种情况揭示了使用 var 的核心区别：带上 var 是强制在当前作用域创建新变量（遵循变量提升规则）；不带 var 则会逐级向上寻找，最终落在全局对象上。

为了避免 test2 中出现的 undefined 及潜在的全局污染，建议采取以下措施：
1. 始终将 var、let 或 const 的声明放在函数的最顶端。
2. 在现代开发中，尽量使用 let 和 const 替代 var，以利用块级作用域消除大部分意外覆盖的问题。