js闭包的经典应用

_未名 2016-04-12 08:49:43

一个<ul>标签里面有好多<li>标签，点击<li>标签弹出他的编号
哪位大神能给我讲解一下？
for(var i = 0;i<li.length;i++){
li[i].onclick = (function(i){
return function(){
alert(i);
}
})(i);
}

...全文

432 13 打赏收藏转发到动态举报

写回复

用AI写文章

13 条回复

切换为时间正序

请发表友善的回复…

发表回复

_未名 2016-04-19

打赏
举报

引用 8 楼 sunsl516 的回复:

这个问题我前两天有研究过，我觉得这个跟闭包关系不大。主要是因为js的单线程机制导致的，像setTimeout,点击事件等等这些都属于异步操作，当代码块中出现这些时js会把这段语句放在主代码块之后执行，所以如果不用立即执行函数的话就会输出li.length，而不是1，2，3等等这些我们想要的输出。用立即执行函数的好处就在于它把闭包内的变量i进行了初始化，其实它也是等到for循环执行结束以后才执行的alert操作。不知道这样说你能不能理解。给你参考个链接，我就是看的这篇博客查了些资料才搞明白的。http://yeak2001.iteye.com/blog/430522

嗯嗯，我是明白他不用闭包正常写出来是每次弹出最后一个值，但是不理解我的那段代码之后会正常。现在理解了，谢谢！

_未名 2016-04-19

打赏
举报

引用 10 楼 u011573693 的回复:

闭包简单点说就是内嵌函数，没必要搞得那么玄乎，吓唬人哈。你的代码/问题需要拆分两步理解第一步: 立即函数也就是
(function(i){
    	return FN;   // 这里的FN看第二步
  })(i);

这步是马上立刻被执行的，所以你li[i].onclick最终绑定的其实是FN，在这里用个立即函数来包装，我想是为了确保i的值是正常的(就是alert时候i是1,2,3....)
第二步:就是上面的FN也就是onclick事件真正绑定的处理函数,其实它就是:
var FN = function(){ alert(i);}   // 其中i就是立即函数的参数
综合下，把两个步骤集合在一起其实就是楼主那段代码了，也就是你点li1弹出1，点2弹2的结果了，而所谓的闭包对于你来说就直接先按函数内嵌来理解吧
 li[i].onclick = (function(i){
        	return function FN(e){
        		alert(i);
        	}
 })(i); 

感谢！！！我现在已经非常清楚了。

街头小贩 2016-04-16

打赏
举报

引用 7 楼 jslang 的回复:

[quote=引用 6 楼 xiaofanku 的回复:] 哪些不计需求和应用上下乱用高大上技术的人，也是让人反感

这属于比较正常的应用吧，学了闭包的都能看懂。难道因为新手不懂，就不让老手使用了。[/quote] 我表达的是：直观的代码好过哪些为了炫技术而写的样板代码。不知道mvc就不写代码了。大多数我们作的都是合理的，不过不知道它是符合xxx技术的

顾小林 2016-04-15

打赏
举报

引用 4 楼 showbo 的回复:

JavaScript闭包(closure) 详解

似乎是明白，又不太明白，有点尴尬。

1987andy 2016-04-15

打赏
举报

闭包简单点说就是内嵌函数，没必要搞得那么玄乎，吓唬人哈。你的代码/问题需要拆分两步理解第一步: 立即函数也就是


(function(i){
    	return FN;   // 这里的FN看第二步
  })(i);

这步是马上立刻被执行的，所以你li[i].onclick最终绑定的其实是FN，在这里用个立即函数来包装，我想是为了确保i的值是正常的(就是alert时候i是1,2,3....)

第二步:就是上面的FN也就是onclick事件真正绑定的处理函数,其实它就是:


var FN = function(){ alert(i);}   // 其中i就是立即函数的参数

综合下，把两个步骤集合在一起其实就是楼主那段代码了，也就是你点li1弹出1，点2弹2的结果了，而所谓的闭包对于你来说就直接先按函数内嵌来理解吧


 li[i].onclick = (function(i){
        	return function FN(e){
        		alert(i);
        	}
 })(i);

sunsl516 2016-04-14

打赏
举报

这个问题我前两天有研究过，我觉得这个跟闭包关系不大。主要是因为js的单线程机制导致的，像setTimeout,点击事件等等这些都属于异步操作，当代码块中出现这些时js会把这段语句放在主代码块之后执行，所以如果不用立即执行函数的话就会输出li.length，而不是1，2，3等等这些我们想要的输出。用立即执行函数的好处就在于它把闭包内的变量i进行了初始化，其实它也是等到for循环执行结束以后才执行的alert操作。不知道这样说你能不能理解。给你参考个链接，我就是看的这篇博客查了些资料才搞明白的。http://yeak2001.iteye.com/blog/430522

天际的海浪 2016-04-13

打赏
举报

引用 6 楼 xiaofanku 的回复:

哪些不计需求和应用上下乱用高大上技术的人，也是让人反感

这属于比较正常的应用吧，学了闭包的都能看懂。难道因为新手不懂，就不让老手使用了。

斯洛文尼亚旅游 2016-04-13

打赏
举报

JavaScript闭包(closure) 详解

CoderPrince 2016-04-13

打赏
举报

引用 2 楼 Smallsun_229 的回复:

[quote=引用 1 楼 buzhou111 的回复:] 你哪段代码不懂啊？

就是我发的那段啊，那样写之后就可以点击第0个li弹出0，点击第一个li弹出1，不明白为什么？？代码看不懂。网上说这个是闭包[/quote]

总有人拿闭包吓唬新手，哼哼哼。。。。

_未名 2016-04-13

打赏
举报

引用 1 楼 buzhou111 的回复:

你哪段代码不懂啊？

就是我发的那段啊，那样写之后就可以点击第0个li弹出0，点击第一个li弹出1，不明白为什么？？代码看不懂。网上说这个是闭包

街头小贩 2016-04-13

打赏
举报

哪些不计需求和应用上下乱用高大上技术的人，也是让人反感

街头小贩 2016-04-13

打赏
举报

闭包，+ for +遍历！出现这种场景也是让人醉了


<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    </head>
    <body>
        <div>
                <ul>
                        <li>A</li>
                        <li>B</li>
                        <li>C</li>
                        <li>D</li>
                        <li>E</li>
                </ul>
        </div>
    </body>
</html>

按lz的for循环+闭包


        <script type="text/javascript">
            jQuery(function($){
                var li=$('li');
                
                for(var i = 0;i<li.length;i++){
                        li[i].onclick = (function(i){
                                return function(){
                                        alert(i);
                                }
                        })(i);
                }
            });
        </script>

这样是否更好一些,或更好理解


        <script type="text/javascript">
            jQuery(function($){
                var li=$('li');
               
                li.bind('click',function(){
                        alert($('ul').find('li').index(this));
                });
            });
        </script>

我写java就一定要写反射吗？

buzhou111 2016-04-12