深入解析JavaScript变量作用域与闭包机制

JavaScript变量作用域核心概念

在深入探讨JavaScript变量作用域之前，需要明确几个核心概念。

JavaScript的变量作用域机制依赖于其特有的作用域链结构。

在ES6之前的JavaScript环境中，并不存在块级作用域的概念。

在函数内部声明的变量，其有效范围覆盖整个函数体，而不仅仅是声明所在的代码块。

作用域链与变量查找机制

1、JavaScript的作用域链原理 首先通过以下代码示例进行说明：

<script type="text/javascript"> var rain = 1; function rainman(){ var man = 2; function inner(){ var innerVar = 4; alert(rain); } inner(); //调用inner函数 } rainman(); //调用rainman函数</script>

分析alert(rain);这一行代码的执行过程。JavaScript引擎首先在inner函数内部查找变量rain的定义；若找到则直接使用inner作用域内的rain；若未找到，则沿着作用域链向上一级，即在rainman函数内部查找rain的定义；在上述代码中，rainman函数体内并未定义rain变量，因此引擎继续向上查找全局对象（Global Object）；由于全局对象中定义了rain = 1，最终alert输出结果为'1'。

作用域链的定义：当JavaScript需要查询变量x时，首先检查作用域链中的第一个对象（当前执行上下文）是否定义了x；若未定义，则继续检查作用域链中的下一个对象，依此类推，直到找到定义或到达全局对象。

上述代码示例涉及三个层级的作用域链对象，按优先级依次为：inner函数作用域、rainman函数作用域、window全局对象。

局部变量与全局变量的优先级

2、函数体内部，局部变量的优先级高于同名的全局变量。 代码如下:

<script type="text/javascript"> var rain = 1; //定义全局变量 rain function check(){ var rain = 100; //定义局部变量rain alert( rain ); //这里会弹出 100 } check(); alert( rain ); //这里会弹出1</script>

这一特性体现了JavaScript在变量遮蔽（Shadowing）方面的灵活性。

函数级作用域与块级作用域的缺失

仔细观察以下代码，变量i、j、k的作用域范围相同，它们在rainman函数体内均被视为局部变量，而非仅限于if或for代码块内。

<script type="text/javascript"> function rainman(){ // rainman函数体内存在三个局部变量 i j k var i = 0; if ( 1 ) { var j = 0; for(var k = 0; k < 3; k++) { alert( k ); //分别弹出 0 1 2 } alert( k ); //弹出3 } alert( j ); //弹出0 }</script>

变量提升与undefined陷阱

首先分析这段代码的执行逻辑：

<script type="text/javascript"> function rain(){ var x = 1; function man(){ x = 100; } man(); //调用man alert( x ); //这里会弹出 100 } rain(); //调用rain</script>

上述代码表明，变量x在rain函数体的整个生命周期内均可访问，且允许重新赋值。基于这一规则，可能会产生一些看似反直觉的结果，请观察以下代码。

<script type="text/javascript"> var x = 1; function rain(){ alert( x ); //弹出 'undefined'，而不是1 var x = 'rain-man'; alert( x ); //弹出 'rain-man' } rain();</script>

原因在于，在函数rain内部，局部变量x通过var声明，其定义在整个函数体内均有效（即var x = 'rain-man'进行了声明），这导致同名的全局变量x被局部变量遮蔽。此处弹出'undefined'的原因是，当执行第一个alert(x)时，局部变量x虽然已声明，但尚未完成初始化（Initialization）。

因此，上述rain函数的实际行为等同于以下函数：

function rain(){ var x; alert( x ); x = 'rain-man'; alert( x );}

<script type="text/javascript"> function rain(){ x = 100; //声明了全局变量x并进行赋值 } rain(); alert( x ); //会弹出100 </script>

这是JavaScript初学者常犯的错误，往往在无意中创建了多个全局变量。

全局变量与window对象的关系

6、全局变量均为window对象的属性

<script type="text/javascript"> var x = 100 ; alert( window.x );//弹出100 alert(x);</script>

该行为等同于以下代码写法：

<script type="text/javascript"> window.x = 100; alert( window.x ); alert(x)</script>