JavaScript 闭包

闭包

• 定义：当内部函数被保存在外部时，将会生成闭包。

• 理解 : 有权访问另一个函数作用域内变量的函数都是闭包。

• 缺点：闭包会导致原有作用域链不释放，造成内存泄漏。

• 作用：

  • 实现公有变量
    eg：函数累加器
  • 可以做到缓存
    eg：eater
  • 可以实现封装，属性私有化
    eg：Person（）；
  • 模块化开发，防止污染全局变量

理解过程：

• 计数器困境

设想下如果你想统计一些数值，且该计数器在所有函数中都是可用的。

你可以使用全局变量，函数设置计数器递增：

实例

var counter = 0;
 
function add() {
   return counter += 1;
}
 
add();
add();
add();
 
// 计数器现在为 3

计数器数值在执行 add() 函数时发生变化。

但问题来了，页面上的任何脚本都能改变计数器，即便没有调用 add() 函数。

如果我在函数内声明计数器，如果没有调用函数将无法修改计数器的值：

实例
function add() {
    var counter = 0;
    return counter += 1;
}
 
add();
add();
add();
 
// 本意是想输出 3, 但事与愿违，输出的都是 1 !

JavaScript 内嵌函数可以解决该问题。

JavaScript 内嵌函数
所有函数都能访问全局变量。

实际上，在 JavaScript 中，所有函数都能访问它们上一层的作用域。

JavaScript 支持嵌套函数。嵌套函数可以访问上一层的函数变量。

该实例中，内嵌函数 plus() 可以访问父函数的 counter 变量：

实例
function add() {
    var counter = 0;
    function plus() {counter += 1;}
    plus();    
    return counter; 
}

如果我们能在外部访问 plus() 函数，这样就能解决计数器的困境。

我们同样需要确保 counter = 0 只执行一次。

我们需要闭包。

JavaScript 闭包
还记得函数自我调用吗？该函数会做什么？

实例
var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();
 
add();
add();
add();
 
// 计数器为 3

实例解析

变量 add 指定了函数自我调用的返回字值。

自我调用函数只执行一次。设置计数器为 0。并返回函数表达式。

add变量可以作为一个函数使用。非常棒的部分是它可以访问函数上一层作用域的计数器。

这个叫作 JavaScript 闭包。它使得函数拥有私有变量变成可能。

计数器受匿名函数的作用域保护，只能通过 add 方法修改。

- 闭包是可访问上一层函数作用域里变量的函数，即便上一层函数已经关闭。

例题：

想要输出0-9：

<script type = "text/javascript"> 
    function test() {
        var arr = [];
        for(var i = 0; i<10 ; i++) ｛
            arr[i] = function() {
                documen.write(i+" ");
            }
        ｝
    var myArr = test();
    for(var j = 0; j < 10; j++) {
        myArr[j]();
    }
 </script>
 //10 10 10 10 10 10 10 10 10 10

解题步骤：
理解为：

<script type = "text/javascript"> 
    function test() {
        var arr = [];
        for(var i = 0; i<10 ; i++) ｛
            arr[i] = function() {
                //
            }
        ｝
    var myArr = test();
    for(var j = 0; j < 10; j++) {
        myArr[j]();   //documen.write(i+" ");
    }
 </script>

自上行下编译时，到了for循环的函数那里，函数里面具体是什么是不看的，继续向下编译，直到编译到myArrj，要使用myArr[j]才向上看，才看到了arr[i] = function()里面的内容。

修改函数使其可以输出0-9：

<script type = "text/javascript"> 
    function test() {
        var arr = [];
        for(var i = 0; i<10 ; i++) ｛
            （function（j））{
                arr[j] = function() {
                documen.write(j+" ");
                }
            }(i));
        }
        return arr;
    ｝
    var myArr = test();
    for(var j = 0; j < 10; j++) {
        myArr[j]();
    }
 </script>
 //0 1 2 3 4 5 6 7 8 9

利用立即执行函数

<script type = "text/javascript"> 
   进行循环第一圈：  
    function test() {
        var arr = [];
        for(var i = 0; i<10 ; i++) ｛
            （function（j））{
                //j=0                   //不同的是多了一个每次都重新生成的j
                arr[j] = function() {   //这里还是与上的例子相同，先不会读取，等到下面需要时返回上来重新读取
                documen.write(j+" ");
                }
            }(i));
        }
        return arr;
    ｝
    var myArr = test();
    for(var j = 0; j < 10; j++) {
        myArr[j]();
    }
   
   进行循环第二圈：
       function test() {
        var arr = [];
        for(var i = 0; i<10 ; i++) ｛
            （function（j））{
                //j=1
                arr[j] = function() {
                documen.write(j+" ");
                }
            }(i));
        }
        return arr;
    ｝
    var myArr = test();
    for(var j = 0; j < 10; j++) {
        myArr[j]();
    } 
    
    ...
    
    总共进行十圈
    
 </script>