javascript自启动函数的问题探讨

话不多说了。

先来看两段代码：


代码如下:

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闭包的知识。

以上代码，想了很久，记录下来，以防止忘记。

赞 (0)

相关推荐

  • javascript自启动函数的问题探讨

    话不多说了. 先来看两段代码: 复制代码 代码如下: 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'); } 再看一面一段: 复制代码

  • 从JavaScript纯函数解析最深刻的函子 Monad实例

    目录 序言 纯函数 输入 & 输出 副作用 “纯”的好处 自文档化 组合函数 引用透明性 其它 无形参风格 Monad 结语 序言 转眼间,来到专栏第 3 篇,前两篇分别是: 从历史讲起,JavaScript 基因里写着函数式编程 从柯里化讲起,一网打尽 JavaScript 重要的高阶函数 建议按顺序“食用”.饮水知其源,由 lambda 演算演化而来的闭包思想是 JavaScript 写在基因里的东西,闭包的“孪生子”柯里化,是封装高阶函数的利器. 当我们频繁使用高阶函数.甚至自己不断在封装

  • javascript的函数作用域

    在一些类似c语言的编程语言中,花括号内的每一段代码都具有各自的作用域,而且变量在声明他们的代码段之外是不可见的,我们称为块级作用域(block scope),而javascript中没有块级作用域.取而代之的javascript使用的是函数作用域(function scope):变量在声明它的函数体以及这个函数体嵌套的任意函数体内都是有定义的. 在如下代码中,在不同位置定义的i,j和k,他们再同一个作用域内都是有定义的 复制代码 代码如下: function text(o)   {      

  • 浅析JavaScript 箭头函数 generator Date JSON

    ES6 标准新增了一种新的函数: Arrow Function(箭头函数). x => x *x 上面的箭头相当于: function (x){ return x*x; } 箭头函数相当于匿名函数,并且简化了函数定义.一种像上面的,只包含一个表达式, 连{ ... }和return都省略掉了.还有一种可以包含多条语句,这时候就不能省略{ ... }和return: x =>{ if(x > 0){ return x * x; }else{ return -x *x; } } 如果参数不是

  • Javascript变量函数浅析

    一.变量 在javascript变量中可以存放两种类型的值:原始值和引用值. 原始值存储在栈上的简单字段,也就是值直接存储在变量所标示的位置内. 引用值存储在堆内的对象,栈内变量保存的是指向堆内对象的指针值. 在javascript中有5种基本类型:Undefined,Null,Boolean,Number,String. 引用类型其实就是对象,类似其他语言中类实例的概念. 复制代码 代码如下: var b = true; // 存储在栈上 var num = 20; //存储在栈上 var b

  • JavaScript 匿名函数（anonymous function）与闭包（closure）

    引入 匿名函数 闭包 变量作用域 函数外部访问函数内部的局部变量 用闭包实现私有成员 引入 闭包是用匿名函数来实现.闭包就是一个受到保护的变量空间,由内嵌函数生成."保护变量"的思想在几乎所有的编程语言中都能看到. 先看下 JavaScript 作用域: JavaScript 具有函数级的作用域.这意味着,不能在函数外部访问定义在函数内部的变量. JavaScript 的作用域又是词法性质的(lexically scoped).这意味着,函数运行在定义它的作用域中,而不是在调用它的作用

  • JavaScript自定义函数实现查找两个字符串最长公共子串的方法

    本文实例讲述了JavaScript自定义函数实现查找两个字符串最长公共子串的方法.分享给大家供大家参考,具体如下: //查找两个字符串的最长公共子串 function findSubStr(s1,s2){ var S=sstr= "" ,L1=s1.length,L2=s2.length; if (L1>L2){ var s3=s1;s1=s2,s2=s3,L1=s2.length;} for ( var j=L1;j> 0 ;j--) for ( var i= 0 ;i&

  • 经常用到的javascript验证函数收集第1/3页

    建议大家收藏javascript验证函数,以后遇到就可以直接拿来用了/* ================================================================== 是否为空,只判断字符串 null或0长为空,经过trim IsStringNull(string) ================================================================== */ function IsStringNull(str)

  • javascript的函数

    javascript的函数

    javascript的函数 作者:F. Permadi 译者:Sheneyan(子乌) 时间:2006.01.03 英文原文: INTRODUCTION TO JavaScript Functions 子乌注:一篇相当不错的function入门文章,个人感觉相当经典. 词语翻译列表 function:函数(Function未翻译) declare:定义 assign:指派,分配 functionbody:函数体(就是函数的内容) object:对象 property:属性 unnamed:匿名(

  • 检测一个函数是否是JavaScript原生函数的小技巧

    在我的开发工作中经常会遇到需要判断一个函数是否是JavaScript原生函数的情况,有时候这是一个很必要的工作,你需要知道这个函数是浏览器自身提供的,还是由第三方封装.伪装成原生函数.当然,最好的方法是考察执行这个函数的toString方法的返回值. The JavaScript 完成这个任务的方法非常简单: 复制代码 代码如下: function isNative(fn) {  return (/\{\s*\[native code\]\s*\}/).test('' + fn); } toSt

随机推荐