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 相关文章推荐
jQuery实现form表单reset按钮重置清空表单功能
Dec 18 Javascript
JavaScript中原型和原型链详解
Feb 11 Javascript
javascript中scrollTop详解
Apr 13 Javascript
js实现上一页下一页的效果【附代码】
Mar 10 Javascript
jQuery实现自动输入email、时间和域名的方法
Aug 24 Javascript
JavaScript闭包的简单应用
Sep 01 Javascript
浅谈vue.js导入css库(elementUi)的方法
Mar 09 Javascript
node.js到底要不要加分号浅析
Jul 11 Javascript
深入koa-bodyparser原理解析
Jan 16 Javascript
VUE中使用MUI方法
Feb 12 Javascript
js new Date()实例测试
Oct 31 Javascript
一篇文章带你搞懂Vue虚拟Dom与diff算法
Aug 25 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中的日期加减方法示例
2014/08/21 PHP
php通过array_shift()函数移除数组第一个元素的方法
2015/03/18 PHP
PHP+Mysql基于事务处理实现转账功能的方法
2015/07/08 PHP
PHP实现微信支付(jsapi支付)流程步骤详解
2018/03/15 PHP
PHP正则表达式处理函数(PCRE 函数)实例小结
2019/05/09 PHP
PHP+redis实现的限制抢购防止商品超发功能详解
2019/09/19 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
jQuery的强大选择器小结
2009/12/27 Javascript
JS中的public和private对象,即static修饰符
2012/01/18 Javascript
JS生成随机字符串的多种方法
2014/06/10 Javascript
js图片模糊切换显示特效的方法
2015/02/17 Javascript
Bootstrap文件上传组件之bootstrap fileinput
2016/11/25 Javascript
清除js缓存的多种方法总结
2016/12/09 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
Node.js使用MySQL连接池的方法实例
2018/02/11 Javascript
原生JS实现列表内容自动向上滚动效果
2019/05/22 Javascript
详解Vue 如何监听Array的变化
2019/06/06 Javascript
通过javascript实现扫雷游戏代码实例
2020/02/09 Javascript
在Django的session中使用User对象的方法
2015/07/23 Python
对python中类的继承与方法重写介绍
2019/01/20 Python
Python3.5模块的定义、导入、优化操作图文详解
2019/04/27 Python
python中的函数递归和迭代原理解析
2019/11/14 Python
美国知名的时尚购物网站:Anthropologie
2016/12/22 全球购物
英国最大的正宗复古足球衫制造商和零售商:TOFFS
2018/06/21 全球购物
英国标准协会商店:BSI Shop
2019/02/25 全球购物
.NET remoting中对象激活的两种方式
2015/06/08 面试题
Java模拟试题
2014/11/10 面试题
高级编程求职信模板
2014/02/16 职场文书
本科毕业生自荐信
2014/06/02 职场文书
销售2014年度工作总结
2014/12/08 职场文书
委托函范文
2015/01/29 职场文书
杨善洲电影观后感
2015/06/04 职场文书
心术观后感
2015/06/11 职场文书
CAD实训总结范文
2015/08/03 职场文书
2019年年中职场激励人心语录30条
2019/08/07 职场文书
redis实现排行榜功能
2021/05/24 Redis