本文旨在诠释闭包里的微观世界。

内容包括:值范例、作用域、闭包

JS当中一切的function都是闭包，平常说来，嵌套的function的闭包性更强。这也是我们日常平凡打仗和研讨比较多的处所。

在进入本文的中心部份之前，起首来明白几个观点：

• 值范例

  声明一个值范例变量，编译器会在栈上分派一个空间，这个空间对应着该值的范例变量，空间存储的就是这个变量的值。存储在栈(stack)中的简朴数据段，也就是说，它们的值直接存储在变量接见的位置。

• 援用范例

  援用范例的实例分派在堆(heap)上，新建一个援用范例的实例，取得的变量值对应的是该实例的内存分派地点。存储在堆(heap)中的对象，也就是说，存储在变量中的值是一个指针(point)，其指向存储对象的位置。

  javascript//值范例
  var a="xl";
  var b=a;
  a="XL";
  console.log(b); //输出  "xl"
  
  //援用范例
  var a={name:"xl"};
  var b=a;
  a.name="XL";
  console.log(b.name);//输出 "XL"
  

区分就是值范例变量是能够直接接见栈(stack)中的值：

• 在第一段代码中，将变量”a”赋值给”b”，相当于在stack中也为”b”拓荒了一个存储其值的空间，与存储变量”a”的存储空间是互相自力的，因而修正”a”的值，不会影响到“b”的值。
• 在第二段代码中，”a”,”b”都取得的是关于存储在heap当中实例的援用，当“a”对其举行修正的时刻，“b”的援用也会受到影响。

接下来的内容就是关于闭包的微观世界

javascript    function a(){
        var i=0;
        function b(){
            console.log(++i);
        }
        return b;
    }

    var c=a(); //函数a实行后返回函数b，并将函数b赋给c
    c();//输出 1

原本这个处所变量i是定义在函数a中，并不能被函数a的外部所接见，然则这个处所由于在a中定义了一个函数b，函数b中有对变量i的援用，因而当b被a返回后，变量c取得了对函数a中函数b的援用，因而i不会被GC接纳，而是存在内存当中。

当在一个函数a内里定义别的一个函数b，函数b有对函数a中变量的援用，当函数a实行并返回函数b，将b赋给变量c时，如许就存在互相之间的援用关联，并形成了人人常常见到的闭包

我们进一步的剖析：这一部份的内容包括了作用域和作用域链部份的内容.

依旧拿上面的例子来剖析：

• 当定义函数a的时刻，js诠释器会将函数a的作用域链(scope chain)设置为定义a时地点的“环境”,假如a是一个全局函数，那末scope chain中只要window对象。

• 当实行函数a的时刻，a会进入响应的实行环境(excution context).

• 在建立实行环境的历程当中，起首会为a增加scope属性，即a的作用域，其值就为第一步的scope chain.即a.scope=a的作用域链。

• 然后实行环境会建立一个运动对象(call object).运动对象也是一个具有属性的对象。但它不具有原型而且不能直接经由历程javascript代码接见。建立完运动对象后，把运动对象增加到a的作用域的最顶端，此时a的作用域链包括2个对象：a的运动对象和window对象。

• 下一步是在运动对象上增加一个arguments属性，它保存着挪用a时所通报的参数。末了把一切函数a的形参以及定义的内部函数b增加到a的运动对象上。在这一步中，完成了函数b的定义，正如第一步，函数b的作用域链被设置为b被定义时所处的环境，即a的作用域
  到此，全部函数a从定义到实行的历程就完成了。此时a返回函数b的援用给c，又函数b的作用域链包括了对函数a的运动对象的援用，也就是说b能够接见到a中定义的一切变量和函数。函数b被c援用，函数b又依靠函数的a,因而函数a在返回的时刻不会被gc收回。

• 当函数b实行的时刻，同样会按上述步骤一样。实行时b的作用域里包括了3个对象:{b的运动对象}、{a的运动对象}、{window对象}

下面用2张图来示意全部历程：

图一展现了函数a定义历程是怎样建立作用域链的

图二展现了函数a实行历程发生的运动对象(call object)

在这其中有个非常重要的内容就是函数的作用域是在定义函数的时刻就已肯定，而不是在实行的时刻肯定。

具体内容拜见：鸟哥：Javascript作用域和作用域链

再来看看我们在日常平凡常常碰到的一段代码：

javascript    HTML部份：
        <div id="example">
            <span>1</span>
            <span>2</span>
            <span>3</span>
        </div>

    JS:

    var spanArr=document.getElementById("example").getElementsByTagName("span");
    for(var i=0;i<3;i++){
        spanArr[i].onclick=function(){
            console.log(i);
        }
    }
    //不论点击哪一个<span>都邑输出3
    //这是由于在内部的匿名函数中i是关于外部的i的援用。当for轮回完毕今后，i的值变为了3.那末匿名函数响应取得的援用值夜都变为了3.所以末了不论点击哪一个<span>末了都邑输出3.
    //所以碰到这类状况的时刻平常处置惩罚要领是
    1.将变量i保存在每一个span对象上。
    for(var i=0;i<3;i++){
        spanArr[i].i=i;
        spanArr[i].onclick=function(){
            console.log(i);
        }
    }
    2.加一层闭包
    for(var i=0;i<3;i++){
        (function(i){
            spanArr[i].onclick=function(){
                console.log(i);
            }
        })(i)
    }
    //固然另有其他的要领，这里不多述。

参考文章：

1. 明白javascript的作用域和作用域链
2. javascript闭包深切明白
3. 明白javascript闭包