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代码-----展开收起效果示例
Jul 03 Javascript
textarea 控制输入字符字节数(示例代码)
Dec 27 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
Nov 17 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
Nov 29 Javascript
javascript实现Emrips反质数枚举的示例代码
Dec 06 Javascript
JS实现基于拖拽改变物体大小的方法
Jan 23 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
Mar 22 Javascript
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
vue模块拖拽实现示例代码
Mar 09 Javascript
在vue+element ui框架里实现lodash的debounce防抖
Nov 13 Javascript
Vue Render函数原理及代码实例解析
Jul 30 Javascript
基于JavaScript实现随机点名器
Feb 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 文件编程综合案例-文件上传的实现
2013/07/03 PHP
php魔术函数__call()用法实例分析
2015/02/13 PHP
php源码分析之DZX1.5随机数函数random用法
2015/06/17 PHP
Zend Framework教程之Bootstrap类用法概述
2016/03/14 PHP
PHP命名空间namespace用法实例分析
2016/09/27 PHP
php实现微信和支付宝支付的示例代码
2020/08/11 PHP
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
2007/04/20 Javascript
css把超出的部分显示为省略号的方法兼容火狐
2008/07/23 Javascript
关于可运行代码无法正常执行的使用说明
2010/05/13 Javascript
文本框只能选择数据到文本框禁止手动输入
2013/11/22 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
2016/10/09 Javascript
详解Node.js:events事件模块
2016/11/24 Javascript
微信小程序 免费SSL证书https、TLS版本问题的解决办法
2016/12/14 Javascript
JS前端笔试题分析
2016/12/19 Javascript
深入学习jQuery中的data()
2016/12/22 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
2017/06/26 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
2017/12/24 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
2019/03/15 Javascript
回顾Javascript React基础
2019/06/15 Javascript
[48:11]完美世界DOTA2联赛 Magma vs GXR 第二场 11.07
2020/11/10 DOTA
Python中Collection的使用小技巧
2014/08/18 Python
python修改操作系统时间的方法
2015/05/18 Python
python之virtualenv的简单使用方法(必看篇)
2017/11/25 Python
Python常见数据结构之栈与队列用法示例
2019/01/14 Python
通过python扫描二维码/条形码并打印数据
2019/11/14 Python
Pytest如何使用skip跳过执行测试
2020/08/13 Python
python3中布局背景颜色代码分析
2020/12/01 Python
巴黎卡诗美国官方网站:始于1964年的头发头皮护理专家
2017/07/10 全球购物
总经理岗位职责
2013/11/09 职场文书
车间操作工岗位职责
2013/12/19 职场文书
大学生党员批评与自我批评
2014/09/28 职场文书
党员作风建设整改方案
2014/10/27 职场文书
2015年党日活动总结范文
2015/03/25 职场文书
公司副总经理岗位职责
2015/04/08 职场文书
Vue2.0搭建脚手架
2022/03/13 Vue.js
Python之Matplotlib绘制热力图和面积图
2022/04/13 Python