码迷,mamicode.com
首页 > 其他好文 > 详细

图解闭包

时间:2015-12-09 13:34:17      阅读:151      评论:0      收藏:0      [点我收藏+]

标签:

先看一个闭包经典的例子:

    <!-- 实现一段脚本,使得点击对应链接alert出相应的编号 -->
    <body>
    <a href=‘#‘> 第一个链接 </a> </br>
    <a href=‘#‘> 第二个链接 </a> </br>
    <a href=‘#‘> 第三个链接 </a> </br>
    <a href=‘#‘> 第四个链接 </a> </br>

    <script type="text/javascript">
    var lis = document.links;
    for(var i = 0, length = lis.length; i < length; i++) {
        (function(i) {
            lis[i].onclick = function() {
            alert(i + 1);
            };
        })(i);
    }
    </script>

    </body>

 闭包是什么?

闭包就是一个组合,这个组合包括:一个function(或多个)和一些变量(或一个)。这些变量本该死掉的,却被保存在了fucntion的scope链里。

技术分享

上面的例子中,lis[i].onclick = function() alert(i + 1); };  就是function,i就是变量。

如此麻烦,为什么要用闭包?

为了隔离和安全。

上面的例子中构建了四个闭包:

技术分享

不用闭包会怎么样?

var lis = document.links;
    for(var i = 0, length = lis.length; i < length; i++) {
            lis[i].onclick = function() {
            alert(i + 1);
            };
    }

变量i不会被杀死,也不会保存在function的scope链上,四个function访问的都是外面的那个i,弹出的数值将会一样,都是5,因为i最后是4。

技术分享

闭包的原理

1,将function和变量,用另外一个function包住,并使用()执行这个最外面的function:

(function(i) {
            lis[i].onclick = function() {
            alert(i + 1);
            };
        })(i);

2,function执行后,里面的局部变量被杀死了,但是却被保存在function的scope链里面,只有闭包里面的function可以访问到,别人都访问不到;

3,通过调用闭包里面的function,我们可以操作别人都访问不到的数据,从而起到安全和隔离的作用。

这个例子的过程:

技术分享

 

图解闭包

标签:

原文地址:http://www.cnblogs.com/lewis617/p/5032299.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!