JavaScript中的闭包(Closure)

闭包的两个特点：

1、作为一个函数变量的一个引用 - 当函数返回时，其处于激活状态。
2、一个闭包就是当一个函数返回时，一个没有释放资源的栈区。

闭包的价值在于可以作为函数对象 或者匿名函数，对于类型系统而言这就意味着不仅要表示数据还要表示代码。支持闭包的多数语言都将函数作为第一级对象，就是说这些函数可以存储到变量中、作为参数传递给其他函数，最重要的是能够被函数动态地创建和返回。

例1。

以下是引用片段： <script type="text/javascript"> function sayHello2(name) { var text = 'Hello ' + name; // local variable var sayAlert = function() { alert(text); } return sayAlert; } var sy = sayHello2('never-online'); sy(); </script>

作为一个Javascript程序员，应该明白上面的代码就是一个函数的引用。如果你还不明白或者不清楚的话，请先了解一些基本的知识，我这里不再叙述。

上面的代码为什么是一个闭包？
因为sayHello2函数里有一个内嵌匿名函数
sayAlert = function(){ alert(text); }
在Javascript里。如果你创建了一个内嵌函数（如上例），也就是创建了一个闭包。

在C或者其它的主流语言中，当一个函数返回后，所有的局部变量将不可访问，因为它们所在的栈已经被消毁。但在Javascript里，如果你声明了一个内 嵌函数，局部变量将在函数返回后依然可访问。比如上例中的变量sy，就是引用内嵌函数中的匿名函数function(){ alert(text); }

例2。

以下是引用片段： <script type="text/javascript"> function say667() { // Local variable that ends up within closure var num = 666; var sayAlert = function() { alert(num); } num++; return sayAlert; } var sy = say667(); sy(); alert(sy.toString()); </script>

上面的代码中，匿名变量function() { alert(num); }中的num，并不是被拷贝，而是继续引用外函数定义的局部变量——num中的值，直到外函数say667()返回。

例3。

以下是引用片段： <script type="text/javascript"> function setupSomeGlobals() { // Local variable that ends up within closure var num = 666; // Store some references to functions as global variables gAlertNumber = function() { alert(num); } gIncreaseNumber = function() { num++; } gSetNumber = function(x) { num = x; } } </script> <button onclick="setupSomeGlobals()">生成 - setupSomeGlobals()</button> <button onclick="gAlertNumber()">输出值 - gAlertNumber()</button> <button onclick="gIncreaseNumber()">增加 - gIncreaseNumber()</button> <button onclick="gSetNumber(5)">赋值5 - gSetNumber(5)</button>

上例中，gAlertNumber, gIncreaseNumber, gSetNumber都是同一个闭包的引用，setupSomeGlobals()，因为他们声明都是通过同一个全局调用——setupSomeGlobals()。
你可以通过“生成”，“增加”，“赋值”，“输出值”这三个按扭来查看输出结果。如果你点击“生成”按钮，将创建一个新闭包。也就会重写gAlertNumber(), gIncreaseNumber(), gSetNumber(5)这三个函数。

如果理解以上代码后，看下面的例子：

例4。

以下是引用片段： <script type="text/javascript"> function buildList(list) { var result = []; for (var i = 0; i < list.length; i++) { var item = 'item' + list[i]; result.push( function() {alert(item + ' ' + list[i])} ); } return result; } function testList() { var fnlist = buildList([1,2,3]); // using j only to help prevent confusion - could use i for (var j = 0; j < fnlist.length; j++) { fnlist[j](); } } testList(); </script> 运行结果: item 3 is undefined item 3 is undefined item 3 is undefined 代码result.push( function() {alert(item + ' ' + list[i])} )， 使result数组添加了三个匿名函数的引用。这句代码也可以写成 var p = function() {alert(item + ' ' + list[i])}; result.push(p);

关于为什么会输出三次都是 "item 3 is undefined"

在上面的例子say667()例子中已经解释过了。
匿 名函数function() {alert(item + ' ' + list[i])}中的list[i]并不是经过拷贝，而是对参数list的一个引用。直到函数buildList()返回为止，也就是说，返回最后一个 引用。即遍历完list（注：list的最大下标应该是2）后，经过i++也就变成了3，这也就是为什么是item 3，而list[3]本身是没有初始化的，自然也就是undefined了。

例5。

以下是引用片段： <script type="text/javascript"> function newClosure(someNum, someRef) { // Local variables that end up within closure 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); } } var closure1 = newClosure(40, {someVar:' never-online'}) var closure2 = newClosure(99, {someVar:' BlueDestiny'}) closure1(4) closure2(3) </script>

在这最后一个例子中，展示如何声明两个不同的闭包。

注意：使用Function()构造函数和函数直接量创建闭包的区别：
1.构造函数Function()允许在运行时动态地创建和编译JavaScript代码，但是函数直接量却是程序结构的一个静态部分，就像function语句一样。

2.每次调用构造函数Function()时都会解析函数体并且创建一个新的函数对象，如果对构造函数的调用出现在一个循环中，或者出现在一个经常被调用的函数中，这种方法的效率就非常低；而函数直接量或出现在循环和函数中的嵌套函数不是在每次调用时都被重新编译，而且每当遇到一个函数直接量是也不创建一个新的函数对象（但可能需要一个新闭包来捕捉定义函数的词法作用域的差别）

3Function()构造函数创建的函数不使用词法作用域，相反的，它们总是被当作顶级函数来编译

例1
var y="global";
function f()
{
var y="local";
return new Function("return y");
}
alert(f()()); //返回global

var y="global";
function f()
{
var y="local";
return function() {return y;};
}
alert(f()()); //返回local