Javascript 闭包并非魔法-CSDN博客

本文翻译自JavaScript closures for beginners

闭包不是什么魔法

本篇文章介绍了闭包，方便程序员们能够进一步理解javascript代码，本文适合有一定编程经验的程序员，比如可以看懂如下代码：大神请绕道。

#####Example 1

function sayHello(name) {
  var text = 'Hello ' + name;
  var say = function() { console.log(text); }
  say();
}
sayHello('Joe');&emsp;&emsp;//Hello Joe
复制代码

一旦深刻理解了核心概念，闭包就并不难分析和运用了。

一个关于闭包的案例

两句话总结：

第一级函数支持闭包。闭包它是一个表达式，可以在闭包的范围内引用变量（当它被首次声明），被赋值给变量，作为参数传递给函数，或作为函数结果返回。（译者注：在JavaScript世界中函数是一等公民，它不仅拥有一切传统函数的使用方式（声明和调用），还可以做到像原始值一样赋值、传参、返回，这样的函数也称之为第一级函数（First-class Function））
闭包是在函数开始执行时分配的堆栈帧，并且在函数返回后不会释放（就像“堆栈帧”分配在堆上而不是栈上！）。

#####Example 2 以下代码返回一个函数的引用：

function sayHello2(name) {
  var text = 'Hello ' + name; // Local variable
  var say = function() { console.log(text); }
  return say;
}
var say2 = sayHello2('Bob');
say2(); // logs "Hello Bob"
复制代码

大多数JavaScript程序员都了解如何将一个函数的引用赋给上述代码中的变量say2。如果你不了解，那么在学习闭包之前你需要先了解一下。一个使用C的程序员会将其看作是返回指向某函数的指针，会认为变量say和say2都是指向函数的指针。 C语言指向函数的指针和JavaScript的函数引用之间存在着很关键的区别。在JavaScript中，您可以将函数引用变量看作既包含指向函数的指针，也包含指向闭包的隐藏指针。

上述代码中存在一个闭包，因为匿名函数function() { console.log(text); }在另一个函数sayHello2()中声明。在这个例子中，如果你在另一个函数体里使用function关键字，那么你正在创建闭包。

在C语言和其他大多数类似语言中，在函数返回后，所有局部变量不可再被访问，因为堆栈帧已经被销毁了。

而在Javascript语言中，如果你在一个函数体内再声明一个函数，这个函数被返回到了全局，局部变量依然可以被访问。如上面所示，我们在函数sayHello2()返回后调用了函数say2()，请注意，变量text是函数sayHello2()的局部变量。

function() { console.log(text); } // Output of say2.toString();
复制代码

注意say2.toString()的输出，我们可以看到这段代码引用了变量text，由于sayHello2()的局部变量被保存到闭包内，所以这个匿名函数可以引用存储"Hello Bob"的变量text。

在Javascript中函数引用包含指向它所创建的闭包的隐藏指针就类似于js中的事件委托（一个事情本需要自己做，但自己委托给别人做了）。

##更多案例出于某种原因，闭包似乎很难理解，但是当你多看一些案例之后，它的工作原理变得逐渐清晰（我花了很长时间才搞清楚）。我建议你仔细研究这些案例，直至弄明白闭包是如何工作的。如果你在没弄明白之前就使用闭包，就一定会碰到一些非常奇怪的错误。 #####Example 3 这个案例表明，局部变量没有被复制，而是它们的引用被保存。就好像当外部函数退出后在内存保留一个堆栈帧。

function say667() {
  // Local variable that ends up within closure
  var num = 42;
  var say = function() { console.log(num); }
  num++;
  return say;
}
var sayNumber = say667();
sayNumber(); // logs 43
复制代码

#####Example 4 所有这三个全局函数都有一个对同一个闭包的共同引用，因为它们都是在同一个setupSomeGlobals()函数中声明的。

var gLogNumber, gIncreaseNumber, gSetNumber;
function setupSomeGlobals() {
  // Local variable that ends up within closure
  var num = 42;
  // Store some references to functions as global variables
  gLogNumber = function() { console.log(num); }
  gIncreaseNumber = function() { num++; }
  gSetNumber = function(x) { num = x; }
}

setupSomeGlobals();
gIncreaseNumber();
gLogNumber(); // 43
gSetNumber(5);
gLogNumber(); // 5

var oldLog = gLogNumber;

setupSomeGlobals();
gLogNumber(); // 42

oldLog() // 5
复制代码

这三个函数共用一个闭包——三个函数被定义时，函数setupSomeGlobals()的局部变量。请注意，在上述案例中，如果再次调用setupSomeGlobals()，则会创建一个新的闭包（堆栈帧）。旧的gLogNumber, gIncreaseNumber, gSetNumber变量被具有新闭包的新函数覆盖（在Javascript中，无论何时在另一个函数内声明一个函数，每次调用外部函数时都会重新创建内部函数）。

#####Example 5 这个案例对于许多人来说是一个大难题，你需要仔细理解一下。如果你要在一个循环体中定义一个函数，要非常小心，闭包中的局部变量可不会想你想当然那样工作。

function buildList(list) {
    var result = [];
    for (var i = 0; i < list.length; i++) {
        var item = 'item' + i;
        result.push( function() {console.log(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() //logs "item2 undefined" 3 times
复制代码

这行代码result.push( function() {console.log(item + ' ' + list[i])} );所示，将一个匿名函数的引用添加到result数组中三次。如果你对匿名函数不熟悉，也可当成如下：

pointer = function() {console.log(item + ' ' + list[i])};
result.push(pointer);
复制代码

请注意，当案例执行时，"item2 undefined"会输出三次！这是因为跟之前案例一样，buildList的局部变量只有一个闭包。当在执行fnList[j]()调用匿名函数时，三个匿名函数都共用一个闭包，并且它们使用的是循环结束后的当前值作为该闭包中的i和item（循环已完成，i的值为3，item值为"item2"）。请注意，该循环从0开始索引，到循环结束前item值为"item2"，而i ++会将i值增加到3。

#####Example 6 此案例显示：在外部函数退出前，外部函数内声明的所有全局变量都包含在闭包内。请注意，变量alice实际上是在匿名函数之后声明的，匿名函数是最先声明的，当该函数被调用时，它仍然可以访问alice变量，因为该变量处于相同作用域内（Javascript声明提升）。另外，sayAlice()()只是直接调用从sayAlice()返回的函数引用。

function sayAlice() {
    var say = function() { console.log(alice); }
    // Local variable that ends up within closure
    var alice = 'Hello Alice';
    return say;
}
sayAlice()();// logs "Hello Alice"
复制代码

需要注意的是：say变量也在闭包中，可以通过sayAlice()中任何可能声明的其他函数访问，或者可以在内部函数内递归访问。

#####Example 7 最后这个案例表明，每次调用外部函数都会为局部变量创建一个单独的闭包。不是每个函数声明都有单独闭包，而是每次函数调用都会创建一个闭包。

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);
        console.log('num: ' + num +
            '; anArray: ' + anArray.toString() +
            '; ref.someVar: ' + ref.someVar + ';');
      }
}
obj = {someVar: 4};
fn1 = newClosure(4, obj);
fn2 = newClosure(5, obj);
fn1(1); // num: 5; anArray: 1,2,3,5; ref.someVar: 4;
fn2(1); // num: 6; anArray: 1,2,3,6; ref.someVar: 4;
obj.someVar++;
fn1(2); // num: 7; anArray: 1,2,3,5,7; ref.someVar: 5;
fn2(2); // num: 8; anArray: 1,2,3,6,8; ref.someVar: 5;
复制代码

总结

如果对闭包并不完全明白，那么最好的办法就是回过头研究研究这些案例。我对闭包和堆栈帧等概念的解释可能在专业上并不完全正规，这都是为了帮助大家更好地理解。一旦这些基础知识得到掌握，你可以在以后的日子里去抠那些更专业的细节。

最后几点

任何时候，你在一个函数体内用了另外一个函数，闭包就产生了。
任何时候，你在一个函数体内用了eval()，闭包就产生了。在eval中的内容可以引用函数里的局部变量，你甚至可以在eval内声明新的局部变量，比如：eval('var foo = ...')。
当你在一个函数体内使用构造函数(new Function(...))，不会产生闭包（这个构造函数不能引用外部函数的局部变量）。
Javascript中的闭包就像外部函数返回后，用来保存所有局部变量的存储副本一样。
最好可以这样认为：闭包只是一个函数的入口，函数的局部变量被添加到这个闭包中。
每次调用一个带有闭包的函数时，都会保存一组新的局部变量（假定该函数内包含一个函数声明，并且返回到外部，或者以某种方式为其保留外部引用）。
两个函数可能看起来代码相同，但是由于“隐藏”的闭包，它们有着完全不同的行为。我并不认为通过Javascript代码可以很容易看出一个函数引用是否拥有闭包。
如果你想进行动态修改代码（比如：myFunction = Function(myFunction.toString().replace(/Hello/,'Hola'));），如果myFunction是闭包，将行不通（当然，你应该永远不会想要这样进行源代码字符串替换，但是……）。
很可能出现这种情况：在函数体内的函数声明中还有函数声明，那么你会发现有不止一个层级上的闭包出现。
我怀疑Javascript中的闭包和那些函数式语言的闭包不同。