javascript难点理解-闭包

今天，看到javaScript闭包这一块的地方，不得不说，第一次接触这样的函数行为，是很难理解的，也是研究了半天，才总算理解了闭包这个牛逼的“东西”；

首先，什么是闭包，简单来说，就是内部函数（inner function）可以访问外部函数（outer function）的变量以及参数（注意inner function不能直接调用outer function的arguments对象，但可以直接使用参数）；由于，有作用域链（scope chain）的存在，导致闭包在outer function即使在被调用之后，inner function依然可以访问outer function的变量，这意味着，本来应该被销毁的局部变量，却一直保留在了内存中。

下面看一个简单的闭包例子：

function showName(firstName,lastName) {
  var nameInfo="My name is ";

  function makeFullName() {

  return nameInfo+firstName+" "+lastName;

  }

return makeFullName;

}

showName("athan","Zhang")();

//会显示My name is athan Zhang

上面这个例子，简单的解释了一下内部函数可以直接调用外部函数的变量，以及直接使用外部函数的参数。

接下来，看一个比较复杂的情况：

function celebrityIDCreator (theCelebrities) {

  var i;

  var uniqueID = 100;

  for (i = 0; i < theCelebrities.length; i++) {

  theCelebrities[i]["id"] = function ()  {

  return uniqueID + i;

  }

}

  return theCelebrities;

}
    var actionCelebs = [{name:"Stallone", id:0}, {name:"Cruise", id:0},{name:"Willis", id:0}];   

    var createIdForActionCelebs = celebrityIDCreator (actionCelebs);

    var stalloneID = createIdForActionCelebs [0];

    console.log(stalloneID.id());

    var cruiseID = createIdForActionCelebs [1];

    console.log(cruiseID.id());

这个例子中，console打印出的结果都是103。因为var createIdForActionCelebs = celebrityIDCreator (actionCelebs) 这里在调用外部函数celebrityIDCreator时，完成了外部函数里面定义的语句块的内容，这也意味着，for循环也执行完毕，数组theCelebrities的id属性被赋予了函数表达式，但这个内部函数此时并没有被调用。在后面stalloneID.id()显示调用内部函数时，返回了uniqueID+i的值，而外部函数早已调用完毕，此时的i的值，已经是3，所以，无论调用theCelebrities数组里面哪一个对象，返回的值都是一样的，这也是闭包存在的一个问题，那怎么解决这个问题呢，得看下面的例子。

  function celebrityIDCreator (theCelebrities) {
    var i;

    var uniqueID = 100;

    for (i = 0; i < theCelebrities.length; i++) {

    theCelebrities[i]["id"] = function (j)  { 

    return function () { return uniqueID + j; } () ;

    } (i); 

  }

  return theCelebrities;

  }
  var actionCelebs = [{name:"Stallone", id:0}, {name:"Cruise", id:0}, {name:"Willis", id:0}];

  var createIdForActionCelebs = celebrityIDCreator (actionCelebs);

  var stalloneID = createIdForActionCelebs [0];

  console.log(stalloneID.id); // 100

  var cruiseID = createIdForActionCelebs [1];

  console.log(cruiseID.id);

这个例子里，使用了一种Immediately Invoked Function Expression（立刻调用函数表达式）的语法。上面的函数表达式function(j){/code/}(i)，直接在赋值时就调用了，而且将i的值赋给了j，同样闭包里面也用了同样的语法，这样就可以在循环时，就直接调用内部函数，得到想要的值，这个例子里面打印的就是100和101。

有一点需要注意的是，函数表达式function(j){/code/}(i)和函数声明是不一样的，如果在以为函数声明时，在函数后面加上（）这个括号，就是直接调用函数，是会出错的，因为编译器认为这个是函数声明，而不是函数表达式。但是如果用一个括号，将整个函数声明包起来，编译器会认为是一个表达式，就不会报错，如下面所示：

javascript难点理解-闭包

推荐阅读更多精彩内容