本文解析JavaScript中使用var声明变量时，因变量提升导致的undefined现象。通过对比全局变量与局部变量的覆盖机制，深入探讨未使用var时系统搜索上下文的逻辑，并指出在函数内重复定义同名变量可能引发的错误，帮助开发者避免此类常见陷阱。
JavaScript变量作用域基础
在JavaScript中，变量依据其作用范围可分为局部变量与全局变量。直接在全局作用域定义的变量为全局变量，可被所有脚本访问；而在函数内部定义的变量则为局部变量，其有效范围仅限于该函数内部。若全局变量与局部变量使用相同的变量名，局部变量将覆盖全局变量。示例代码如下：
示例代码结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js中全局变量与局部变量</title>
</head>
<body>
<script type="text/javascript">
var a = "全局变量";
function test1()
{
var a = "局部变量";
alert(a);
}
function test2()
{
alert(a);
var a = "局部变量";
alert(a);
}
function test3()
{
alert(a);
a = "局部变量";
alert(a);
}
</script>
<input type="button" value="test1" onclick="test1()"/>
<input type="button" value="test2" onclick="test2()"/>
<input type="button" value="test3" onclick="test3()"/>
</body>
</html>
变量覆盖与执行结果分析
运行结果如下： 点击test1按钮，弹出局部变量。 点击test2按钮，先弹出undefined，随后弹出局部变量。 点击test3按钮，先弹出全局变量，随后弹出局部变量。
var声明与变量搜索机制
这体现了使用var与不使用var的区别： 若使用var，程序会强制定义一个新变量。 若不使用var，系统会优先在当前上下文中搜索是否存在该变量，仅当不存在时才会重新定义一个新变量。
常见错误与最佳实践
在test3中，使用的变量a均为全局变量，第一次直接输出全局变量，第二次是直接为全局变量赋值后使用。 在test1和test2中，均存在在function中使用var定义同名新变量的情况，这会导致函数中的变量覆盖全局变量。因此在test2中：第一次输出的a是已被覆盖的局部变量a，且未赋予初始值，故出现undefined结果。这种使用变量的方式实际上是错误的，应当避免。