javascript自启动函数的问题探讨


Posted in Javascript onOctober 05, 2013

话不多说了。

先来看两段代码:

var elems = document.getElementsByTagName('a'); for (var i = 0; i < elems.length; i++) { 
alert(i); 
elems[i].addEventListener('click', function (e) { 
e.preventDefault(); 
alert('I am link #' + i); 
}, 'false'); 
}

再看一面一段:
var elems = document.getElementsByTagName('a'); for (var i = 0; i < elems.length; i++) { 
(function(index){ 
elems[i].addEventListener('click', function (e) { 
e.preventDefault(); 
alert('I am link #' + index); 
}, 'false'); 
})(i); 
}

HTML 代码如下:
<body> 
<a href = "#">a</a> 
<a href = "#">a</a> 
<a href = "#">a</a> 
<a href = "#">a</a> 
<a href = "#">a</a> 
<a href = "#">a</a> 
<a href = "#">a</a> 
<a href = "#">a</a> 
</body>

你可以想像下,前后两段 script代码的效果。

如果你能看出来效果的区别,那么恭喜你。至少我思考了很久,才明白里面的玄妙。

是的。你没有看错,这里的第一段代码,无论你点击哪一个链接,输出的都是 I am link # 8.

第二段代码,才是你真正想要的结果,那么为什么呢。

看下面的代码:

var elems = document.getElementsByTagName('a'); for (var i = 0; i < elems.length; i++) { 
alert(i); 
elems[i].addEventListener('click', function (e) { 
e.preventDefault(); 
alert('I am link #' + i); 
//注意这里的回调函数只有的触发的时候才会启动 
//一样,这里的i的值也一样在循环结束的时候也变化了 
}, 'false'); 
//原因在于 
//这里的elems[i] 虽然是引用的元素 
//但是回调函数中的i 已经在循环结束后 
//变成了8(如果 elems 的长度是 8 的话) 
}

var elems = document.getElementsByTagName('a'); for (var i = 0; i < elems.length; i++) { 
(function(index){ 
elems[i].addEventListener('click', function (e) { 
e.preventDefault(); 
alert('I am link #' + index); 
}, 'false'); 
})(i); 
//而这里的则不一样 
//虽然循环结束后i 的值变成了8 
//但是在封装在闭包内的index 确实一直被locked 住的 
//一直保存在内存中。 
//准确的说 应该是整个函数都lock在内存中. 
}

这里可能需要一些javascript闭包的知识。

以上代码,想了很久,记录下来,以防止忘记。

Javascript 相关文章推荐
javascript奇异的arguments分析
Oct 20 Javascript
更优雅的事件触发兼容
Oct 24 Javascript
什么是Node.js?Node.js详细介绍
Jun 01 Javascript
深入探寻seajs的模块化与加载方式
Apr 14 Javascript
Bootstrap表格和栅格分页实例详解
May 20 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
Aug 24 Javascript
Bootstrap栅格系统简单实现代码
Mar 06 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
May 10 Javascript
浅谈如何通过node.js对数据进行MD5加密
May 16 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
Jun 26 Javascript
JavaScript动态检测密码强度原理及实现方法详解
Jun 11 Javascript
js脚本中执行java后台代码方法解析
Oct 11 Javascript
纯js简单日历实现代码
Oct 05 #Javascript
JS教程:window.location使用方法的区别介绍
Oct 04 #Javascript
js中单引号与双引号冲突问题解决方法
Oct 04 #Javascript
jquery parent和parents的区别分析
Oct 02 #Javascript
jQuery插件 selectToSelect使用方法
Oct 02 #Javascript
jquery定时滑出可最小化的底部提示层特效代码
Oct 02 #Javascript
jquery实现多级下拉菜单的实例代码
Oct 02 #Javascript
You might like
PHP判断是否是微信打开,浏览器打开的方法
2018/03/14 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
如何用javascript判断录入的日期是否合法
2007/01/08 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
2014/06/02 Javascript
PHP结合jQuery实现红蓝投票功能特效
2015/07/22 Javascript
JavaScript实现添加及删除事件的方法小结
2015/08/04 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
2016/05/09 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
2016/06/21 Javascript
js实时获取窗口大小变化的实例代码
2016/11/18 Javascript
基于Require.js使用方法(总结)
2017/10/26 Javascript
详解Angular中通过$location获取地址栏的参数
2018/08/02 Javascript
NodeJs crypto加密制作token的实现代码
2019/11/15 NodeJs
使用Vue实现简单计算器
2020/02/25 Javascript
react 原生实现头像滚动播放的示例
2020/04/21 Javascript
微信小程序学习总结(一)项目创建与目录结构分析
2020/06/04 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
2020/06/24 jQuery
python实现socket端口重定向示例
2014/02/10 Python
Python爬取Coursera课程资源的详细过程
2014/11/04 Python
python&amp;MongoDB爬取图书馆借阅记录
2016/02/05 Python
Python中的命令行参数解析工具之docopt详解
2017/03/27 Python
梯度下降法介绍及利用Python实现的方法示例
2017/07/12 Python
Python获取当前页面内所有链接的四种方法对比分析
2017/08/19 Python
Python编程实现蚁群算法详解
2017/11/13 Python
微信跳一跳游戏python脚本
2020/04/01 Python
500行Python代码打造刷脸考勤系统
2019/06/03 Python
python opencv minAreaRect 生成最小外接矩形的方法
2019/07/01 Python
Python多线程:主线程等待所有子线程结束代码
2020/04/25 Python
Python 在函数上添加包装器
2020/07/28 Python
Omio荷兰:预订火车、巴士和机票
2018/11/04 全球购物
澳大利亚领先的时尚内衣零售商:Bras N Things
2020/07/28 全球购物
婚礼证婚人演讲稿
2014/09/13 职场文书
2014年终工作总结范本
2014/12/15 职场文书
喋血孤城观后感
2015/06/08 职场文书
六五普法心得体会2016
2016/01/21 职场文书
Win10 和 Win11可以共存吗? win10/11产品生命周期/服务更新介绍
2021/11/21 数码科技
SQL Server中的游标介绍
2022/05/20 SQL Server