谈谈JavaScript核心灵魂之闭包

"闭包"是js里面一个很重要的概念，理解起来有点饶。标准的定义我就不再多说，这里主要通过一个列子分享一下我自己的理解。每个函数都可以访问其外围作用域的所有变量。闭包就是指一些函数通过某种方式，可以随时被访问，即使它的外部代码已经被执行完毕。下面通过一个例子来理解。

//假设aHero()、aFoil()、aDeed()是一个已经定义的产生随机字符的函数
var hero = aHero();
var newSaga = function(){ var foil = aFoil(); 
   var saga= function(){ 
     var deed = aDeed();
      log(hero+deed+foil);
    }; 
saga(); saga();
};
newSaga();newSaga();

首先我们来分析函数运行时，内存作用域里的变化情况。
代码执行到newSage( )上一行时，内存的情况应该是这样的

这里的绿色区域代表全局作用域，此时注意newSaga函数并未被执行。
在第一个newSage( )函数执行时，截止到newSage( )内部第一个函数saga( )，内存的情况应该是这样的

红色部分代表函数newSaga( )创建的作用域。这里强调一下，函数只有在执行时才会创建内存作用域，而不是在函数定义时。此时saga被赋值指向一个新的函数，第一个saga( )函数执行，它在newSaga( )的内存作用域里面又创建了一个新的内存作用域，用蓝色表示。此时deed被赋值为"Eyes"。此时执行log(hero+deed+foil)；首先查找变量hero，发现此函数的内存作用域即蓝色部分没有，然后向外层红色部分查找，发现也没有，继续想外层查找，在全局作用域找到了hero，查找deed时候在本函数内存作用域里就找到了，因此不必再向外层查找。foil在本函数内存作用域没找到，向外层查找，在newSaga( )的内存作用即红色部分找到了。因此此时输出"GalEyesCow"。
然后第二个saga( )函数执行，此时它会再建立一个内存作用域

此时应该输出"GalTipsCow"。
至此，第一次调用newSaga( )的过程结束。
然后是第二次执行newSaga( )

注意这里虽然第一个saga( )函数和第二个saga( )函数都是由同一段代码创建的，可是他们并不相等，这是两个不同的函数。这次会输出"GalRubsCat"和"GalRobsCat"。
到此，我们明白了内存作用域的概念。正常来讲，当newSaga( ) 函数调用完成，里面的saga( ) 函数应该再也无法被访问。那么我们能不能想一个方法，使得即使newSaga( ) 函数调用完成，我们依然可以保留对saga( ) 函数的引用呢？
答案是只要我们将此函数引用到全局变量就可以保存下来了。我们创建一个全局变量来保存saga( )

var sagas = [];
var hero = aHero();
var newSaga = function(){ 
var foil = aFoil(); 
sagas.push(function(){ 
var deed = aDeed();
 log(hero+deed+foil); 
}); 
sagas[0](); sagas[0]();
};
newSaga();
newSaga();

此时，我们就可以随时调用saga( )函数，即使是在创建它们的函数newSaga运行完毕以后。
现在我们把saga( )函数的运行移到两次newSaga( )函数的调用之间

var sagas = [];
var hero = aHero();
var newSaga = function(){ 
var foil = aFoil(); 
sagas.push(function(){ 
var deed = aDeed(); 
log(hero+deed+foil); });};
newSaga();
sagas[0]();
sagas[0]();
newSaga();

此时当第一次newSaga()函数被执行时，内存作用域情况是这样

此时，数组sagas[ ]已经有了一个元素{ f };那么再往下运行函数sagas0的时候，它会在哪里创建新的内存作用域呢？此时创建它的函数newSaga()已经执行完毕并且返回。
答案是红色区域。因为一个新的环境永远都被创建在其函数被定义的环境之中。
此时输出"BoyEyesRat"。然后运行第二次sagas0 此时输出"BoyDigsRat"。然后运行第二次的newSaga( )
注意此时的sagas[]数组有了两个函数{ f };在程序结束前我们多次调用这两个不同的saga;
var sagas = [];var hero = aHero();var newSaga = function(){ var foil = aFoil(); sagas.push(function(){ var deed = aDeed(); log(hero+deed+foil); });};newSaga();sagas0;sagas0;newSaga();sagas0;//此时输出”BoyPinsRat“，见下图sagas1;sagas0; 此时运行到下一个sagas0；程序输出”BoyPinsRat“.再往下执行sagas1;会在第二个红色区域里创建新的内存作用域
此时输出"BoyGetsET"
那么当我们运行最后一行代码sagas0时，是在第一个红色区域内创建内存区域呢还是在第二个红色区域创建内存区域呢？ 答案是第一个，因为我们调用的是第一个函数。
此时输出"BoyEatsRat"
至此，对"闭包"的概念已经解释完，总结一下，就是一个函数的内部函数存储到外部变量，这样就可以在外部的任何时候调用该内部函数，即使是创建该函数的函数已经执行完毕。
那么闭包都怎么应用呢？ 一个场景就是可作为对象方法使用的函数，也就是被储存为对象属性的函数，每当你看到一个函数的输入参数是静态的，也就是说每次调用函数时，该参数并不会使用一个新的值，这时你就可以重构代码了，将这个值存储在一个外部作用域的变量中。根据闭包原理，内层的函数随时可以访问其外层作用域中的变量，即使外层函数已经返回。

作者：长梦未央
图片来源：优达学城付费课程
个别文字摘自教学视频老师的讲解