闭包的简单理解

主要分三部分说：
一、什么是闭包？二、闭包有什么好处？应用在哪里？

1、什么是闭包

第一个特点：可以是函数嵌套函数

function fna(){
       function fnb(){}
   }

第二个特点：内部函数可以引用外部函数的参数和变量

function  fna(){
        var b=5;
        function fnb(){
            console.log(b);
        }
        fnb();
    }
fna();

b变量都要被内部函数fnb()引用到，会一直驻扎在内存中，不会被垃圾回收的，也就是说参数和变量不会被垃圾回收机制所收回。
那么什么是js垃圾回收机制呢？

function fna(){
        var a=1;
    }
fna();

例如，上面写了个普通函数fna(),当fna();执行完毕后变量a就不存在了，为了节省内存。
例1：

function  fna(){
        var a=5;
        function fnb(){
            console.log(a);
        }
        return fnb;
    }
var fnc=fna();
fnc();      //5

变量c就是返回的fnb函数，fnc()执行的时候变量a并没有消失，一直驻扎在内存中的，这时会弹出5的.这就是简单的闭包形式。

2、闭包的好处和应用

好处：
1.希望一个变量长期驻扎在内存当中
2.避免全局变量的污染

var a=1;
function fna(){
    a++;
    console.log(a);
}
fna(); //2
fna(); //3
console.log(a);//3

a是个全局变量，一直驻扎在内存中，依次执行会累加。

function fna(){
     var a=1;
     a++;
     console.log(a);
}
fna(); //2
fna(); //2

如果把变量a设置为局部变量，每调用一次代码重新执行，调用后a就不存在，下次调用的时候a还是1；那么怎么能做到a即是局部变量，a又能累计呢？
这就是闭包所能做到的。
例2:

function fna(){
      var a=1;
       return function () {
         　a++;
           console.log(a);
       };
}
var fnb=fna();
fnb(); //2
fnb(); //3
console.log(a) //undfined

构成了函数嵌套函数，当外面的函数执行完毕后，内部函数依旧可以调用到变量a;

(function(){
　　console.log(1);
})();

()放函数，函数声明就会变成函数表达式，再加（）立即执行。
至此可以把例2中的代码改写一下.

var fna= (function () {
    var a=1;
    return function () {
        a++;
        console.log(a);
    }
})();
fna();//2
fna();//3

var a=1在外面是调用不到，减少全局变量的污染，把内部函数变为私有的，

这也就是
3.变量私有

var aaa = (function(){
    var a = 1;
    function bbb(){
        a++;
        console.log(a);
    }
    function ccc(){
        a++;
        console.log(a);
    }
    return {
        b : bbb,
        c : ccc
    }
})();
//aaa.b();  //2
//aaa.c();  //3

在循环中直接找到对应元素的索引

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>11111111111</li>
    <li>11111111111</li>
    <li>11111111111</li>
</ul>

<script>
    window.onload = function(){
        var aLi = document.getElementsByTagName('li');

    for(var i=0;i<aLi.length;i++){

     aLi[i].onclick = function(){
         console.log(i);//3
         };
    };
    };
</script>
</body>
</html>

console.log(i)弹出3,为什么呢?很明显，当循环执行结束的时候

aLi[i].onclick = function(){
           console.log(i);//3
      };

还没执行，当点击的时候才会执行，但此时i已经变成3了。可以利用闭包改写，可以把循环中的i当作个参数传进去，就之前所说的内部函数可以引用外部函数的参数和变量。

for(var i=0;i<aLi.length;i++){
(function(i){
aLi[i].onclick = function(){
console.log(i);
};
})(i);

把i当成参数穿进去。除了这种写法还有另外一种方式

for(var i=0;i<aLi.length;i++){
aLi[i].onclick = (function(i){
    return function(){
    console.log(i);
}
})(i);

闭包的简单理解

1、什么是闭包

2、闭包的好处和应用

名字不能缺

引用和评论

如何实现一个楼中楼的评论系统

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号