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 相关文章推荐
js输出列表实现代码
Sep 12 Javascript
jquery操作cookie插件分享
Jan 14 Javascript
node.js开机自启动脚本文件
Dec 24 Javascript
简单的jQuery banner图片轮播实例代码
Mar 04 Javascript
JS、jQuery中select的用法详解
Apr 21 Javascript
js+html5实现canvas绘制椭圆形图案的方法
May 21 Javascript
JavaScript SHA-256加密算法详细代码
Oct 06 Javascript
走进javascript——不起眼的基础,值和分号
Feb 24 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
Mar 02 Javascript
weex里Vuex state使用storage持久化详解
Sep 09 Javascript
详解js的作用域、预解析机制
Feb 05 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
Nov 07 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常用字符串的总结(待续)
2013/06/07 PHP
php.ini 配置文件的深入解析
2013/06/17 PHP
php获取当前页面完整URL地址
2015/12/30 PHP
thinkphp框架下404页面设置 仅三步
2016/05/14 PHP
详解PHP中foreach的用法和实例
2016/10/25 PHP
基于CI框架的微信网页授权库示例
2016/11/25 PHP
Ext面向对象开发实践(续)
2008/11/18 Javascript
用html+css+js实现的一个简单的图片切换特效
2014/05/28 Javascript
深入理解JS中的substr和substring
2016/04/26 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
2020/12/22 Javascript
jQuery实现调整表格单列顺序完整实例
2016/06/20 Javascript
JS简单生成随机数(随机密码)的方法
2017/05/11 Javascript
Vue.js实现微信过渡动画左右切换效果
2017/06/13 Javascript
深入理解Vue transition源码分析
2017/07/30 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
2017/08/07 Javascript
jQuery ajax读取本地json文件的实例
2017/10/31 jQuery
从parcel.js打包出错到选择nvm的全部过程
2018/01/23 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
2018/11/04 Javascript
vuex actions异步修改状态的实例详解
2019/11/06 Javascript
JS如何监听div的resize事件详解
2020/12/03 Javascript
[54:54]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python使用Flask操作mysql实现登录功能
2018/05/14 Python
python实现基于信息增益的决策树归纳
2018/12/18 Python
Django集成CAS单点登录的方法示例
2019/06/10 Python
Python中输入和输出(打印)数据实例方法
2019/10/13 Python
pytorch实现从本地加载 .pth 格式模型
2020/02/14 Python
为女性购买传统的印度服装和婚纱:Kalkifashion
2019/07/22 全球购物
美国在线家具网站:GDFStudio
2021/03/13 全球购物
连锁经营管理专业大学生求职信
2013/10/30 职场文书
大学生的网络创业计划书
2013/12/26 职场文书
党的群众路线教育实践活动个人对照检查材料(教师)
2014/11/04 职场文书
《金钱的魔力》教学反思
2016/02/20 职场文书
2019年国庆祝福语(70句)
2019/09/19 职场文书
一文帮你理解PReact10.5.13源码
2021/04/03 Javascript
CSS几步实现赛博朋克2077风格视觉效果
2021/06/16 HTML / CSS
win10双系统怎么删除一个系统?win10电脑有两个系统删除一个的操作方法
2022/07/15 数码科技