javascript中闭包的简单运用

自己学习前端的知识笔记

这是我在学习过程中记下的闭包的一些知识点，例子简单易懂，通过这些例子，能够初步了解闭包的原理。有错误的话希望大家能指正，毕竟俺也是小白一枚
T T

闭包是什么？

内部函数被保存到了外部，生成闭包。闭包会导致原有作用域链不释放，
造成内存泄漏（过度占用系统内存）。
即多个函数嵌套，里面的函数被返回到了外部（全局），必然生成闭包
里面的函数在外面执行的时候，一定能够调用原在环境的变量。

闭包会导致多个执行函数共用一个公有变量。如果不是特殊需要，
应该尽量防止这种情况的发生

eg:    function a() {
                var num = 100;
                function b(){
                    num ++;
                    console.log(num);
                }
                return b;
          }
          var demo = a();
          demo();
          demo();

结果 101 102

立即执行函数
此类函数没有声明，在一次执行过后就释放，适合做初始化工作

(function (){}());  W3C建议使用第一种
(function(){})();

eg:   (function (){                 
        var a = 123;                
        var b = 234;
        console.log(a + b);
}())

var num = (function(a, b){
    return a + b;
}(1, 2))

只被执行一次就被销毁

只有表达式才能被执行符号执行

能被执行符号执行的表达式，会成为立即执行函数

执行完后函数名称被放弃

在学习的过程中，简单运用闭包的知识来进行巩固学习

1.实现一个简单的函数累加器

通过返回demo实现了一个简单的累加器，counter函数实行一次，count的值便会累加一次。

        function add(){
            var count = 0;
            function demo(){
                count ++;
                console.log(count);
            }
            return demo;
        }
        var counter = add();
        counter();

2.实现简单的存储结构

      function eater(){
            var food = "";
            var obj = {
                eat : function(){
                    console.log("i am eating "  + food);
                    food = "";
                },
                push : function (myFood){
                    food = myFood;
                }
            }
            return obj;

            }
        var eater1 = eater();
        eater1.push('banana');
        eater1.eat()

解决简单的闭包问题

我们想要输出一个0-9的数组，编写出了如下的js代码，

    function test()
    {

    var arr = [] ;
    for(var i = 0 ; i < 10 ; i ++){
        arr[i] = function(){
            document.write(i + " ");
        }
    }
    return arr;
}
var myArr = test();
for(var j = 0; j < 10 ; j++){
    myArr[j]();
}

当代码运行结束之后，发现结果是10个10，而不是期望中的0-9，
因为在js代码执行的时候，i没有套现，闭包返回保存的arr中的i为10，
具体过程我的理解是for循环中
i = 9;
if( i < 10)
下一个循环
i++
i = 10;
if( i < 10);
循环结束，i = 10 ，arr=[10]被return
所以被保存到外面的AO里面的arr=[i]为一个i全为10 的数组
那么我们如何解决，让这个函数实现数组输出0-9呢？

解决方案 运用立即执行函数

    var arr = [] ;
    for(var i = 0 ; i < 10 ; i ++){
        (function (a){
            arr[a] = function(){
            document.write(a + " ");
            }
        }(i))
    }
    return arr;
}
var myArr = test();
for(var j = 0; j < 10 ; j++){
    myArr[j]();
}   

运用立即执行函数，在每一个for循环里面，i就会被套现，并且保存到外部，所以能够实现输出0-9.