谈谈闭包

写在前面：本文案例除特别指明，默认基于chrome mac版。你可能想：闭包么难道还有浏览器差别么？！嘿嘿，你且看来：

按个人理解，闭包就是能够在函数外面访问其内部变量的一种方式。由于你们都知道，javascript执行时遵循一个隐式的做用域链，查询变量的值时将沿做用域链一路向上查找。
先看看常规方法和闭包的不一样：

 
 
 
 
 

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

 
 
 
 
 
var i='global';var func=function(){ console.log(i);}func();

此时的输出为'global'。

这就是常规做用域链的最简单的例子，当咱们在执行func()方法时，由于其内部并无定义i，因此它开始向上查找i值，最终在全局环境中找到i.

 
 
 
 
 

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

 
 
 
 
 
var i='global';function constfuncs(){ var i=10; var func=function(){ console.log(i); } return func;}var f=constfuncs();f();

此时的输出为10。

此例中f函数和上例中的func函数同样，在执行时都没有在自身的上下文中找到i值。但不一样的是，func函数向上一级查找是到全局环境，而此例中f方法却找到了constfuncs中。啊哈，这就是今天讲的闭包。闭包能够访问到另外一个函数的局部变量呢～
在js中，若是函数执行完，正常状况下，该函数的局部变量将被销毁，外界并不会访问到该函数中的局部变量，好比：

 
 
 
 
 

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

 
 
 
 
 
function a(){ var i=10; console.log(i);//10}console.log(i);//undefined

可是本例中的constfuncs由于返回了一个函数变量，且该函数变量中又引用了constfuncs函数中的i，因此此时constfuncs在执行结束后，其中的变量并不会被销毁，而是要为它返回的函数"留着"。

且看下面的截图：
当f函数执行到console.log(i)时，它对应的上下文在调试器中很是清楚：Local指该函数的局部变量，Closure指的就是闭包变量，而Global为全局变量。此时找i值的顺序就是Local || Closure || Global
若是i值不是一个恒定的值，而是在外层函数执行中进行了一系列的变化，那么当调用返回的函数时，又执行了什么操做呢？

 
 
 
 
 

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

 
 
 
 
 
function constfuncs() { var funcs = []; for (var i = 0; i < 10; i++) { funcs[i] = function () { return i; } } return funcs;}var funcs = constfuncs();alert(funcs[1]());

此时的输出为10.

其实仔细来推敲一下，当向funcs数组添加项时，每项都是function(){console.log(i)}，这里i值只是简单指向外层的i值。当funcs1执行时，用到i值了，它开始去找闭包变量中的i，而此时i值已经固定，为10。因此，无论执行funcs中的哪一项，它用到i值时，都只能获得最终的i值。
打断点看清函数在执行时的上下文：Closure中的i值为10。

那么如何才能使funcs中的每项执行的时候，能用到"被定义时的真实环境"信息呢？也就是，"切断"与初始值i的一些联系，由于i最后又只是一个最终值....看下面 这样行不行：

 
 
 
 
 

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

 
 
 
 
 
function constfuncs() { var funcs = []; for (var i = 0; i < 10; i++) { var v = i; funcs[v] = function () { return v; }; } return funcs;}var funcs = constfuncs();console.log(funcs[1]());

我没获得一个i值就把它存成v，而后使用v来给funcs赋值，最后我再执行funcs中的函数时，不就不去访问i了嘛？就是访问v了，而每次都新建一个v呢～若是外层函数constfuncs每次都由于闭包的缘由把v存起来，我最后不是会有不少个v嘛？我好聪明耶！我都脑洞大开想了一通了，来实践一下：

结果....结果很让我失望，输出了9.....囧

为啥呢？
回头又仔细推敲下我刚才说的，存不少个v？？

人家为啥要给你存不少个 v啊？当constfuncs函数结束执行后，它会把闭包中要用到的变量存起来没错，可是人家不能记着执行过程都给你存着。注意：我之因此作这个实验是由于v和i我认为是不一样的，v是每次都新建一个，而i值是重复改写。浏览器说，你再来感觉下：

 
 
 
 
 

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

 
 
 
 
 
function constfuncs() { var i=10,j=30; var func=function(){ return i; } return func;}var f = constfuncs();console.log(f());

这里又展示出了浏览器的不妥协：我不光给你存个最终值，我连你用不到的值也不存。额...你好机智..
等等，咱们看看其余浏览器的处理，safari是这样的：

firefox和chrome是同样的处理方式，即能少则少：

说了这么多，咱们还没达到目的呢，刚才那个方法仍是被i牵着鼻子走呢？再来！

 
 
 
 
 

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

 
 
 
 
 
function construct(v) { return function(){ return v; }}function constfuncs() { var funcs = []; for (var i = 0; i < 10; i++) { funcs[i] = construct(i); } return funcs;}var funcs = constfuncs();console.log(funcs[4]());

哇哈！输出4!

这里的关键在于，我把i做为参数传给construct函数声称了一个新函数并赋予funcs中的每一项，而construct返回的每一个函数都是有其单独的闭包环境的，就是construct构造的闭包环境啦。且看：

因此，当闭包造成时，全部被用到的局部变量都被保存，参数也是如此。

总结

＊ 闭包，能够说是一个封闭的环境，对外给出的函数就像一个口子，打开闭包外访问内部的一个门。
＊ 当闭包会保存外部可能访问到的其内部的一切值，固然包含其外层函数的参数。
＊ 根据浏览器的不一样，当产生闭包时，值的保留有些会所有保留(如safari)，有些会保留用到的值(如chrome 和 firefox) 。

感谢看到最后～本人不才，还望能助你理解一二。若有不一样看法，还请留言。

来自为知笔记(Wiz)