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 ...
随机推荐
- action使用大全
1.Intent的用法: (1)Action跳转 1. 使用Action跳转,当程序AndroidManifest.xml中某一个 Activity的IntentFilter定义了包含Action, ...
- Linux无处不在
Linux is Everywhere从政府.教育.商业和非盈利组织.科研机构几个方面展示了现在都有哪些地方用了Linux.
- GWT事件与ELEMENT绑定
GWT提供了DOM工具,利用美工做好的HTML页面,后台人员结合GWT来开发. Element button = DOM.getElementById("button_a"); D ...
- Android开发环境搭建（图文教程）
昨天又搭建了一次Android的开发环境,尝试了好几种方式,也遇到了一些问题,在此分享一下. 注意:官网公布的最新版本号的SDK和ADT(23.0.0),对于和Eclipse集成的开发环境是有BUG存 ...
- 系统的启动模式(启动级别)的改动---使用upstart启动机制的
/********************************************************************* * Author : Samson * Date ...
- LINUX系统全部参数 sysctl -a + 网络参数设置
http://blog.lifeibo.com/?p=380 1.sysctl sysctl命令被用于在内核运行时动态地修改内核的运行参数,可用的内核参数在目录/proc/sys中 [root@ser ...
- 【转】正确使用Block避免Cycle Retain和Crash
原文地址:http://tanqisen.github.io/blog/2013/04/19/gcd-block-cycle-retain/ 使用指南:http://blog.csdn.net/nic ...
- HDU2017JAVA
字符串统计 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submi ...
- js中跨域请求原理及2种常见解决方案
一.同源策略: 说到跨域请求,首先得说说同源策略: 1995年,同源政策是由 Netscape 公司引入浏览器的.目前,所有浏览器都实行了这个政策. 同源策略是浏览器的一种安全策略,所谓同源是指,域名 ...
- Java递归流程
递归二字顾名思义就是:递过去,归回来.所以我索性叫它做有借有还吧. 下面的例子由c而来: public class Main { publ ...