博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
javascript闭包传参和事件的循环绑定
阅读量:6716 次
发布时间:2019-06-25

本文共 2283 字,大约阅读时间需要 7 分钟。

今天看到一个javascript的题目,按常理循环绑定事件,但是得到的结果却不是想要的。

text 
link

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:

                      
闭包演示

产品一

产品二

产品三

产品四

产品五

 

1、将变量 i 保存给在每个段落对象(p)上

function init() {       var pAry = document.getElementsByTagName("p");       for( var i=0; i

2、将变量 i 保存在匿名函数自身 

function init2() {       var pAry = document.getElementsByTagName("p");       for( var i=0; i

 

3、加一层闭包,i以函数参数形式传递给内层函数

function init3() {       var pAry = document.getElementsByTagName("p");       for( var i=0; i

 

4、加一层闭包,i以局部变量形式传递给内存函数

function init4() {       var pAry = document.getElementsByTagName("p");       for( var i=0; i

 

5、加一层闭包,返回一个函数作为响应事件(注意与3的细微区别)

function init5() {       var pAry = document.getElementsByTagName("p");       for( var i=0; i

 

6、用Function实现,实际上每产生一个函数实例就会产生一个闭包

function init6() {         var pAry = document.getElementsByTagName("p");         for( var i=0; i

 

7、用Function实现,注意与6的区别

function init7() {         var pAry = document.getElementsByTagName("p");         for( var i=0; i

总结完成,欢迎拍砖!

转载于:https://www.cnblogs.com/zhidong123/p/3662013.html

你可能感兴趣的文章
我的VSTO之路(二):VSTO程序基本知识
查看>>
DataTable.Compute 性能慢的问题
查看>>
分层是一种思想
查看>>
Prime Ring Problem
查看>>
Windows系统bug
查看>>
Chrome应用技巧之代码整理。
查看>>
Linux下配置Hadoop 1.2.1
查看>>
Fluentd 例子
查看>>
解决上传服务器端文字乱码
查看>>
java多线程(同步与死锁问题,生产者与消费者问题)
查看>>
Atitit. atiOrder Order 订单管理框架的设计
查看>>
5-2-三元组顺序表(稀疏矩阵)-数组和广义表-第5章-《数据结构》课本源码-严蔚敏吴伟民版...
查看>>
【系统】CentOS、Ubuntu、Debian三个linux比较异同
查看>>
浅谈web网站架构演变过程
查看>>
php socket 模型及效率问题
查看>>
路漫漫其修远兮,吾将上下而求索——小酌重构系列[0]开篇有益
查看>>
[javaSE] 位运算符(&|^)
查看>>
自定义控件 横向滑动控件 总结
查看>>
keil l251 command summary --Lib
查看>>
Hibernate Cascade
查看>>