js之认识闭包

Posted 2020-08-12

本文采用5W1H分析法来看一下闭包。

一、why-----从为什么要引入闭包先来了解一下闭包。

讨论为什么要引入闭包就要先讨论一下js中的作用域链及垃圾回收机制。

熟悉js语言的人都知道js中有作用域的概念和垃圾回收机制。那么我们首先来看一下js中的作用域链

1. 作用域链：

js中的变量执行环境分为全局执行环境和局部执行环境。当代码在执行时会创建变量对象的一个作用域链。而作用域链简单来说,就是函数在定义的时候创建的上下文执行环境，用于在标识符解析中变量查找。作用域链的前端始终都是当前执行代码所在环境的变量对象即函数自身的本地变量，作用域链的下一个变量对象来自包含环境即父级函数，而在下一个变量对象则来自下一个包含环境，然后一直延续到全局执行环境；全局执行环境的变量对象始终是作用域链的最后一个对象。js中标识符解析就是沿着作用域链一级一级地搜索标识符的过程；搜索过程从作用域链的前端开始逐级向上搜索，直到找到标识符为止。

作用域链只能从下往上查找而不能从上往下查找，举例来说函数内部可以访问到全局变量，而在函数外部不能访问函数内部变量。如下代码：

var n=999;
function f1(){
　　alert(n);
}
f1(); // 999

代码中n为全局变量，而在函数内部可以直接访问到。再看以下代码：

function f1(){
　　 var n=999;
}
alert(n); // 会报错  n is not defined

当在函数外部访问内部变量时会报错。了解了作用域链再来看一下js垃圾回收机制。

      2.js中垃圾回收机制：

javascript时一门具有自动垃圾回收机制的语言。一般来说,一个函数在执行开始的时候,会给其中定义的局部变量划分内存空间以便存储他们的值,然后在函数中使用变量，等到函数执行完毕返回了,局部变量就没有存在的必要了，这些变量就被认为是无用的了；因此释放他们的内存供将来使用，下次再执行此函数的时候,所有的变量又回到最初的状态,重新赋值使用。由于作用域链和垃圾回收机制的限制，若需要在函数外部访问函数内部的变量则访问不到。若要想在函数外部访问函数内部的变量怎么访问呢？此时闭包就华丽登场了(*^_^*)。

二、what-----什么是闭包呢从概念来理解

　　《javascript高级程序设计第三版》中是这样定义闭包的“闭包是指有权访问另一个函数作用域中的变量的函数”。所有的函数都可以说是闭包。在我理解，简单来说就是在一个函数内部嵌套一个函数，内部函数可以引用外部函数的参数和变量，参数和变量不会被回收，使局部变量能够在全局中访问到，暴露局部变量能够让他的上一层环境访问到。闭包由函数和创建该函数的执行环境构成。当在函数内部嵌套另外一个函数时，并且外部函数将嵌套的函数对象作为返回值返回就是闭包的一种。如下代码实例:

function aaa() {
    var a=1;
    function bbb(){
        a++;
        alert(a);
     }
     return bbb;
 }
 
 var c=aaa();
 c();//2

内部函数bbb可以访问到外部函数中的a变量。当外部函数执行完后，由于内部函数引用了外部函数的变量，因此内部函数的作用域包含了外部函数的活动对象，当外部函数被调用返回后其执行环境被销毁，但内部函数的作用域链依然存在，因其内部函数还未被销毁所以其外部函数的活动对象仍然在内存中，如在bbb中访问a变量依然可以访问到。等其内部函数执行完后作用域链被销毁，释放变量内存。了解了闭包的概念，再来看一下闭包的应用场景。

三、when------什么时候使用闭包？

当希望一个变量长期驻扎在内存中时，此时使用闭包可以使函数执行完后其活动对象仍然在内存中。

四、where----闭包应用在哪？

闭包好处：1、避免全局变量的污染
2、可以模仿块级作用域
3、私有成员的存在

       1、闭包可以用来模仿块级作用域。

js中本身没有块级作用域的概念，而使用闭包可以用来模仿块级作用域。

function outputNumbers(count){
        (function(){
            for(var i=0;i<count;i++){
                alert(i);
            }
        })();
        alert(i);//报错  i is not defined
    }

在for循环外部插入一个私有作用域，变量i只能在循环中使用，使用后即被销毁。所以在私有作用域外部访问不到。

      2、在循环中直接找到对应的索引。

若页面中有多个li标签，而需要给每个标签添加一个事件，则可以这样做：

for(var i=0;i<aLi.length;i++){
        (function(i){
            aLi[i].onclick=function(){
                alert(i);
            }
        })(i);
    }

如果不使用闭包的话，那么弹出的i为aLi.length的值。

for(var i=0;i<6;i++){
      aLi[i].onclick=function(){
            alert(i);//6
        }
    }

   3、用闭包模拟私有方法：

js中本身没有私有成员的概念，所有对象属性都是公有的。闭包可以用来创建私有变量。如下代码：

var aaa = (function(){
        var a = 1;
        function bbb(){
                a++;
                alert(a);
        }
        function ccc(){
                a++;
                alert(a);
        }
        return {
                b:bbb,             //json结构
                c:ccc
        }
})();
aaa.b();     //2
aaa.c()   

    4、模块化代码，避免全局变量的污染：

var abc = (function(){      //abc为外部匿名函数的返回值
        var a = 1;
        return function(){
                a++;
                alert(a);
        }
})();
abc();    //2   调用一次abc函数，其实是调用里面内部函数的返回值    
abc();    //3

接下来再来看一下闭包的缺点：闭包会使变量始终保存在内存中，如果不当使用会增大内存消耗。还有由于IE的js对象和DOM对象使用不同的垃圾收集方法，因此闭包在IE中会导致内存泄露问题，也就是无法销毁驻留在内存中的元素。只有关闭浏览器时才会释放内存。如下代码：

function fn(){
    var oDiv = document.getElementById(‘div1‘);//oDiv用完之后一直驻留在内存中
    oDiv.onclick = function () {
        alert(oDiv.id);//这里用oDiv导致内存泄露
    };
}
fn();
//最后应将oDiv解除引用来避免内存泄露
function fn(){
    var oDiv = document.getElementById(‘div1‘);
    oDiv.onclick = function () {
        alert(oDiv.id);
    };
    oDiv = null;
}

由于oDiv.onclick中引用了oDiv.id，互相引用时存在内存泄漏，因此需手动解除引用来避免内存泄漏。