【javascript】闭包

⭐️一、闭包
闭包是指有权访问一个函数作用域内部变量的函数。

闭包举例说明～

function test(a,b){
        return function (c,d) {
            var c=a;        	//看这里～
            var d=b;       	    //看这里～
            if(c>d){
                return 1;
            }else if(c<d){
                return -1;
            }else{
                return 0;
            }
        }
    }

在这个例子中，注意有注释的那两行代码，这两行代码是内部函数（匿名函数）中的代码，这两行代码访问了外部函数中的变量a和b，即使这个内部函数被返回了，而且是在其他地方调用了，但它仍然可以访问外部函数中的变量，是因为内部函数的作用域链中包含了外部函数作用域的变量对象。

要搞清楚，必须理解函数在调用的时候发生了什么。

一般的函数举例说明～

全局环境的变量对象始终存在，而像一般的局部函数（不涉及到闭包）的变量对象只在函数执行的过程中存在。

function compare(value1,value2) {
        if(value1>value2){
            return 1;
        }else if(value1<value2){
            return -1;
        }else{
            return 0;
        }
    }

在创建compare()函数时，会预先创建一个包含全局变量对象的作用域链，这个作用域链被保存在函数内部的[[scope]]属性中。当调用compare函数时，会为函数创建一个执行环境，然后通过复制函数的[[scope]]属性中的对象构建起执行环境的作用域链。此后，又有一个活动对象被创建并被推入执行环境作用域链的前端。对于这个例子中compare()函数而言，其作用域链中包含两个变量对象：本地活动对象和全局变量对象。显然，作用域链本质上是指向变量对象的指针列表。

无论什么时候在函数中访问一个变量时，就会从作用域链中搜索具有相应名字的变量。一般来讲，当函数执行完毕后，局部活动对象就会被销毁，内存中仅保存全局作用域（全局执行环境的变量对象）。

闭包的情况又不同～～～

在另一个函数内部定义的函数会将外部函数的活动对象添加到它的作用域链中。因此，闭包的那个例子中，在test函数内部定义的匿名函数的作用域链中，实际上将会包含外部函数test的活动对象到作用域链中。
当执行下面的代码时：

var value=test(1,2);
    alert(value());

在匿名函数从test（）中被返回后，匿名函数的作用域链被初始化为包含test()函数的活动对象和全局变量对象。这样，匿名函数就可以访问在test()函数中定义的所有变量。更为重要的是， test函数执行完毕后，其活动对象也不会被销毁，因为匿名函数的作用域链仍然在引用着这个活动对象。 换句话说，当test()函数返回后，它的执行环境中的作用域链会被销毁，但它的活动对象仍然会留在内存中；直到匿名函数销毁后，test（）函数的活动对象才被销毁。

test()函数保存在变量value中，可以通过将value设置为null解除对该函数的引用，就等于通知垃圾回收机制将其清楚。随着匿名函数的作用域链被销毁，其他作用域（除了全局作用域）也都可以安全地销毁了。

由于闭包会携带包含它的函数的作用域，因此会比其他函数占用更多的内存。过度使用闭包可能会导致内存占用过多，所以建议只在绝对必要的时候使用闭包。虽然像v8等优化后的JS引擎会尝试回收被闭包占用的内存，但是还是要慎用闭包

⭐️二、闭包与变量
作用域链的这种配置引出了一个值得注意的副作用，即闭包只能取得包含函数中任何变量的最后一个值。

举例说明～

function fun(){
        var result=new Array();
        for(var i=0;i<10;i++){
            result[i]=function () {
                return i;
            }
        }
        return result;
    }

这个函数会返回一个函数数组。从表面上看，似乎每个函数都应该返回自己的索引值。但实际上，每个函数都返回10。因为每个函数的作用域链中都保存着fun()函数的活动对象，所以他们引用的都是同一个变量i。当fun函数返回后，变量i的值是10，此时每个函数都引用着保存变量i的同一个变量对象，所以在每个函数内部i的值都是10。但是，我们可以通过创建另一个匿名函数强制让闭包的行为符合预期。

function fun(){
        var result=new Array();
        for(var i=0;i<10;i++){
            result[i]=function (num) {
                    return num;
            }(i);
        }
        return result;
    }

在重写了前面的fun函数后，每个函数就会返回各自不同的索引值了。这样，我们没有直接把闭包赋值给数组，而是定义了一个匿名函数，并将立即执行该匿名函数的结果赋值给数组。在调用每个匿名函数时，我们传入了变量i，由于函数传参是按值来传递的，所以就会将i的当前值传给参数num。

⭐️三、关于this对象

在闭包中使用this对象也可能会导致一些问题。

举例说明～

var name="window";
    var obj={
        name:"object",
        getName:function () {
            return function () {
                return this.name;
            }
        }
    }
    alert(obj.getName()());   //window

为什么匿名函数没有取得其包含作用域（或外部作用域）的this对象呢？

每个函数在被调用时都会自动取得两个特殊变量：this和arguments，内部函数在搜索这两个变量时，只会搜索到其活动对象为止（题中的内部函数的活动对象是 getName函数的活动对象），因此不可能直接访问外部函数中的这俩个变量。

不过，把外部作用域中的this对象保存在一个闭包能够访问到的变量里，就可让闭包访问该对象了。

比如～

var name="window";
    var obj={
        name:"object",
        getName:function () {
            var that=this;
            return function () {
                return that.name;
            }
        }
    }
    alert(obj.getName()());   //object

在定义匿名函数之前，我们把this对象赋值给了一个名叫that的变量。而在定义闭包之后，闭包也可以访问这个变量，因为它是我们在包含函数中特意声明的一个变量。即使在函数返回之后，that也仍然引用着object，所以调用就可以返回object。

⭐️四、内存泄漏
由于IE9之前对JS对象的垃圾回收机制，因此闭包在IE的这些低版本浏览器中会导致一些特殊问题。换句话书，如果闭包的作用域链中保存着一个HTML元素，那么就意味着该元素将无法被销毁。

比如～

function test(){
        var elem=document.getElementById("testId");
        elem.onclick=function () {
            alert(elem.id);
        }
    }

上面例子就是一个关于事件处理程序的闭包，由于匿名函数保存了对test()活动对象的引用，只要匿名函数存在，elem的引用数至少为1，因此elem所占用的内存就永远不会被回收。

这个问题可以这样解决～

function test(){
        var elem=document.getElementById("testId");
        var id=elem.id;
        elem.onclick=function () {
            alert(id);
        };
        elem=null;
    }

通过把elem.id的一个副本保存在一个变量中，并在在闭包中引用该变量，这样消除了闭包内对元素的引用。因此，这样还是不能解决内存泄漏的问题。必须要记住～～～～～～
闭包会引用包含函数的整个活动对象，而其中包含着elem。即使闭包不直接引用elem，包含的函数的活动对象中也仍然会保存一个引用。因此，有必要把elem变量设置为null。这样就能解除对dom对象的引用，确保正常回收其占用的内存。