旷世的忧伤

Huoty's Blog

JavaScript 的全局变量与局部变量

Web设计 | Jan 5, 2016 | javascript

首先说一下编程语言中全局变量与局部变量的区别。全部变量存储在静态区中，程序运行开始时为其分配内存，程序运行结束后该内存才被释放。局部变量存储在栈中，随程序调用被申请和释放。

在 Javascript 当中，变量的作用域是根据方法块来划分的，即以 function 的一对大括号 { } 来划分。而 for、while、if 块并不是作用域的划分标准。全局变量与局部变量在程序中的区别就在于作用域的不同。

一般情况，如果在任何函数定义之外声明了一个变量，则该变量为全局变量，且该变量的值在整个持续范围内都可以访问和修改；如果在函数定义内声明了一个变量，则该变量为局部变量，每次执行该函数时都会创建和破坏该变量，且它不能被该函数外的任何事物访问。

变量定义

变量都应该先申明再使用，JavaScript 用关键字 var 声明变量：

var varname;

只声明不赋值的变量则是空的，JavaScript 认为它是未定义的（underfined）。也就是说未使用值来声明的变量，其值实际上是 undefined。对一个未申明的变量进行引用则会导致脚本出错而停止运行，即出现ReferenceError: XXX is not defined。

当然，可以在声明变量的同时对变量进行赋值：

var name=”Huoty”;

变量申明也可以不用 var，而是直接采用赋值的方式：

a = 10;

这样申明的变量默认是全局变量，但不建议这样做。虽然它是全局变量，但也受作用的限制，这似乎很绕，我们来看一个例子：

<body>
    <button type="button" onclick="getclick()">Click Me!</button>
</body>
<script>
function getclick()
{
    a = 10;
    alert(a);
}
console.log(a);
</script>

这段代码会有 ReferenceError: a is not defined 的错误，原因是在全局作用域中 a 未申明，但 a 确实为全局变量。原因是函数 getclick 只在按钮被单击时调用，而 a 也在此时被定义，console.log(a) 则是在脚本被加载时就调用，a 未来得及定义。而从表面上看这段代码是没有问题的，所以建议统一使用 var 来定义变量，需要全局变量时只需在函数外定义即可。个人认为这是 JavaScript 在设计上的一个缺点，容易让人混淆。如果 getclick 不是由点击事件触发，则这段代码就不会除错，如下所示：

function getclick()
{
    a = 10;
    alert(a);
}
getclick();
console.log(a);

我们再来看另外一个例子：

 var a = 1;
 document.write(a + '<br>');

 function demo()
 {
 	document.write(a + '<br>');

 	var a = 3;
 }

 demo();

程序输出 1 和 undefined，是不是很奇怪，应该输出 1 和 1 才对。这又涉及到另外一个问题，当全局变量跟局部变量重名时，局部变量会覆盖掉全局变量。同时，Javascript 在执行前会对整个脚本文件的声明部分做完整分析(包括局部变量)，从而确定实变量的作用域。在这段代码中，函数 demo 中有一句 var a = 3;，Javascript 在做分析时，认为 a 在函数 demo 中是局部变量，而在执行语句 document.write(a + '<br>'); 时，变量还未来得及定义就被引用，所以是 undefined。

如果在局部作用域中要引用全局作用域的值，则用 window.globalVariableName 方式来访问，window 是一个全局对象。例如：

 var a = 1;

 function demo()
 {
 	var a = 3;
 	document.write(a + '<br>');
 	document.write(window.a + '<br>');
 }

 demo();
 document.write(a);

输出结果是： 3 1 1

显式声明与隐式声明

显式声明与隐式声明是针对全局变量而言的。之前有提到变量的申明可以用 var 关键字，也可以不用。使用 var(关键字) + 变量名(标识符)的方式在 function 外部声明，则为全局变量的显示申明；没有使用var，直接给标识符赋值，这样会隐式的声明一个全局变量，即使该语句是在一个 function 内，当该 function 被执行后也会变成全局变量，仅当该 function 被执行时。

全局变量还可以使用 window 全局对象来申明，全局对象的属性对应也是全局变量，例如：

window.a = 5;

全局变量优缺点

优点：

  • 可以减少变量的个数，减少由于实际参数和形式参数的数据传递带来的时间消耗。

缺点：

  • 全局变量保存在静态存贮区，程序开始运行时为其分配内存，程序结束释放该内存。与局部变量的动态分配、动态释放相比，生存期比较长，因此过多的全局变量会占用较多的内存单元。

  • 全局变量破坏了函数的封装性能。函数象一个黑匣子，一般是通过函数参数和返回值进行输入输出，函数内部实现相对独立。但函数中如果使用了全局变量，那么函数体内的语句就可以绕过函数参数和返回值进行存取，这种情况破坏了函数的独立性，使函数对全局变量产生依赖。同时，也降低了该函数的可移植性。

  • 全局变量使函数的代码可读性降低。由于多个函数都可能使用全局变量，函数执行时全局变量的值可能随时发生变化，对于程序的查错和调试都非常不利。

因此，在不是很必要的时候，不建议使用全局变量。

要点总结

  • （1）JavaScript 的变量作用域是根据方法块来划分的（也就是说以function的一对大括号{}来划分）。切记，是function块，而for、while、if块并不是作用域的划分标准。

  • （2）JavaScript 在执行前会对整个脚本文件的声明部分做完整分析(包括局部变量)，从而确定变量的作用域。

  • （3）当全局变量跟局部变量重名时，局部变量的作用域会覆盖掉全局变量的作用域。当离开局部变量的作用域后，又重回到全局变量的作用域。而当全局变量遇上局部变量时，用 window.globalVariableName 访问。

近期文章

Top