JavaScript 变量作用域与闭包详解：避免全局污染

JavaScript 变量作用域与闭包详解：避免全局污染

示例一展示了基础的全局变量行为。

 
<script type="text/javascript">
var i = 1;
// 弹出内容为 1 true 的提示框
alert(window.i + ' ' + (window.i == i));
</script>

全局变量与 window 对象的关系

代码分析如下：

在 JavaScript 全局作用域中声明的变量，会自动成为 window 对象的一个属性。

上述示例证实了这一点：当我们定义全局变量时，window 对象会同步生成对应的属性。接下来我们将探讨如何避免这种全局污染。

避免全局污染：使用匿名函数

示例二演示了全局变量可能引发的冲突问题。

 
<script type="text/javascript">
var document = 1;
window.onload = function(){
alert(document);
} 
// 弹出内容为 1 的提示框
alert(window.document);
</script>

这种覆盖内置对象的行为是我们不希望看到的。为了解决这个问题，可以采用以下方案：

 
<script type="text/javascript">
function test(){
var document = 1;
window.onload = function(){
alert(document);
} 
} 
test();
// 弹出内容为 [object] 的提示框
alert(window.document);
</script>

为了代码更加简洁优雅，推荐使用立即执行函数表达式（IIFE）：

 
<script type="text/javascript">
(function(){
var document = 1;
window.onload = function(){
alert(document);
} 
})(); 
// 弹出内容为 [object] 的提示框
alert(window.document);
</script>

原理分析：

这种运行匿名方法的形式，在 JavaScript 的主流框架中经常见到，这样做可以避免产生不必要的 window 对象的属性，减少冲突的可能。

函数作用域与块级作用域的误区

示例三展示了块级作用域的误区。

 
<script type="text/javascript">
(function(){
if('1' == '1'){
var i = 1;
} 
// 弹出内容为 1 的提示框
alert(i);
})(); 
</script>

关键点在于：

变量的作用域是整个函数，不是{}块。

变量重复声明与隐式全局变量

示例四演示了变量的重复声明。

 
<script type="text/javascript">
var i = 1;
// 弹出内容为 1 的提示框
alert(i);
var i = 2;
// 弹出内容为 2 的提示框
alert(i);
</script>

分析指出：

一个变量可以被重新定义，这个看起来有些怪，因为在很多其他语言里这样是行不通的。

示例五揭示了隐式全局变量的陷阱。

 
<script type="text/javascript">
function test(){
i = 1;
} 
test();
// 弹出内容为 1 的提示框
alert(window.i);
</script>

结论如下：

如果对一个没有初始化的变量进行赋值操作，那么这个变量会作为全局变量。