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 ...
随机推荐
- 5 weekend01、02、03、04、05、06、07的分布式集群的HA测试 + hdfs--动态增加节点和副本数量管理 + HA的java api访问要点
weekend01.02.03.04.05.06.07的分布式集群的HA测试 1) weekend01.02的hdfs的HA测试 2) weekend03.04的yarn的HA测试 1) wee ...
- Ubuntu下Django初体验（三）——django初体验
Django中的重要概念: 一次web访问的实质: 1. 客户发送http请求到web服务回 2. web服务器返回html页面给客户 Django概述: 1. URL配置 建 ...
- 解决oracle_4031错误的方法
原因分析: 大量的硬解析出现,产生大量小的free chunk突然出现大的sql 1.临时方法 alter system flush shared_pool; 2.共享SQL alter system ...
- jQuery基本知识体系图
在w3school学习了jQuery,觉得看了一遍,代码敲了一遍,大概的知识点记住了,不过觉得还是把这些知识点,放到一张图上,形成自己的jQuery的知识体系.能做到,一看到jQuery,脑海就浮现j ...
- Cocos2d 3.0继承自Sprite的类在addChild后出现故障
当继承自Sprite的类被addChild到其它的Node里后出现例如以下图问题,说明没有调用父类Sprite::init()的方法.由于父类Sprite里的_textureAtlas须要初始化为nu ...
- Operfire/XMPP
Operfire/XMPP 关于Openfire.XMPP协议.IM相关知识 基于开源 Openfire 聊天服务器 - 开发聊天记录插件 posted @ 2013-03-29 11:03 hooj ...
- android 67 生成和解析xml
生成xml: package com.itheima.createxml; import java.io.File; import java.io.FileNotFoundException; imp ...
- mybatis10 实现类代理对象开发
mapper实现类代理对象开发 要想让mybatis自动创建dao接口实现类的代理对象,必须遵循一些规则: SqlSession sqlSession = sqlSessionFactory.open ...
- 注释驱动的 Spring cache 缓存介绍--转载
概述 Spring 3.1 引入了激动人心的基于注释(annotation)的缓存(cache)技术,它本质上不是一个具体的缓存实现方案(例如 EHCache 或者 OSCache),而是一个对缓存使 ...
- PureMVC(JS版）源码解析（十）：Controller类
这篇博客我们继续讲解PureMVC的三大核心类(View/Controller/Model)——Controller类.根据PureMVC模块设计,Controller类保存所有的Comm ...