理解闭包

Posted 2021-01-06 dgqboke

理解闭包

一、概念

JS词法作用域： 和其他大多数现代编程一样，JS也采用词法作用域，也就是说，函数的执行依赖于变量作用域，这个作用域是在函数定义时决定的，而不是函数调用时决定的。为了实现这种词法作用域，JS函数对象的内部状态不仅包含函数的代码逻辑，还必须引用当前的作用域链。

闭包概念：函数对象可以通过作用域链相互关联起来，函数体内部的变量都可以保存在函数作用域内，这种特性在计算机科学文献中称为"闭包"。

从技术的角度讲，所有的JS函数都是闭包：它们都是对象，它们都关联到作用域链。定义大多数函数时的作用域链在调用函数时依然有效，但这并不影响闭包。当调用函数时闭包所指向的作用域链和定义函数时的作用域链不是同一个作用域时，事情就变得非常微妙。

嵌套的函数闭包：当一个函数嵌套了另外一个函数，外部函数将嵌套的函数对象作为返回值返回的时候往往会发生这种事情。有很多强大的编程技术都利用到了这类嵌套的函数闭包，以至于这种编程模式在JS中非常常见。

 

二、理解闭包

理解闭包首先要了解嵌套函数的词法作用域规则。例：

var scope = "global scope";  //全局变量
function checkscope(){
   var scope = "local scope";   //局部变量
   function f(){ return scope; } //在作用域中返回这个值
   return f();
}
checkscope()     //=>"local scope"

 

checkscope()函数声明了一个局部变量，并定义了一个函数f()，函数f()返回了这个变量的值，最后将函数f()的执行结果返回。

将上面的代码进行一点改动，看代码返回：

var scope = "global scope"; //全局变量
function checkscope(){
var scope = "local scope";   //局部变量
function f(){ return scope; } //在作用域中返回这个值
return f;
}
checkscope()()     //=>"local scope"

在上面这段代码中，checkscope()现在仅仅返回函数内嵌套的一个函数对象，而不是直接返回结果。

在定义函数的作用域外面，调用这个嵌套的函数（包括最后一行代码的最后一对圆括号）：

回想一下词法作用域的基本规则：JS函数的执行用到了作用域链，这个作用域是函数定义的时候创建的。嵌套的函数f()在这个作用域链里，其中的变量scope一定是局部变量，不管在何时何地执行函数f(),这种绑定在执行f()时依然有效。因此最后一行代码返回 "local scope" 而不是 "global scope"。

简而言之，闭包的这个特性强大到让人吃惊：它们可以捕捉到局部变量（和参数），并一直保存下来，看起来像这些变量绑定到了在其中定义它们的外部函数。

 

三、实现闭包

 

如果你理解了词法作用域的规则，你就能很容易地理解闭包： 函数定义时的作用域链到函数执行时依然有效。 然而很多程序员觉得闭包非常难理解，因为他们觉得在外部函数中定义的局部变量在函数返回后就不存在了（这种想法是因为很多人认为函数执行结束后，与之相关的作用域链似乎也不存在了，但在JS中并非如此）。

 

定义作用域链：我们将作用域链描述为一个对象列表，不是绑定的栈。每次调用JS函数的时候，都会为之创建一个新的对象用来保存局部变量，把这个对象添加至作用域链中。

 

当函数返回的时候，就从 作用域链 中将这个绑定变量的对象删除。如果不存在嵌套的函数，也没有其他引用指向这个 绑定对象，它就会被当作垃圾回收掉。

 

如果定义了嵌套的函数，每个嵌套的函数都各自对应一个作用域链，并且这个作用域链指向一个变量绑定对象。

 

但如果这些嵌套的函数对象在外部函数中保存下来，那么它们也会和所指向的 变量绑定对象一样当作垃圾回收。

 

但如果这个函数定义了嵌套的函数，并将它作为返回值返回或者存储在某处的属性里，这时就会有一个外部引用指向这个嵌套的函数。它就不会被当作垃圾回收，并且他所指向的 变量绑定对象 也不会被当作垃圾回收

 

四、闭包实现的几个例子

 

例子一：

 

定义一个uniqueInteger()函数：这个函数使用自身的一个属性来保存每次返回的值，以便每次调用都能跟踪上次的返回值，但这种做法有一个问题，就是恶意代码可能将计数器重置或者把一个非整数赋值给它，导致uniqueInteger()函数不一定能产生"唯一"的 "整数"。

var uniqueInteger = (function(){  //定义函数并立即调用
      var counter = 0;
      return function(){ return counter++;}
}());
console.log(uniqueInteger);  //function
console.log(uniqueInteger()); //0
console.log(uniqueInteger()); //1 
console.log(uniqueInteger()); //2

代码分析：

粗略来看，第一行代码看起来想将函数赋值给一个变量uniqueInteger，实际上，这段代码定义了一个立即调用的函数，因此是这个函数的返回值赋值给变量uniqueInteger。

这个函数返回另外一个函数，这是一个嵌套的函数，我们将它赋值给变量uniqueInteger,嵌套的函数是可以访问作用域内的变量的，而且可以访问外部函数中定义的counter变量。

当外部函数返回之后，其他任何代码都无法访问counter变量，只有内部的函数才能访问到它。

 

例子二：

counter 函数：像counter一样的私有属性不是只能用在一个单独的闭包内，在同一个外部函数内定义的多个嵌套函数也可以访问它，这多个嵌套函数都共享一个作用域链：

function counter(){
    var n = 0;
     return {
      count : function(){ return n++; },
      reset : function(){ n = 0; }
     };
}
var c = counter(), d = counter(); //创建两个计数器
c.count()     //=>0
d.count()     //=>0
c.reset()      //reset()和count() 方法共享状态
c.count()     //=>0: 因为我们重置了c
d.count()    //=>1:而没有重置d

代码分析：

counter()函数返回了一个 "计数器" 对象，这个对象包含两个方法：count()返回下一个整数，reset()将计数器重置为内部状态。

首先要理解，这两个方法都可以访问私有变量n。再者，每次调用counter()都会创建一个新的作用域链和一个新的私有变量。

因此，如果调用counter()两次，则会得到两个计数器对象，而且彼此包含不同的私有变量，调用其中一个计数器对象的count()或reset()不会影响到另一个对象。

 

例子三：

将这个闭包合并为属性存取器方法getter和setter:下面这个代码所示的counter()函数中的私有状态的实现是利用了闭包，而不是利用普通的对象属性来实现：

function counter(n){    //函数参数n是一个私有变量
   return {
       //属性getter方法返回并给私有计数器var递增1
        get count(){ return n++; },
            //属性setter不允许n递减
            set count(m){ 
              if(m >=n ) 
              n = m; 
              else 
              throw Error("count can only be set a larger value"); }
     };
 }
var c = counter(1000);
c.count  //=>1000
c.count  //=>1001
c.count = 2000
c.count //=>2001

代码分析：
需要注意的是，这个版本的counter()函数并未声明局部变量，而只是使用参数n来保存私有状态，属性存取器方法可以访问n。这样的话，调用counter()的函数就可以指定私有变量的初始值了。

 

例子四：

addPrivateProperty()函数:这个函数定义了一个私有变量，以及两个嵌套的函数用来获取和设置这个私有变量的值。

利用闭包实现的私有属性存取器方法：

//这个函数给对象o增加了属性存取器方法，方法名称为get<name>和set<name>。
//如果提供了一个判定函数setter方法就会用它来检测参数的合法性，然后在存储它
//如果判定函数返回false，setter方法抛出一个异常
//这个函数有一个非同寻常之处，就是getter和setter函数，所操作的属性值并没有存储在对象o中。相反，这个值仅仅是保存在函数中的局部变量中
//getter和setter方法同样是局部函数，因此可以访问这个局部变量
//也就是说，对于两个存取器方法来说这个变量是私有的，没有办法绕过存取器方法来设置或修改这个值

function addPrivateProperty(o,name,predicate){
     var value; //这是一个属性值
     //getter方法简单地将其返回
     o["get"+name] = function(){ return value; };
     //setter方法首先检查值是否合法，若不合法就抛出异常，否则就将其存储起来
      o["set"+name] = function(v){ 
      if (predicate && !predicate(v))
            throw Error("set"+name+": invalid value" +v);
       else
            value = v;  
       };
 }


//addPrivateProperty()方法
var o = {}; //设置了一个空对象
//增加属性存储器方法getName()和setName()
//确保只允许字符串值
addPrivateProperty(o,"Name",function(x){ return typeof x=="string"; });
o.setName("Frank"); //设置属性值
console.log(o.getName()); //得到属性值
o.setName(0);      //试图设置一个错误类型的值

例子五：

在同一个作用域链中定义两个闭包，这两个闭包共享同样的私有变量或变量。这是一种非常重要的技术，但还是要特别小心那些不希望共享的变量往往不经意间共享给了其它的闭包。

//这个函数返回一个总是返回v的函数
function constfunc(v){
     return function(){ return v; };
 }
//创建一个数组用来存储常数函数
var funcs = [];
for(var i = 0;i<10;i++) funcs[i] = constfunc(i);
funcs[5]() //=>5

这段代码利用循环创建了很多个闭包，当写类似这种代码的时候往往会犯一个错误：那就是试图将循环代码移入定义这个闭包的函数之内。

//返回一个函数组成的数组，它们的返回值是0-9
function constfuncs(){
var funcs = [];
for(var i = 0 ;i <10;i++)
    funcs[i] = function(){ return i; };
     return funcs;
}
var funcs = constfuncs();
funcs[5]() //=》10

当constfuncs()返回时，变量i的是10，所有的闭包都共享这一个值，因此，数组中的函数的返回值都是同一个值，这不是我们想要的结果。

关联到闭包的作用域链都是"活动的"，这一点非常重要。

嵌套的函数不会将作用域内的私有成员复制一份，也不会对所绑定的变量生产静态快照。

 

书写闭包需要注意的事情：

this是js的关键字，而不是变量。正如之前讨论的，每个函数调用都包含一个this值，如果闭包在外包函数里是无法访问this的，除非外部函数将this转存为一个变量：

var self = this； //将this保存至一个变量中，以便嵌套的函数能够访问它

绑定arguments的问题与之类似。arguments并不是一个关键字，但在调用每个函数时都会自动声明它，由于闭包具有自己所绑定的arguments，因此闭包内无法直接访问外部函数的参数数组，除非外部函数将参数数组保存到另外一个变量中：

var outerArguments = arguments; //保存起来以便嵌套的函数能使用它