理解JS闭包

喜欢ヅ旅行 2022-06-16 12:09 249阅读 0赞

闭包，是 Javascript 比较重要的一个概念，对于初学者来讲，闭包是一个特别抽象的概念，特别是ECMA规范给的定义，如果没有实战经验，很难从定义去理解它。因此，本文直接从代码角度来理解闭包。

## **1、什么是闭包？** ##

先看一段代码

function A(){ 
        function B(){ 
           console.log("Hello Closure!");
        }
        return B;
    }
    var C = A();
    C();//Hello Closure!

这是最简单的闭包。有了初步认识后，我们简单分析一下它和普通函数有什么不同，上面代码翻译成自然语言如下：  
　　（1）定义普通函数 A  
　　（2）在 A 中定义普通函数B  
　　（3）在 A 中返回 B  
　　（4）执行 A, 并把 A 的返回结果赋值给变量 C  
　　（5）执行 C  
　　把这5步操作总结成一句话就是：函数A的内部函数B被函数A外的一个变量C引用。

把这句话再加工一下就变成了闭包的定义：当一个内部函数被其外部函数之外的变量引用时，就形成了一个闭包。因此，当你执行上述5步操作时，就已经定义了一个闭包！

另一段代码1

function a(){ 
      var n = 0;
      function inc() { 
        n++;
        console.log(n);
      }
      inc(); 
      inc(); 
    }
    a(); //控制台输出1，再输出2

变式代码2

function a(){ 
      var n = 0;
      this.inc = function () { 
        n++; 
        console.log(n);
      };
    }
    var c = new a();
    c.inc();  //控制台输出1
    c.inc();  //控制台输出2

这就是闭包！有权访问另一个函数作用域内变量的函数都是闭包。这里 inc 函数访问了构造函数 a 里面的变量 n，所以形成了一个闭包。

再来看另一段代码3：

function counter(){ 
      var n = 0;
      function inc(){ 
        n++; 
        console.log(n);
      }
      return inc;//这里将函数对象返回
    }
    var c = counter();
    c();  //控制台输出1
    c();  //控制台输出2

看看是怎么执行的：var c = couter()，这一句 couter()返回的是函数 inc，那这句等同于 var c = inc;至于c()，这一句等同于 inc(); 注意，函数名只是一个标识（指向函数的指针），而()才是执行函数。后面三句翻译过来就是： var c = inc; inc(); inc();这跟上一段代码有区别吗？ 没有。

为啥要这样写？我们知道，js的每个函数都是一个个小黑屋，它可以获取外界信息，但是外界却无法直接看到里面的内容。将变量 n 放进小黑屋里，除了 inc 函数之外，没有其他办法能接触到变量 n，而且在函数 counter 外定义同名的变量 n 也是互不影响的，这就是所谓的增强“封装性”。而之所以要用 return 返回函数标识 inc，是因为在 counter函数外部无法直接调用 inc 函数，所以 return inc 与外部联系起来，代码 2 中的 this 也是将 inc 与外部联系起来而已。

## **2、闭包的用途** ##

在了解闭包的作用之前，我们先了解一下 Javascript 中的GC机制: 在 Javascript 中，如果一个对象不再被引用，那么这个对象就会被 GC 回收，否则这个对象一直会保存在内存中。在上面给出的第一段代码示例中，B 定义在 A 中，因此 B 依赖于 A ,而外部变量 C 又引用了 B , 所以A间接的被 C 引用。也就是说，A 不会被 GC 回收，会一直保存在内存中。为了证明我们的推理，对第一个代码示例稍作改进：

function A(){ 
        var count = 0;
        function B(){ 
           count ++;
           console.log(count);
        }
        return B;
    }
    var C = A();
    C();// 1
    C();// 2
    C();// 3

count 是函数A 中的一个变量，它的值在函数B 中被改变，函数B 每执行一次，count 的值就在原来的基础上累加 1 。因此，函数A中的 count 变量会一直保存在内存中。当我们需要在模块中定义一些变量，并希望这些变量一直保存在内存中但又不会“污染”全局的变量时，就可以用闭包来定义这个模块。

## **3、编写闭包的常见陷阱** ##

乍一看，以为输出 0~9 ，万万没想到输出10个10？ 这里的陷阱就是：函数带()才是执行函数！ 单纯的一句 var f = function() \{ alert(‘Hi’); \}; 是不会弹窗的，后面接一句 f(); 才会执行函数内部的代码。上面代码翻译一下就是：

为什么只垃圾回收了result，但却不回收i呢？ 因为 i还在被 function引用着啊。好比一个餐厅，盘子总是有限的，所以服务员会去巡台回收空盘子，但还装着菜的盘子他怎么敢收？ 当然，你自己手动倒掉了盘子里面的菜（=null），那盘子就会被收走了，这就是所谓的内存回收机制。

至于i的值怎么还能保留，其实从文章开头一路读下来，这应该没有什么可以纠结的地方。盘子里面的菜，吃了一块不就应该少一块吗？

闭包就是一个函数引用另外一个函数的变量，因为变量被引用着所以不会被回收，因此可以用来封装一个私有变量，在面向对象的程序设计语言里，比如Java和C++，要在对象内部封装一个私有变量，可以用private修饰一个成员变量，在没有class机制，只有函数的语言里，借助闭包，同样可以封装一个私有变量。这是优点也是缺点，不必要的闭包只会徒增内存消耗！另外使用闭包也要注意变量的值是否符合你的要求，因为他就像一个静态私有变量一样。闭包通常会跟很多东西混搭起来，接触多了才能加深理解。

上面的闭包陷阱示例代码运行结果与预期不同的原因在于：返回的函数引用了循环变量i，但函数并非立刻执行，等到10个函数都返回时，它们所引用的变量i已经变成了10，因此最终结果为10。

返回闭包时牢记的一点就是：返回函数不要引用任何循环变量，或者后续会发生变化的变量。如果一定要引用循环变量怎么办？方法是再创建一个函数，用该函数的参数绑定循环变量当前的值，无论该循环变量后续如何更改，已绑定到函数参数的值不变，具体将代码改进如下：

//改进代码1
    function createFunctions(){ 
        var result = new Array();
        for (var i=0; i < 10; i++){
            result[i] = (function(n){ 
                return function(){ 
                    return n;
                }
            })(i);
        }
        return result;
    }
    
    var funcs = createFunctions();
    for (var i=0; i < funcs.length; i++){
        console.log(funcs[i]());
    }

注意这里用了一个“创建一个匿名函数并立刻执行”的语法：。

(function (x) { return x; })(3); // 3

理论上讲，创建一个匿名函数并立刻执行可以这么写：

function (x) {  return x; } (3);

但是由于JavaScript语法解析的问题，会报SyntaxError错误，因此需要用括号把整个函数定义括起来：

(function (x) { return x * x }) (3);

从控制台中可以看到返回的funcs数组中存放的是10个函数，后续的funcs\[i\]()；语句才开始执行函数。

![SouthEast][]

执行下面这段改进代码2也能得到0-9的输出，但是与上面的改进代码1有本质不同：

//改进代码2
    function createFunctions(){ 
        var result = new Array();
        for (var i=0; i < 10; i++){
            result[i] = (function(n){ 
                return i;
            })();
        }
        return result;
    }
    var funcs = createFunctions();
    for (var i=0; i < funcs.length; i++){
        console.log(funcs[i]);
    }

在改进代码2 中，返回的funcs数组中存放的是10个Number，后续的funcs\[i\]；语句只是访问数组中的Number操作。

![SouthEast 1][]

--------------------

参考资料：  
1、[http://www.cnblogs.com/qieguo/p/5457040.html][http_www.cnblogs.com_qieguo_p_5457040.html]  
2、[http://www.jb51.net/article/83524.htm][http_www.jb51.net_article_83524.htm]

[SouthEast]: /images/20220616/f896008bdbf244f8a8c29ef346fb6ab0.png
[SouthEast 1]: /images/20220616/a93043c48ba9415485189ebf5d0be413.png
[http_www.cnblogs.com_qieguo_p_5457040.html]: http://www.cnblogs.com/qieguo/p/5457040.html
[http_www.jb51.net_article_83524.htm]: http://www.jb51.net/article/83524.htm