JavaScript作用域与闭包：避免全局污染及常见陷阱解析

JavaScript作用域与闭包：避免全局污染及常见陷阱解析

例如代码块

 
if (true) {
int i = 100;
} 
print(i); //报错，变量i未声明

上述示例表明，代码块外部的函数无法访问变量i。

然而在JavaScript中，情况截然不同。

 
if (true) {
var i = 100;
} 
alert(i); //弹出对话框显示100

尽管现代语言提倡延迟声明变量，但在JavaScript中这是极差的做法。因缺乏块级作用域，应在函数体顶部集中声明所有可能使用的变量。

利用闭包模拟私有字段

闭包特性如下：

即便缺乏块级作用域，函数作用域依然存在。

此作用域的优势在于内部函数可访问其外部函数的参数及变量（不包括this和arguments）。

利用此特性，可按以下方式设计代码。

 
var bankAccount = function () {
var value = 0;
return {
deposit: function (inc) {
value += inc;
}, 
getValue: function () {
return value;
} 
} 
} 
var myAccount = bankAccount(); //创建新银行账户
myAccount.deposit(1000); //存入1000
alert(myAccount.getValue()); //应弹出1000

由于value位于bankAccount函数内部，外部无法直接操作，必须通过返回的对象接口进行操作，以此实现类似C#和Java中的私有字段效果。

减缓全局变量污染的方法

减缓全局变量对全局空间的污染：利用函数作用域，编写JS库时可降低与其他库的冲突风险。

 
(function () {
var hello = 'Hello World.';
})(); 
alert(hello); //报错：hello不存在

此语法略显奇特，核心思想是定义并立即执行一个匿名函数。因function开头会被解析为函数定义，故用括号包裹后，再用另一对括号调用该函数。外部alert无法访问函数内部定义的hello。

陷阱一：var的陷阱

陷阱一：var声明的陷阱

将“减缓全局变量污染全局空间”示例修改为

 
(function () {
hello = 'Hello World.'; //移除var
})(); 
alert(hello); //弹出 'Hello World.'

当变量hello未使用var显式声明时，它便成为了全局变量！

尽管利用此特性可提供对外接口，但不建议采用此方式。

 
(function () {
var hello = 'Hello World.';
sayHello = function () { //不建议以此方式提供接口，直观性差。
alert(hello);
} 
})(); 
sayHello();

可改进为

 
(function (window) {
var hello = 'Hello World.';
window.$ = {
sayHello: function () {
alert(hello);
} 
}; 
})(window);
$.sayHello(); //外观类似jQuery

或者

 
var obj = (function () {
var hello = 'Hello World.';
return {
sayHello: function () {
alert(hello);
} 
}; 
})(); 
obj.sayHello();

陷阱二：闭包的陷阱

陷阱二：闭包的陷阱

 
(function () { //函数a
var arr = [];
var i = 0;
var j;
for ( ; i < 3; i++) {
arr.push(function () { //函数b
alert(i * 10);
}); 
} 
for (j in arr) {
arr[j]();
} 
})(); 

原预期函数数组arr中各函数执行后弹出0,10,20，但实际结果并非如此。实际弹出结果为30,30,30。

函数b访问的并非当时的i值，而是直接访问变量i（始终获取i的最新值）。

原因在于函数b是函数a的内部函数，变量i对函数b可见，函数b每次均从i处获取最新值。

此次修改如下：

 
(function () { //函数a
var arr = [];
var i = 0;
var j;
for ( ; i < 3; i++) {
arr.push((function (anotherI) { //函数m
return function () { //函数b
alert(anotherI * 10);
} 
})(i)); //此处为(function b(anotherI) {})(i)
} 
for (j in arr) {
arr[j]();
} 
})(); 

此次执行后，终于弹出0,10,20。原因何在？

函数b访问的是anotherI（即当时的i值），而非直接访问变量i。

每次在arr.push前，都会定义一个新的匿名函数m。本例中定义了3个匿名函数m0,m1,m2，每次调用后，它们的anotherI均获得当前i的值。每个m函数执行后返回一个b函数。b0位于m0内，b1位于m1内，b2位于m2内。b0只能访问m0的anotherI（值为0），而b0无法访问m1的anotherI，因为m0和m1是不同的函数。