js 闭包

作者: _士心_ | 来源:发表于2017-03-09 14:32 被阅读21次

    闭包的理解

    因为内部函数在被创建时,其作用域链对外部函数对应的变量对象存在一个引用,而JS采用引用计数的方法进行内存管理,所以当外部函数被执行完毕后,其对应的变量对象不会被回收,这样就发生了闭包,在外部函数执行完毕后,我们在内部函数中仍然可以访问外部函数作用域中的变量。
    闭包就是函数的局部变量集合,只是这些局部变量在函数返回后会继续存在。

    闭包就是就是函数的“堆栈”在函数返回后并不释放,我们也可以理解为这些函数堆栈并不在栈上分配而是在堆上分配,当在一个函数内定义另外一个函数就会产生闭包而当一个函数中的变量或者函数有权访问另一个函数作用域中的变量或者函数时就产生了闭包了

    嵌套的函数定义

    我们只能通过变通的办法来访问函数的局部变量,一般来说,这个变通的办法就是在函数内部再定义一个函数,因为一个函数不仅可以访问全局变量,还可以访问它的外部函数(Outer function)定义的局部变量,比如下面的代码:

    var global_var = "I'm global";
    function outer() {
        var local_var = "I'm local";
        return function inner() {
            console.log("local: " + local_var);
        }; 
    }
    outer()(); // 输出:local: I'm local
    

    函数 inner 不仅有自己的内部作用域,还可以访问全局变量,也可以访问它外部的 outer 函数定义的所有局部变量。我们知道函数是 JavaScript 的一等公民,可以作为其他函数的参数或者作为函数的返回值,这里我们把 inner 函数返回,这样我们就通过变通的方法在 outer 函数外部访问了 outer 函数内部定义的局部变量。那这里的内部函数 inner 就构成了闭包。在 JavaScript 语言中,闭包的定义可以简化为嵌套定义在函数内部的函数。

    instanceof和typeof都能用来判断一个变量是否为空或是什么类型的变量。typeof用以获取一个变量的类型,typeof一般只能返回如下几个结果:number,boolean,string,function,object,undefined。我们可以使用typeof来获取一个变量是否存在,如if(typeof a!="undefined"){},而不要去使用if(a)因为如果a不存在(未声明)则会出错,对于Array,Null等特殊对象使用typeof一律返回object,这正是typeof的局限性。

      function f1(){
        var n=999;
        nAdd=function(){n+=1}
        function f2(){
          alert(n);
        }
        return f2;
      }
      var result=f1();
      result(); // 999
      nAdd();
      result(); // 1000
    

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

    为什么会这样呢?原因就在于f1是f2的父函数,而f2被赋给了一个全局变量,这导致f2始终在内存中,而f2的存在依赖于f1,因此f1也始终在内存中,不会在调用结束后,被垃圾回收机制(garbage collection)回收。
    这段代码中另一个值得注意的地方,就是"nAdd=function(){n+=1}"这一行,首先在nAdd前面没有使用var关键字,因此nAdd是一个全局变量,而不是局部变量。其次,nAdd的值是一个匿名函数(anonymous function),而这个匿名函数本身也是一个闭包,所以nAdd相当于是一个setter,可以在函数外部对函数内部的局部变量进行操作。

    立即执行函数

    立即执行函数能配合闭包保存状态。
    像普通的函数传参一样,立即执行函数也能传参数。如果在函数内部再定义一个函数,而里面的那个函数能引用外部的变量和参数(闭包),利用这一点,我们能使用立即执行函数锁住变量保存状态。

    // 并不会像你想象那样的执行,因为i的值没有被锁住
    // 当我们点击链接的时候,其实for循环已经执行完了
    // 于是在点击的时候i的值其实已经是elems.length了
    var elems = document.getElementsByTagName( 'a' );
    
    for ( var i = 0; i < elems.length; i++ ) {
    
      elems[ i ].addEventListener( 'click', function(e){
        e.preventDefault();
        alert( 'I am link #' + i );
      }, 'false' );
    
    }
    
    
    // 这次我们得到了想要的结果
    // 因为在立即执行函数内部,i的值传给了lockedIndex,并且被锁在内存中
    // 尽管for循环结束后i的值已经改变,但是立即执行函数内部lockedIndex的值并不会改变
    var elems = document.getElementsByTagName( 'a' );
    
    for ( var i = 0; i < elems.length; i++ ) {
    
      (function( lockedInIndex ){
    
        elems[ i ].addEventListener( 'click', function(e){
          e.preventDefault();
          alert( 'I am link #' + lockedInIndex );
        }, 'false' );
    
      })( i );
    
    }
    

    内存泄露

    function assignHandler() {
        var el = document.getElementById('demo');
        el.onclick = function() {
            console.log(el.id);
        }
    }
    assignHandler();
    

    以上代码创建了作为el元素事件处理程序的闭包,而这个闭包又创建了一个循环引用,只要匿名函数存在,el的引用数至少为1,因些它所占用的内存就永完不会被回收。

    function assignHandler() {
        var el = document.getElementById('demo');
        var id = el.id;
    
        el.onclick = function() {
            console.log(id);
        }
    
        el = null;
    }
    assignHandler();
    

    把变量el设置null能够解除DOM对象的引用,确保正常回收其占用内存。

    function fun(n,o) {
      console.log(o)
      return {
        fun:function(m){
          return fun(m,n);
        }
      };
    }
    var a = fun(0);  a.fun(1);  a.fun(2);  a.fun(3);//undefined,?,?,?
    var b = fun(0).fun(1).fun(2).fun(3);//undefined,?,?,?
    var c = fun(0).fun(1);  c.fun(2);  c.fun(3);//undefined,?,?,?
    
    //问:三行a,b,c的输出分别是什么?
    //这是一道非常典型的JS闭包问题。其中嵌套了三层fun函数,搞清楚每层fun的函数是那个fun函数尤为重要。
    //答案: //a: undefined,0,0,0 //b: undefined,0,1,2 //c: undefined,0,1,1
    

    JavaScript的执行上下文生成之后,会创建一个叫做变量对象的特殊对象(具体会在下一篇文章与执行上下文一起总结),JavaScript的基础数据类型往往都会保存在变量对象中。

    严格意义上来说,变量对象也是存放于堆内存中,但是由于变量对象的特殊职能,我们在理解时仍然需要将其于堆内存区分开来。
    基础数据类型都是一些简单的数据段,JavaScript中有5中基础数据类型,分别是Undefined、Null、Boolean、Number、String。基础数据类型都是按值访问,因为我们可以直接操作保存在变量中的实际的值。

    相关文章

      网友评论

          本文标题:js 闭包

          本文链接:https://www.haomeiwen.com/subject/srigwttx.html