javascript自启动函数的问题探讨
发布时间:2024-04-30 08:55:57
标签:自启动,函数
话不多说了。
先来看两段代码:
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闭包的知识。
以上代码,想了很久,记录下来,以防止忘记。


猜你喜欢
- 系统环境为server20121、下载mysql解压版,解压安装包到指定目录2、在以上目录中,复制一份my-default.ini文件,重命
- 当初次在机器上安装完Mysql时,你可以匿名进行访问数据库或者以不带口令的root身份进入数据库.另外如果你是一个管理员,你还要进行一些用户
- 如下所示:data_array = np.loadtxt(filename, #文件名  
- 一:购物车管理功能1.添加商品(不重复添加)、2.删除商品(购物车中有的才能删除)、3.查看购物车4.退出系统产品列表products =
- 如下所示:#获得视频的格式videoCapture = cv2.VideoCapture('/home/lw/3661.mp4
- 大家都遇到过验证码,随着灌水机的发展,验证码也是日新月异,验证码开始分了繁体简体,带着字母、符号,甚至开始了中文验证码,看到这样的验证码,估
- 我就废话不多说了,还是直接看代码吧!#!/usr/bin/env python3#coding = utf-8def is_triangle
- mysql创建存储过程的官方语法为:START TRANSACTION | BEGIN [WORK]COMMIT [WORK] [AND [
- FTP一般流程FTP对应PASV和PORT两种访问方式,分别为被动和主动,是针对FTP服务器端进行区分的,正常传输过程中21号端口用于指令传
- 使用原生SQL语句进行对数据库操作,可完成数据库表的建立和删除,及数据表内容的增删改查操作等。其可操作性很强,如可以直接使用“show da
- pymysql的executemany使用在使用pymysql的executemany方法时,需要注意的几个问题1、在写sql语句时,不管字
- 微博模拟登录这是本次爬取的网址:https://weibo.com/一、请求分析找到登录的位置,填写用户名密码进行登录操作看看这次请求响应的
- 如何制作一个小巧的购物车?主程序如下:cartkit.aspClass CartKitSub CreateCart()&
- 作为一个合格的开发者,在本地环境下完成开发还远远不够,我们需要把Web App部署到远程服务器上,这样,广大用户才能访问到网站。很多做开发的
- 如代码1所示: // 代码 1 // 外观层类 class LWordHomePage { // 添加留言 public function
- python数据结构之 列表和元组序列:序列是一种数据结构,它包含的元素都进行了编号(从0开始)。典型的序列包括列表、字符串和元组。其中,列
- 当你的查询相对简单的时候,每次从头开始创建SQL语句也不费什么工夫,不过,复杂的查询就不同了,每次都从头来会产生很多开发错误。因此,一旦让S
- 本周的豆知识分享就来深入研究一下window.event对象。请先看看下边的代码片断。 <button id=”btn”&g
- import osimport sysimport MySQLdbdef getStatus(conn):  
- 1. 介绍-- PHP5添加了一项新的功能:Reflection。这个功能使得phper可以reverse-engineer class,