快速理解闭包的定义和使用

当一个内部函数被调用,就会形成闭包,闭包就是能够读取其他函数内部变量的函数,定义在一个函数内部的函,创建一个闭包环境,让返回的这个子程序抓住i,以便在后续执行时可以保持对这个i的引用。内部函数比外部函数有更长的生命周期;函数可以访问它被创建时所处的上下文环境。

示例代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>闭包</title>
        <style type="text/css">
            div {
                 100px;
                height: 100px;
                background: lightgreen;
                float: left;
                margin: 20px;
                font: 30px/100px "microsoft yahei";
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div>a</div>
        <div>b</div>
        <div>c</div>
        <div>d</div>
        <div>e</div>
        <div>f</div>
        <div>g</div>
        <div>h</div>
        <div>i</div>
        <div>j</div>
        <script type="text/javascript">
            var divs=document.getElementsByTagName("div");
            for (var i=0;i<divs.length;i++) {
                divs[i].onclick=function(){
                    alert(i);
                }
            }
        </script>
    </body>
</html>

运行结果:

点击每一个div都是10,根本原因是var没有块级作用域只有函数作用域,而点击事件的函数内部使用外部的变量i一直在变化,当我们指定click事件时并没有保存i的副本

修改代码,使用闭包:

//方法一
for (var i=0;i<divs.length;i++) {
    (function(i){
        divs[i].onclick=function(){
            alert(i);
        }
    })(i)
}

//方法二
for (var i=0;i<$("div").length;i++) {
      $("div")[i].onclick=(function(n){
              return function(){
                   alert(n);
              }
      })(i)
}

结果:

总结:

(1)外界无法访问闭包内部的数据,如果在闭包内声明变量,外界是无法访问的,除非闭包主动向外界提供访问接口;

(2)一般的函数,调用完毕之后,系统自动注销函数,而对于闭包来说,在外部函数被调用之后,闭包结构依然保存在

(3)使用闭包会占有内存资源,过多的使用闭包会导致内存溢出等.

原文地址:https://www.cnblogs.com/bushui/p/11509538.html