闭包(closure)

大牛的讲解，点击

　　我们首先需要有作用域的概念，点击

　　

那么什么是闭包？

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

广义上的闭包就是指一个变量在它自身作用域的被使用了，就叫发生了闭包。粗鲁地理解：闭包就是能够读取其它函数内部变量的函数。 在js中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单粗暴地理解成“定义在一个函数内部的函数”,即一个函数嵌套了另一个函数。

闭包是很多语言都具备的特性,在js中,闭包主要涉及到js的几个其他的特性:

作用域链,垃圾(内存)回收机制,函数嵌套......

　　由于作用域的关系，我们在函数外部是无法直接访问到函数内部的变量的，但是函数内部可以把这个变量传给全局变量或者返回出来，这样外部作用域就可以访问函数内部作用域的变量了；

　　简单的说，闭包就是有权限访问另一个函数内部作用域的变量的函数；

1. javascript具有自动垃圾回收机制，函数运行完之后，其内部的变量和数据会被销毁；
2. 但是闭包就是在外部可以访问此函数内部作用域的变量，所以闭包的一个特点就是
3. script type="text/javascript">
4. function outer(){
5. var a = 1;
6. function inner(){
7. return a++; }
8. return inner;
9. }
10. var abc = outer(); //outer()只要执行过，就有了引用函数内部变量的可能，然后就会被保存在内存中； //outer()如果没有执行过，由于作用域的关系，看不到内部作用域，更不会被保存在内存中了； console.log(abc());//1 console.log(abc());//2 //因为a已经在内存中了，所以再次执行abc()的时候，是在第一次的基础上累加的 var def = outer(); console.log(def());//1 console.log(def());//2 //再次把outer()函数赋给一个新的变量def，相当于绑定了一个新的outer实例； //console.log(a);//ReferenceError: a is not defined //console.log(inner);//ReferenceError: a is not defined //由于作用域的关系我们在外部还是无法直接访问内部作用域的变量名和函数名 abc = null; //由于闭包占用内存空间，所以要谨慎使用闭包。尽量在使用完闭包后，及时解除引用，释放内存；
11. </script>
    

    　　立即执行函数能配合闭包保存状态。

    

    <script type="text/javascript">
        for(var i = 0; i < 3; i++){
              setTimeout(function(){
                  console.log(i);    //3 3 3
                  //在执行到这一行时，发现匿名函数里没有i，然后向往外部作用域找，然后找到的其实是for循环执行完了的i，也就是2++，3
              },0);
        };     
    
        for(var i = 0; i < 3; i++){
              setTimeout((function(x){
                  console.log(x);    //0 1 2
              })(i),0);
              //在立即执行函数内部i传给了x，并且锁在内存中，所以不会变
        };
    </script>

    

    一道经典面试题：

    　　下面的ul中，如何点击每一个 li 的时候弹出其下标?

    <ul>
        <li>index  00000</li>
        <li>index  11111</li>
        <li>index  22222</li>
    </ul>

    　　方法一：用闭包

    

    <script type="text/javascript">
        window.onload = function(){
            var oLi = document.getElementsByTagName('ul')[0].children;
            for (var i = 0; i < oLi.length; i++){
                (function(index){
                    oLi[index].onclick = function(){
                        console.log(index);
                    };
                })(i);
            }
        }
    </script>

    

    　　方法二：闭包还有一种写法

    

    <script type="text/javascript">
        window.onload = function(){
            var oLi = document.getElementsByTagName('ul')[0].children;
            for (var i = 0; i < oLi.length; i++){
                oLi[i].onclick = (function(index){
                    return function(){
                        console.log(index);
                    }
                })(i);
            }
        }
    </script>

    

    　　方法三：将下标作为对象的一个属性，添加到每个数组元素中，（name: " i ", value: i 的值）;

    

    <script type="text/javascript">
        window.onload = function(){
            var oLi = document.getElementsByTagName('ul')[0].children;
            for (var i = 0; i < oLi.length; i++){
                oLi[i].i = i;
                oLi[i].onclick = function(){
                    console.log(this.i);
                };
            }
        }
    </script>

    

     

     

    变量的作用域 

    Js中变量的作用域分两种：全局变量和局部变量。

    函数内部可以直接读取全局变量。 　

    1 var n = 'RORO彦';
    2 function f1() {
    3     console.log(n);
    4 }
    5 f1();

    在函数外部自然无法读取函数内的局部变量。

    1 　　function f1(){
    2     var n= 'RORO彦';
    3 }
    4 console.log(n); // error

    　　

    此外，函数内部声明变量时，一定要用var关键字来命名变量。否则，就声明了一个全局变量。

    当我们需要从外部读取局部变量，得到函数内的局部变量，可以在函数的内部再定义一个函数。　　

    1 　　function f1(){
    2     n = 'RORO彦';
    3     function f2(){
    4       console.log(n);
    5     }
    6 }

    如上，函数f2就被包括在函数f1内部，这时f1内部的所有局部变量，对f2是可见的。反之，不行。这就是Javascript语言特有的“链式作用域”结构（chain scope），子对象会一级一级地向上寻找所有父对象的变量。

    现在f2可以读取f1中的局部变量，那么只要把f2作为返回值，我们就可以在f1外部读取它的内部变量

    

    1 function f1(){
    2     n = 'RORO彦';
    3     function f2(){
    4         console.log(n);
    5     }
    6     return f2;
    7 }
    8 var result=f1();
    9 result(); // RORO彦

    

     作用

    1.读取函数内部的变量

    2.令这些变量的值始终保持在垃圾(内存)回收机制中。

    

     1 　function f1(){
     2     var n = 'RORO彦';
     3     add=function(){n = 'RORO';};
     4     function f2(){
     5         console.log(n);
     6     }
     7     return f2;
     8 }
     9 var result=f1();
    10 result(); // RORO彦
    11 add();
    12 result(); // RORO

    

    在这段代码中，result实际上就是闭包f2函数。它一共运行了两次，第一次是RORO彦，第二次是RORO。函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除，而是保存在内存堆(heap)里， 原因是它被包装或封装在一个函数体内，这些构造器都被称为闭包。它返回调用函数的运行结果，是函数本身。此外，add的值是一个匿名函数，它本身也是一个闭包，所以add相当于是一个setter，可以在函数外部对函数内部的局部变量进行操作。

    注意事项 

    函数中的变量都保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。闭包会在父函数外部改变父函数内部变量的值。所以，当你把父函数当作对象使用，把闭包当作它的公用方法，把内部变量当作它的私有属性，不要随便改变父函数内部变量的值。

    闭包与抽象数据类型

    我们通过闭包能简单地引入抽象数据类型。

    例如，通过闭包实现一个 堆栈。

    

    function createStack() {
    
      var elements = [];
    
      return {
    
        push: function(el) { elements.unshift(el); },
    
        pop: function() { return elements.shift(); }
    
      };
    
    }
    
    var stack = createStack();
    
    stack.push(3);
    
    stack.push(4);
    
    stack.pop(); //

    

    闭包与面向对象编程

    在 JavaScript 中，闭包不是堆栈数据类型的最佳实现方式。用原型 Prototype 实现对内存更友好，在当前对象实例找不到相应属性或方法时，会到相应实例共同引用的 Prototype 属性寻找相应属性或方法。如果在当前Prototype属性找不到时，会沿着当前原型链向上查找，而Prototype 上的属性或方法是公用的，而不像实例的属性或方法那样，各自单独创建属性或方法，从而节省更多的内存。

    上述构造器看起来非常像类、对象、实例值和私有/公有方法。闭包与类相似，都会将一些能操作内部数据的函数联系在一起。于是，我们可以像使用对象一样使用闭包。当我们想在 JavaScript 创建“真正的”隐藏域，或者需要创建简单的构造器时，我们可以优先使用闭包。不过对于一般的类来说，闭包可能还是有点太繁重了。

     

     

     

     

    闭包的基本结构

    1. 通过函数: 写一个函数, 函数内定义一个新函数, 返回新函数, 使用新函数得到函数内的数据
    2. 通过对象: 写一个函数, 函数内顶一个对象, 对象中绑定多个方法, 返回对象, 利用对象内的方法访问函数内中的数据

    闭包的基本用法

    1. 带有私有访问数据的对象

       function Person(){
           this.name = 'Peter';
           // setName('')
       }
       // 私有数据指的是只有函数内部可以访问的数据,或者对象内部的方法
       
       // 简单的例子,判断孩子是不是老张家的
       function createPerson(){
           var name = '张全蛋';
           return {
               getName : function(){
                   return name;
               },
               setName : function(value){
                   // 如果value的第一个字符串是 张 ,就设置
                   if(value.charAt(0) === '张'){
                       name = value;
                   } esle {
                       //不姓 张 ,就将错误抛出
                       throw new Error('你不姓张,难道还能姓王?');
                   }
               }
           }
       }

    2. 带有私有数据的函数

       // 不具有私有数据
       var fn = function(){};
       function fn(){}
       
       // 具有私有数据
       var foo = (function(){
           // 私有数据
           return function(){
               // 可以访问私有数据
           }
       })();

    闭包的基本模型

    函数模型

    function foo(){
        // 私有数据
        return function(){
            // 可以访问上面的私有数据
        }
    }

    对象模型

    function foo(){
        // 私有数据
        return {
            method : function(){
                // 可以访问的私有数据
            }
        }
    }

    闭包的性能问题

    • 函数的执行需要内存, 函数中定义的变量会在函数执行后自动回收
    • 因为是闭包结构, 如果还有变量引用这些数据的话, 这些数据不会被回收

    • 因此在使用闭包的时候,如果不使用这些数据了, 需要将函数赋值为 null

      var foo = (function(){
          var num = 123;
          return function(){
              return num;
          }
      })();
      // 如果不需要foo中的数据, 赋值为 null
      foo = null;