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);
}
...全文
431 13 打赏 收藏 转发到动态 举报
AI 作业
写回复
用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 的回复:
哪些不计需求和应用上下乱用高大上技术的人,也是让人反感
这属于比较正常的应用吧,学了闭包的都能看懂。 难道因为新手不懂,就不让老手使用了。
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
  • 打赏
  • 举报
回复
你哪段代码不懂啊?

87,996

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧