JavaScript变量声明提前的深入解析与常见误区

JavaScript变量声明提前的深入解析与常见误区

上周四午餐后，团队Leader布置了一道JavaScript基础题目供团队成员练习。团队涵盖前端、后端及移动端Web开发人员，大家基于各自背景对题目产生了不同理解，并在即时通讯群组中展开讨论。尽管这属于JavaScript的基础知识，但通过交流大家获益良多，特此分享。对于具备开发经验的工程师而言，这些内容看似简单，但由于日常多依赖jQuery或其他第三方JS库，往往容易忽视对原生JavaScript基础原理的深入学习。原题要求判断两次alert语句的输出结果。

<script
type="text/javascript">
var a = 1;
var a;
alert(typeof a);
(function () {
 b = '-----';
 var b; 
 })();
 alert( typeof b);
</script>

我的初步判断是：第一次alert输出1，第二次输出undefined。随后Leader建议重新审视答案。我对题目的具体分析如下：

首先，变量a被声明并赋值为1，接着再次使用var声明a但未赋值。此时变量a的默认值应为undefined。

其次，变量b在函数内部定义，属于局部变量。而alert语句位于函数外部，访问的是全局变量b，因此预期结果为undefined。

变量声明提前的核心机制

我在Chrome浏览器中实际运行了上述代码，正确结果为：第一次alert输出number，第二次输出undefined。这道题主要考察的是JavaScript中的变量声明提前（Hoisting）概念。

函数声明提前的表现

为了进一步说明，我们来看另一个示例：

test();
function test(){
 alert("Hello World!");
}

该程序不会报错，运行结果为：Hello World!。其原理在于：JavaScript引擎在执行代码前，会先扫描并保存所有的function定义。

变量声明与赋值的分离

针对第一道题的分析：

var a = 1;

var a;

第二行的var a声明相当于在代码顶部进行了声明，而第一行语句实际上是重新声明a并赋值为1。因此，typeof a的结果为number。

针对第二道题的分析：

b = '-----';

var b;

第二题解析：执行b='-----'时，程序首先查找上下文中是否存在变量b的声明。若存在，则直接赋值。然而，alert(typeof b)位于函数外部，访问的是全局变量b，因此结果为undefined。

需要特别注意：变量的赋值操作并不会提前。

函数内部变量的作用域分析

接着观察以下代码段：

<script type="text/javascript">
name="aaa";
function test(){
alert(typeof name);
var name="bbb";
alert(typeof name);
}
test();
</script>

请写出上述代码的运行结果。

该分析可以转化为如下代码段：

name="aaa";
function test(){
alert(typeof name);//在函数内部查找上下文是否有name的声明，有声明。但是赋值操作不能提前，所以类型为undefined
var name="bbb";//赋值操作
alert(typeof name);//string
}
test();

全局变量与局部变量的差异探讨

那么，下面这段代码的运行结果是什么？

<script type="text/javascript">
alert(typeof name);
var name="hello world";
alert(typeof name);
</script>

程序运行结果为：string, string。这让人感到困惑，难以通过现有知识解释。表面上看似乎理解了变量声明提前，但用此方法分析上述代码段却会得出错误结论。那么，变量的赋值操作与变量位于函数外部（全局变量）还是函数内部（局部变量）是否存在关联？