javascript闭包传参和事件的循环绑定
今天看到一个javascript的题目，按常理循环绑定事件，但是得到的结果却不是想要的。
<a href="#">text</a>
<br>
<a href="#">link</a>
<script>
var as = document.getElementsByTagName('a');
for ( var i = as.length; i--; ) {
as[i].onclick = function() {
alert(i);
return false;
}
}
</script>
1.这个代码点击链接弹出的i都是-1,这是为啥呢？
简单来说就是函数变量作用域问题，如果把function() { alert(i); return false; } 当做一个函数 a();a()内部未定义变量i,但是内部使用了，于是向外查找,找到for循环里定义的i，点击事件是for循环完毕后才开始执行的，执行完毕后i的值已经变成-1；所以每次弹出的都是-1；
2. 2个参数的for循环也不常见！疑惑？
for（语句1，语句2，语句3）{
//todo
}
a.for循环条件
通常说语句1、语句2、语句3都是可选的。
b.语句 2：
通常语句 2 用于评估初始变量的条件。
语句 2 同样是可选的。
如果语句 2 返回 true，则循环再次开始，如果返回 false，则循环将结束。
提示：如果您省略了语句 2，那么必须在循环内提供 break。否则循环就无法停下来。这样有可能令浏览器崩溃。
c.关于 i--判断：
判断i--true /false的时候是先判断i再运算i--的。进入最后一次判断 i--的时候其实判断 i==0的时候，判断后又执行了一次i--,for循环终止， 于是i的值变成了-1;
var i = 1;
!!i--;//ture
解决方法：
var as = document.getElementsByTagName('a');
for ( var i = as.length; i--; ) {
(function(i){
as[i].onclick = function() {
alert(i);
return false;
}
})(i)
}
或者：
var as = document.getElementsByTagName('a');
for ( var i = as.length; i--; ) {
var a = function(i){
as[i].onclick = function() {
alert(i);
return false;
}
}
a(i);
}
----------------------------------------------------------------------------------------------
其他网友7中解决方法demo：
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>闭包演示</title>
<script type="text/javascript"> function init() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
pAry[i].onclick = function() {
alert(i);
}
}
}
</script>
</head>
<body onload="init();">
<p>产品一</p>
<p>产品二</p>
<p>产品三</p>
<p>产品四</p>
<p>产品五</p>
</body>
</html>
1、将变量 i 保存给在每个段落对象（p）上
function init() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
pAry[i].i = i;
pAry[i].onclick = function() {
alert(this.i);
}
}
}
2、将变量 i 保存在匿名函数自身
function init2() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
(pAry[i].onclick = function() {
alert(arguments.callee.i);
}).i = i;
}
}
3、加一层闭包，i以函数参数形式传递给内层函数
function init3() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
(function(arg){
pAry[i].onclick = function() {
alert(arg);
};
})(i);//调用时参数
}
}
4、加一层闭包，i以局部变量形式传递给内存函数
function init4() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
(function () {
var temp = i;//调用时局部变量
pAry[i].onclick = function() {
alert(temp);
}
})();
}
}
5、加一层闭包，返回一个函数作为响应事件（注意与3的细微区别）
function init5() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
pAry[i].onclick = function(arg) {
return function() {//返回一个函数
alert(arg);
}
}(i);
}
}
6、用Function实现，实际上每产生一个函数实例就会产生一个闭包
function init6() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
pAry[i].onclick = new Function("alert(" + i + ");");//new一次就产生一个函数实例
}
}
7、用Function实现，注意与6的区别
function init7() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
pAry[i].onclick = Function('alert('+i+')')
}
}
总结完成，欢迎拍砖！
javascript闭包传参和事件的循环绑定的更多相关文章
- javascript闭包传参就这么简单
var query = (function (a) { return a; })('fx'); alert(query);
- 闭包传参 余额计算 钩子hook 闭包中的this JavaScript 钩子
闭包传参 余额计算 钩子hook 小程序 a=function(e){console.log(this)}() a=function(e){console.log(this)}() VM289 ...
- webpack+vue 组件间传参(单一事件中心管理组件通信--$root)，如果有路由的话会失效
先给一个例子: <body> <div id="box"> <com-a></com-a> <com-b></co ...
- elementUi中的计数器ele-mumber中的change事件传参及事件调用
业务场景是需要在点击业务工作量的时候设置任务工作量这一项的评分不能大于任务质量及任务时限的权重之和除以二 上代码 JS逻辑代码 因出现弹出层提示后设置输入框的值如果大于sum的值,设置输入的值为sum ...
- Javascript 函数传参问题
属于传值,不能改变参数的属性 example 1 function Myvalue(){ var arry = 5; return arry ; } document.getElementById( ...
- 从一道面试题分析javascript闭包
据说是一不注意就会做错的五道javascript面试题之一,我们来看看这道题长什么样 function Container( properties ) { var objthis = this; fo ...
- C# 线程传参
传参方式有两种: 1.创建带参构造方法类 传参 2.利用Thread.start(8)直接传参,该方法会接收一个对象,并将该对象传递给线程,因此在线程中启动的方法 必须接收object类型的单个参数. ...
- 【WPF】CommandParameter解决多传参问题
方法一:传参按钮控件自身绑定的ItemSource 用WAF框架实现MVVM,按钮的点击事件都要通过Command来传递到这个View对应的ViewModel上,再通过ViewModel传递到上层的C ...
- react-绑定this并传参的三种方式
绑定this并传参的三种方式 在事件中绑定this并传参: <input type="button" value="在事件中绑定this并传参" onCl ...
随机推荐
- POJ 1325、ZOJ 1364、HDU 1150 Machine Schedule - from lanshui_Yang
Problem Description As we all know, machine scheduling is a very classical problem in computer scien ...
- Intent是什么？
一.理解Intent: 在一个Android应用中,主要是由四种组件组成的,这四种组件可参考“Android应用的构成”.而这四种组件是独立的,它们之间可以互相调用,协调工作,最终组成一个真正的And ...
- having的用法以及与where区别介绍
having子句可以让我们筛选成组后的各种数据,having子句在查询过程中慢于聚合语句,接下来通过实例介绍下,感兴趣的你可以参考下,希望可以帮助到你 having的用法 having子句可以让我们筛 ...
- sqlserver 存储过程中拼接sql语句 动态执行
ALTER PROC [dbo].[Student_Friend_Get] @startRowIndexId INT, @maxNumberRows INT, @schoolId INT, @grad ...
- 【转】YUV420P的格式以及转换为RGB565的代码（Android摄像头的输出一般为YUV420P）
http://blog.csdn.net/daisyhd/article/details/38866809 static void cvt_420p_to_rgb565(int width, int ...
- XC文件管理器（Android应用）
XC文件管理器,是基于Android4.4开发的一个方便易用的文件管理器,具有文件的目录管理和文件的管理,主要包括文件的新建.删除.重命名.复制,移动剪切以及文件详情查看等文件和目录的功能,同时支持文 ...
- 用php切割大图片为成规则的小图
将根据xml配置,将合并后的大图切割成一系列小图 <?php /** * 将大图片按照配置切割成一定比例的小图片 * 并按照一定规则给小图片命名 * * 使用方法: *根据guardians/g ...
- 删除mysql重复记录的办法
网上有很多的办法,但是大多数都是通过临时表的办法,其实你是可以用一句简单的sql就可以做到: alter ignore table SOMETABLE add primary key(fields n ...
- CI框架篇之预热篇（1）
CodeIgniter 的基本都了解了,现在就开始预热,如果学习一门语言一样,我们最开始都是输出一个'HELLO WORLD'一样, 现在我们也通过输出这样一个内容,来了解基本的使用. CodeIgn ...
- ASP.NET 相关小知识
后台修改前台html控件属性 添加 runat=server ,后台获取// 客户端隐藏 a.Attributes[ "style "] = "display:none ...