本文通过五个具体代码示例，深入解析JavaScript中闭包的创建原理、内部变量保持、全局变量访问以及常见的循环引用陷阱。文章详细展示了闭包如何捕获外部作用域变量，并探讨了在实际开发中利用闭包管理状态及避免潜在错误的最佳实践。
闭包的基本概念与变量保持
1.
代码如下:
function say667() {
var num = 666;
var sayAlert = function() { alert(num); }
num++;
return sayAlert;
}
var sayAlert = say667();
sayAlert();闭包与全局变量的交互
2.
代码如下:
function setUpSomeGlobals() {
var num = 666;
gAlertNumber = function() { alert(num); }
gIncreaseNumber = function() { num++; }
gSetNumber = function(x) { num = x; }
}
setUpSomeGlobals(); // 为三个全局变量赋值
gAlertNumber(); // 666
gIncreaseNumber();
gAlertNumber(); // 667
gSetNumber(12);
gAlertNumber(); // 12循环中的闭包陷阱
3.
代码如下:
function buildList(list) {
var result = [];
for (var i = 0; i < list.length; i++) {
var iteml = 'item' + list[i];
result.push(function() { alert(item + '' + list[i]); });
}
return result;
}
function testList() {
var fnlist = buildList([1, 2, 3]);
for (var j = 0; j < fnlist.length; j++) {
fnlist[j]();
}
}闭包中的变量声明顺序
4.
代码如下:
function sayAlice() {
var sayAlert = function() { alert(alice); }
var alice = 'Hello Alice';
return sayAlert;
}
var helloAlice = sayAlice();
helloAlice(); // Hello Alice复杂闭包与状态管理
5.
代码如下:
function newClosure(someNum, someRef) {
var num = someNum;
var anArray = [1, 2, 3];
var ref = someRef;
return function(x) {
num += x;
anArray.push(num);
alert('num:' + num + '\nanArray' + anArray.toString() + '\nref.someVar' + ref.someVar);
}
}
closure1 = newClosure(40, { someVar: 'closure1' });
closure2 = newClosure(1000, { someVar: 'closure2' });
closure1(5);
closure2(-10);