javascript笔记-----------js闭包

一、概念

官方的回答：所谓“闭包”，指的是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。

额，看不懂。

<script type="text/javascript">
        function funDemo()
        {
            var count = 100;

            function printNum()
            {
                console.log(count);//引用外层函数变量
            }

            return printNum();//引用内部函数
        }

        funDemo();   //日志: 100
    </script>

如上如上所述，在JavaScript中，函数是对象，对象是属性的集合，而属性的值又可以是对象，则在函数内定义函数成为理所当然，如果在函数funDemo内部声明函数printNum，然后在函数外部调用printNum，这个过程即产生了一个闭包。

二、变量的作用域

<script type="text/javascript">

        var MainIndex = 10; //全局变量

        function funDemo() {
            console.log(mainIndex);
        }

        funDemo();   //日志: 10
    </script>

在函数内部可以直接读取全局变量MainIndex，但在外部无法读取函数内部定义的局部变量。

<script type="text/javascript">
        function funDemo() {
            var n = 20;
            console.log(mainIndex);
        }

        console.log(n);  //error: “n”未定义 
    </script>

在声明变量时需要注意，如果不使用var关键字将视为定义全局变量，如下：

<script type="text/javascript">
        function funDemo() {
            n = 20;            
        }
        funDemo();
        console.log(n);  //日志: 20  
    </script>

三、如何从外部读取函数内局部变量

在正常情况下这样是不可以的，所以我们需要通过一些变通来达到我们的目的。

<script type="text/javascript">
        function funDemo() {
            var n = 20;
            function printNum()
            {
                var n1 = 10;
                console.log(n);
            }
        }        
    </script>

函数printNum包含在funDemo函数中，这时funDemo中的所有变量相对于printNum来说都是“全局的”，所以在printNum中可以正常读取局部变量n。

反之，在funDemo函数中读取printNum的局部变量n1则会报错，这就是JavaScript中的“链式作用域”结构。因为这种结构子对象可以一级一级向上找

父对象的的变量，所以说父对象的所有变量对子对象来说都是可以正常读取的，但父对象读取子对象的变量则会报错。

这样来说，我们是不是就可以通过将上边的代码改造一下，将子对象printNum作为父对象funDemo的返回值就可以读取funDemo中的局部变量呢？

<script type="text/javascript">
        function funDemo() {
            var n = 20;
            function printNum()
            {                
                console.log(n);
            }
            return printNum;
        }

        var test = funDemo();
        test(); //日志: 20 
    </script>

通过这些代码我们对“闭包”有了粗浅的理解，闭包就是将函数内部和函数外部连接起来的一座桥梁。

对于理解“链式作用域”，有如下代码

<script type="text/javascript">
        var name = "The Window";
        var object = {
            name: "My Object",
            getNameFunc: function () {
                return function () {
                    return this.name;
                };
            }
        };
        console.log(object.getNameFunc()());  //The Window
    </script>

这段代码很好的解释了“链式作用域”结构，将它理解后也就可以算是理解闭包的运行机制了。

四、闭包的用途

闭包可以用在许多方面，最大的用处有两个，一个就是上面提到的读取函数内部的变量，另外一个就是将这些变量始终保持在内存中。

如何理解呢，请看如下代码：

    <script type="text/javascript">
        function funDemo() {
            var n = 20;

            addNum = function(){
                n++;
            }

            function printNum(){                
                console.log(n);
            }
            return printNum;
        }

        var test = funDemo();
        test(); //日志: 20 
        addNum();        
        test();//日志: 21 
    </script>

在这段代码中，test实际上就是闭包printNum函数。它一共运行了两次，第一次的值是20，第二次的值是21。这证明了，函数funDemo中的局部变量n一直保存在内存中， 并没有在funDemo调用后被自动清除。

为什么会这样呢？原因就在于funDemo是printNum的父函数，而printNum被赋给了一个全局变量，这导致printNum始终在内存中，而printNum的存在依赖于funDemo，因此funDemo也始终在内存中，不会在调用结束后，被垃圾回收机制“GC”回收。

这段代码中另一个值得注意的地方，就是“addNum = function(){n++;}”这一行，首先在addNum前面没有使用var关键字，因此 addNum是一个全局变量，而不是局部变量。其次，addNum的值是一个匿名函数，而这个匿名函数本身也是一个闭包，所以nAdd相当于是一个setter，可以在函数外部对函数内部的局部变量进行操作。

五、使用闭包的注意点

1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便

改变父函数内部变量的值。