闭包的原理

闭包的定义

一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）。也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域。在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来。

一个普通的函数function，如果它可以访问外层作用于的自由变量，那么这个函数就是一个闭包；
从广义的角度来说：JavaScript中的函数都是闭包；
从狭义的角度来说：JavaScript中一个函数，如果访问了外层作用域的变量，那么它是一个闭包；

词法作用域

function init() {
    var name = "Mozilla"; // name 是一个被 init 创建的局部变量
    function displayName() { // displayName() 是内部函数，一个闭包
        alert(name); // 使用了父函数中声明的变量
    }
    displayName();
}
init();

init() 创建了一个局部变量 name 和一个名为 displayName() 的函数。displayName() 是定义在 init() 里的内部函数，并且仅在 init() 函数体内可用。请注意，displayName() 没有自己的局部变量。然而，因为它可以访问到外部函数的变量，所以 displayName() 可以使用父函数 init() 中声明的变量 name 。

使用这个 JSFiddle 链接运行该代码后发现， displayName() 函数内的 alert() 语句成功显示出了变量 name 的值（该变量在其父函数中声明）。这个词法作用域的例子描述了分析器如何在函数嵌套的情况下解析变量名。词法（lexical）一词指的是，词法作用域根据源代码中声明变量的位置来确定该变量在何处可用（即在编译阶段函数的作用域链已经确定）。嵌套函数可访问声明于它们外部作用域的变量。

闭包实例

function makeFunc() {
    var name = "Mozilla";
    function displayName() {
        alert(name);
    }
    return displayName;
}

var myFunc = makeFunc();
myFunc();

运行这段代码的效果和之前 init() 函数的示例完全一样。其中不同的地方（也是有意思的地方）在于内部函数 displayName() 在执行前，从外部函数返回。

第一眼看上去，也许不能直观地看出这段代码能够正常运行。在一些编程语言中，一个函数中的局部变量仅存在于此函数的执行期间。一旦 makeFunc() 执行完毕，你可能会认为 name 变量将不能再被访问。然而，因为代码仍按预期运行，所以在 JavaScript 中情况显然与此不同。

原因在于，JavaScript中的函数会形成了闭包。闭包是由函数以及声明该函数的词法环境组合而成的。该环境包含了这个闭包创建时作用域内的任何局部变量。在本例子中，myFunc 是执行 makeFunc 时创建的 displayName 函数实例的引用。displayName 的实例维持了一个对它的词法环境（变量 name 存在于其中）的引用。因此，当 myFunc 被调用时，变量 name 仍然可用，其值 Mozilla 就被传递到alert中。

闭包的内存泄露测试

测试如下代码，利用浏览器调试面板分析内存的使用情况

function testArray() {
    var arr = new Array(1024 * 1024).fill(1) //创建一个数组用数字1填满数组，则该数组占据的内存大小为4mb
//这里需要注意的是1本应该是一个Number类型，分配的空间应该为8byte，但是由于V8引擎做了优化，因为这种小数字是不需要那么大的空间的，因此采用的是sim类型，占据4字节
    return function() {
        console.log(arr.length)  //在匿名函数中使用外部定义的变量，形成闭包
    }
}

//创建一个数组，存放100个testArray的返回值，相当于存放了100个闭包，占用内存约为400mb
var arrFns = []
setTimeout(() => {
    for (var i = 0; i < 100; i++) {
        setTimeout(() => {
            arrFns.push(testArray())
        },i*100)
    }
}, 6000);//这里将回调时间设置成6000ms是为了保证浏览器完成无关的加载

//15秒之后，逐渐释放arrFns中占据的一半的内存
setTimeout(() => {
   for (var i = 0; i < 50; i++) {
    setTimeout(() => {
        arrFns.pop()
    }, i * 100)
} 
},15000)

内存使用情况如图所示：

内存使用情况.png

可以很容易发现，当形成如下闭包的时候，arrFns数组所占用的内存就没有完全释放，造成了内存泄漏
需要注意的是在这里是无法看到占用内存逐渐减少的，这跟垃圾回收的机制有关，并不是释放一点，回收一点，而是约定的在一定情况下统一回收

JS引擎对闭包中自由变量的优化

运行如下代码：

function foo() {
  var name = 'mike'
  var age = 18
  function bar() {
    debugger
    console.log(name);
  }
  return bar
}

var fn = foo()
fn()

很容易判断出，在bar函数中引用了外层函数foo的AO对象，因此内存中foo的AO对象不会被删除，在代码处打上debugger，运行发现，闭包里面仅仅包含name的自由变量

image.png