浅谈javascript的作用域

首先，看看下面的代码会输出什么？

例子一：

<script type="text/javascript">
var age = "22";
var name= "wusuopubupt";
function echo() {
	alert(name);
	var name = "czxttkl";
	alert(name);
	alert(age);
}
echo(name);
</script>

开始，我认为结果是：

wusuopubupt
czxttkl
23

可是实际输出却是：

undifined
czxttkl
23

为什么呢？

《javascript权威指南》上说：

1.在函数体内部，局部变量的优先级比同名的全局变量高。如果给一个局部变量或函数的参数声明的名字与某个全局变量的名字相同，那么就有效的隐藏了这个全局变量。

2.JavaScript中的函数运行在它们被定义的作用域里,而不是它们被执行的作用域里.

3.函数体内部声明变量foo不用var标识符时，那么foo就是全局变量。

再看一个例子：

例子二：

<script type="text/javascript">
var age = "22";
var name= "wusuopubupt";
function echo() {
	alert(name);
	name = "czxttkl"; //注意这里没有了var!
	alert(name); 
	alert(age);
}
echo(name);
</script>

输出什么呢？

wusuopubupt
czxttkl
22

这是我们想要的结果！

为什么呢？

--因为javascript脚本执行会首先进行预编译！（参考：http://www.laruence.com/2009/05/28/863.html）

原理与解释：

对于例子1：

因为在函数体内重新定义了局部变量var name="czxttkl"，函数执行到第一个alert（name）时，外面的全局变量被局部变量覆盖掉，此时，局部变量name还没被定义（因为它的定义在第一个alert（name）的下面！），而javascript的预编译过程又告诉编译器存在name这么个变量，注意这里的name有值，只是它的值未定义（undefined），这就很好的解释了例一中的undefined的由来了。

为了说明undifined与error的区别，看下面这个例子：

<script type="text/javascript">
var name= "wusuopubupt";
function echo() {
	alert(age);
}
echo();
</script>

没有任何输出，查看chrome的log：

可以看到age的值不是未定义（undefined），而是报错：age is not defined（age 这个变量根本就不存在！）。现在可以证明例一中的第一个name是存在的，只是name的值是undifined而已。

对于例子2：

很简单，由于在函数体内部声明变量name = "czxttkl"时，并没有用到var这个标识符，所以name是个全局变量，所以第一次alert（name）时，输出的是全局变量（函数体外部生命的 var name="wusuopubupt"）.

参考：

1.《Javascript:The Definitive Guide》

2. laruence大牛:http://www.laruence.com/2009/05/28/863.html