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 相关文章推荐
5个javascript的数字格式化函数分享
Dec 07 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
Aug 24 Javascript
基于javascript编写简单日历
May 02 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
May 17 Javascript
react-router实现跳转传值的方法示例
May 27 Javascript
vue路由跳转时判断用户是否登录功能的实现
Oct 26 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
Jul 05 Javascript
React-router4路由监听的实现
Aug 07 Javascript
vue2.x数组劫持原理的实现
Apr 19 Javascript
详谈vue中router-link和传统a链接的区别
Jul 22 Javascript
JavaScript代码模拟鼠标自动点击事件示例
Aug 07 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 jQuery
纯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新手上路(九)
2006/10/09 PHP
php发送post请求函数分享
2014/03/06 PHP
PHP开发实现快递查询功能详解
2019/04/08 PHP
js格式化时间小结
2014/11/03 Javascript
JS动态日期时间的获取方法
2015/09/28 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
2016/02/23 Javascript
浅析JavaScript Array和string的转换(推荐)
2016/05/20 Javascript
jquery自动补齐功能插件flexselect用法示例
2016/08/06 Javascript
浅谈javascript的闭包
2017/01/23 Javascript
Node.js利用断言模块assert进行单元测试的方法
2017/09/28 Javascript
vue router-link传参以及参数的使用实例
2017/11/10 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
2018/08/25 Javascript
微信小程序缓存过期时间的使用详情
2019/05/12 Javascript
微信小程序用户拒绝授权的处理方法详解
2019/09/20 Javascript
node后端服务保活的实现
2019/11/10 Javascript
[10:39]DOTA2上海特级锦标赛音乐会纪录片
2016/03/21 DOTA
[50:54]完美世界DOTA2联赛 GXR vs IO 第三场 11.07
2020/11/10 DOTA
python的xpath获取div标签内html内容,实现innerhtml功能的方法
2019/01/02 Python
Python操作配置文件ini的三种方法讲解
2019/02/22 Python
Python----数据预处理代码实例
2019/03/20 Python
Python3.5 + sklearn利用SVM自动识别字母验证码方法示例
2019/05/10 Python
Python拆分大型CSV文件代码实例
2019/10/07 Python
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
2013/01/23 HTML / CSS
CSS3过渡transition效果实例介绍
2016/05/03 HTML / CSS
使用css如何制作时间ICON方法实践
2012/11/12 HTML / CSS
Expedia马来西亚旅游网站:廉价酒店,度假村和航班预订
2016/07/26 全球购物
ziaja齐叶雅官方海外旗舰店:来自波兰的天然护肤品牌
2017/01/02 全球购物
Sunglasses Shop英国:欧洲领先的太阳镜在线供应商之一
2018/09/19 全球购物
英国女鞋购物网站:Moda in Pelle
2019/02/18 全球购物
2016年春节慰问信息
2015/03/25 职场文书
乡镇团代会开幕词
2016/03/04 职场文书
创业计划书之闲置物品置换中心
2019/12/25 职场文书
Python 实现Mac 屏幕截图详解
2021/10/05 Python
python中mongodb包操作数据库
2022/04/19 Python
Golang日志包的使用
2022/04/20 Golang
centos7安装mysql5.7经验记录
2022/05/02 Servers