avaScript 闭包的理解

JavaScript 学习笔记之闭包

这篇文章是我学习闭包的笔记与总结，后面会有一些例子，结合画图的形式来理解，什么是闭包…..如有错误，还望指正，大神勿喷……

从以下几个方面去说闭包
1. 什么是闭包
2. 为什么使用闭包
3. 何时使用闭包
4. 如何使用闭包
5. 闭包是如何形成的
6. 闭包的缺点

什么是闭包

其实闭包它并不是一种（类似于对象）看得见摸得着的东西，它是一种机制；
是一种：能够让你重复使用变量，而又不会造成变量污染 的机制

为什么要使用闭包

• 为什么使用闭包要从全局变量和局部变量的优缺点说起

  1. 全局作用域：保存全局变量，可以反复使用，而且随处可用，但是会造成全局污染
  2. 局部作用域：保存局部变量，仅函数内可用，而且不可反复使用

何时使用闭包

既要重用变量，又保护变量不被污染

如何使用闭包

• 外层函数 包裹受保护的变量和操作变量的内层函数

• 外层函数要返回内层函数，有 3 种返回方式：

  1. return function
  2. 直接给全局变量赋值一个内部function
  3. 将内部函数保存在一个对象的属性或数组元素中

• 调用外层函数，用全局变量接住返回的内层函数的变量（这一步形成闭包）

闭包如何形成

外层函数被调用后，外层函数的作用域对象(Active Object)，无法释放，被内层函数(scope)引用着。

闭包的缺点

• 闭包比普通函数更占内存，外层函数的作用域对象(AO)始终存在
• 造成内存泄漏，解决的办法(释放闭包)：将引用内层函数对象的全局变量置为 null，导致内层函数被释放，导致外层函数的AO被释放

最后在来举几个栗子：
1. 简单的例子

function factory () {
    var num = 1;
    return function () {
        console.log( i++ );
    }
}
var getNum = factory(); // => function ...
getNum(); // => ?
getNum(); // => ?
getNum(); // => ?
i++ ;   // 污染
getNum(); // => ?

画图理解上述栗子

1.png

代码运行到红线部分的时候，执行环境栈中仅有一个全局执行环境(window)，此时 window 中有两个全局变量(标识符)：factory 、getNum

2.png

此时的ESC中的活动执行环境为 factory，在factory的AO中，有变量 num，此时num的值为1. (绿色线条的关系就形成了闭包)

3.png

factoryECS出栈之后，由于getNum引用着 factory的内层函数，而内层函数的scope也引用着factory，所以factory的活动对象并没有被释放

5.png

当getNum的EC进栈之后，getNum的AO中并没有num变量，所以会向父级进行查找，找到之后console.log( num )；并进行++操作；
[图片上传失败...(image-a7be63-1530276074470)]

原理同上。

2. 鄙视面试题

function outer () {
    for (var i = 0, arr = []; i < 3; i++) {
        arr[i] = function () { console.log(i); }
    }
    return arr;
}
var ot = outer();  // => arr
ot[0]();  // =>?
ot[1]();  // =>?
ot[2]();  // =>?

画简图理解：

6.png