JS闭包文章--(翻译)Callbacks in Loops
原文地址:http://tobyho.com/2011/11/02/callbacks-in-loops/
某些时候,你需要在循环里创建一个回调函数。我们来试试给页面里每个链接增加点击事件。
var links = documnet.getElementsByTagName('a')
for (var i = 0, len = links.length; i < len; i++){
// Note: `addEventListener` is standard compliant browsers only
links[i].addEventListener('click', function(e){
alert('You clicked on link ' + i)
}, false)
}
当你点击链接的时候,你将打开一个警告框告诉你被点击的链接索引。很好用吧,但是,这不会发生。
实际上,每次警告框都会弹出"You clicked on link 5" - 假如你有5个链接。发生这样的原因是你创建的每一个回调函数(每个循环迭代)都指向了相同的变量i。也就是说,尽管var i在循环内被定义,但他不在循环范围内,即新的i并不是被循环构造出的。其实,我就算在循环外声明,也是一样的结果。
var links = documnet.getElementsByTagName('a')
var i
for (i = 0, len = links.length; i < len; i++){
/* blah blah */
}
解决这个问题的方法是创建一个outer
函数,并传递参数i来了-然后立刻执行它。
var links = documnet.getElementsByTagName('a')
for (var i = 0, len = links.length; i < len; i++){
!function outer(i){
links[i].addEventListener('click', function inner(e){
alert('You clicked on link ' + i)
}, false)
}(i)
}
注:我还定义了回调处理函数inner
,以区分这两个函数。
outer
的功能也被称为IIFE - 它被创建后立即执行,然后销毁。 (还有其他的方法来写 - 我只是喜欢的版本的!)我们需要它是因为我们需要一个新的变量范围,并在Javascript中,函数是唯一能这么做的办法。
要注意在outer函数外部,i仍然是循环中定义的i,但在inside函数内,i只是被声明的一个局部变量, - 它优先于outside函数中的i。
!function(i){ // <-- inside `i`
/* here, `i` refers to inside `i` */
}(i) // <-- still outside `i`
我们可以将inside函数中的变量i改成ii,这样看起来清楚一点。
var links = documnet.getElementsByTagName('a')
for (var i = 0, len = links.length; i < len; i++){
!function outer(ii){
links[i].addEventListener('click', function inner(e){
alert('You clicked on link ' + ii)
}, false)
}(i)
}
现在ii变量在outer函数里,变量i在外面。因为闭包,ii将一直存在直到outer函数结束(单击事件发生的时候)。换句话说,inner函数将ii变量固定,任何代码都可以访问。
更新
Jonprins评论说道,创建一个函数的开销是昂贵的,所以outer函数最好在循环之外。我同意这个观点,我同意。现在优化后的代码如下。
function addClickHandler(link, i){
link.addEventListener('click', function(e){
alert('You clicked on link ' + i)
}, false)
}
var links = documnet.getElementsByTagName('a')
for (var i = 0, len = links.length; i < len; i++)
addClickHandler(links[i], i)
这下代码看起来又干净又有效率了。
结论
你现在已经一点点的知道了闭包是如何工作的,并注意到循环里的回调函数的问题所在。如果你有任何疑问,请给我留言。
JS闭包文章--(翻译)Callbacks in Loops的更多相关文章
- js闭包的作用
js闭包的用途详解 js闭包可以用在许多地方.它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中.具体怎么理解呢,各位看官请仔细看好下文 我们来看 ...
- 一篇文章看懂JS闭包,都要2020年了,你怎么能还不懂闭包?
壹 ❀ 引 我觉得每一位JavaScript工作者都无法避免与闭包打交道,就算在实际开发中不使用但面试中被问及也是常态了.就我而言对于闭包的理解仅止步于一些概念,看到相关代码我知道这是个闭包,但闭包 ...
- 大部分人都会做错的经典JS闭包面试题
由工作中演变而来的面试题 这是一个我工作当中的遇到的一个问题,似乎很有趣,就当做了一道题去面试,发现几乎没人能全部答对并说出原因,遂拿出来聊一聊吧. 先看题目代码: function fun(n,o) ...
- Js闭包的用途
本来想总结一点JavaScript中的闭包的一些用法,在查资料的时候发现了一篇很好的文章,就转过来收藏了,下面附上传送门: js闭包的用途 ---------sunlylorn 我们来看看闭包的用途. ...
- 揭开JS闭包的面纱
今天看了关于js闭包方面的文章,还是有些云里雾里,对于一个菜鸟来说,学习闭包确实有一定的难度,不说别的,能够在网上找到一篇优秀的是那样的不易. 当然之所以闭包难理解,个人觉得是基础知识掌握的不牢,因为 ...
- js闭包实例汇总
本文是通过实例来帮助大家深刻理解js闭包,是篇非常不错的文章,这里推荐给大家,有需要的小伙伴可以参考下 Js闭包 闭包前要了解的知识 1. 函数作用域 (1).Js语言特殊之处在于函数内部可以直接读取 ...
- 关于js闭包之小问题大错误
闭包是 JavaScript 开发的一个关键方面:匿名函数可以访问父级作用域的变量. 如果闭包的作用域中保存着一个 HTML 元素,则该元素无法被销毁.(下面代码来自高程) 刚看到一个关于闭包自己没注 ...
- js闭包之我见
很久前的一个问题终于得以解决,内心是无比喜悦的,不多说,先上代码: function test(){ for(var i=0;i<5;i++){ window.onclick=function( ...
- js闭包引起的事件注册问题
背景:闲暇时间看了几篇关于js作用域链与闭包的文章,偶然又看到了之前遇到的一个问题,就是在for循环中为dom节点注册事件驱动,具体见下面代码: <!DOCTYPE html> <h ...
随机推荐
- 使用MongoDB C#官方驱动操作MongoDB
想要在C#中使用MongoDB,首先得要有个MongoDB支持的C#版的驱动.C#版的驱动有很多种,如官方提供的,samus. 实现思路大都类似.这里我们先用官方提供的mongo-csharp-dri ...
- MyCat 学习笔记 第六篇.数据分片 之 按月数据分片
1 应用场景 Mycat 有很多数据分库规则,接下来几篇就相关觉得常用的规则进行试用与总结. 一般来说,按自然月份来进行数据分片的规则比较适用于商城订单查询,类似最近1周.2周.3个月内的数据.或是报 ...
- MAC、IDFA、IMEI正则表达式
一.安卓: MAC:接入网络的设备的序号,唯一值.用 16 进制数表示,由 0-9,A-F 组成,如:44:2A:60:71:CC:82 Uuid 正则表达式: ^([0-9a-fA-F]{2})(( ...
- Linux NFS 介绍
由SUN开发,用于在不同的系统之间使用,所以其设计与主机系统无关,用户想使用远程文件时,只需要mount –t nfs就可以把远程的文件拿到本地,像使用本地文件一样使用,非常方便. 它采用C/S架构, ...
- hdu1047 Integer Inquiry
/* Integer Inquiry Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- html5 实现video标签的自定义播放进度条
现在随着html5的渐热,越来越多的web开发者都开始选择使用html5写出一些比较好的web应用. html代码: <!DOCTYPE html> <html lang=" ...
- 类似区间计数的种类并查集两题--HDU 3038 & POJ 1733
1.POJ 1733 Parity game Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 5744 Accepted: ...
- WIN7系统自带截图工具SnippingTool
在无网络的情况下,无QQ情况下,如何截图?以及如何设置快捷键? 方法 首先,我们在“开始”菜单最上面找到它,如图: 找不到也没关系 C:\Windows\system32\SnippingTool.e ...
- C#中treeview的问题,如何区分根节点和子节点以及根节点和根节点的兄弟节点?
根节点的Level属性为0,一级子节点Level属性为1,二级子节点Level属性为2,以此类推:同级节点可以用索引.名称.文本来区分.用索引区分根节点时,TreeView.Nodes[0]就是第一个 ...
- dexDebug ExecException finished with non-zero exit value 2
Error:Execution failed for task ':app:transformClassesWithDexForDebug'. com.android.build.api.transf ...