js 闭包传参_JavaScript闭包演示

js 闭包传参_JavaScript闭包演示有个网友问了个问题,如下的html,为什么每次输出都是5,而不是点击每个p,就alert出对应的1,2,3,4,5。闭包演示functioninit(){varpAry=document.getElementsByTagName(“p”);for(vari=0;ipAry[i].onclick=function(){alert(i);}}}产品一产品二产品三产品四产品五解决方…

大家好,又见面了,我是你们的朋友全栈君。

有个网友问了个问题,如下的html,为什么每次输出都是5,而不是点击每个p,就alert出对应的1,2,3,4,5。

闭包演示

function init() {

var pAry = document.getElementsByTagName(“p”);

for( var i=0; i

pAry[i].onclick = function() {

alert(i);

}

}

}

产品一

产品二

产品三

产品四

产品五

解决方式有两种,

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

function init() {

var pAry = document.getElementsByTagName(“p”);

for( var i=0; 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[i].onclick = function() {

alert(arguments.callee.i);

}).i = i;

}

}

再增加3种

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

function init3() {

var pAry = document.getElementsByTagName(“p”);

for( var i=0; i

(function(arg){

pAry[i].onclick = function() {

alert(arg);

};

})(i);//调用时参数

}

}

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

function init4() {

var pAry = document.getElementsByTagName(“p”);

for( var i=0; 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[i].onclick = function(arg) {

return function() {//返回一个函数

alert(arg);

}

}(i);

}

}

又有一种方法

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

function init6() {

var pAry = document.getElementsByTagName(“p”);

for( var i=0; 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[i].onclick = Function(‘alert(‘+i+’)’)

}

}

29

1

分享到:

js 闭包传参_JavaScript闭包演示

js 闭包传参_JavaScript闭包演示

2008-10-07 21:34

浏览 4492

评论

7 楼

chb2java

2010-11-19

早看早受益!

6 楼

xkxmud

2010-08-10

js 闭包传参_JavaScript闭包演示 

js 闭包传参_JavaScript闭包演示

5 楼

CrystalBear

2010-06-08

第一种方法最好,楼主功力很深哦,竟然知道这么多写法

4 楼

CrystalBear

2010-06-08

闭包中的i是外部函数中变量i的一个引用,当init执行结束后i的值为5,所以p的onclick调用闭包时,i的值已经是5,

js 闭包传参_JavaScript闭包演示

3 楼

yin_bp

2010-05-18

js 闭包传参_JavaScript闭包演示 

js 闭包传参_JavaScript闭包演示

2 楼

xiaomimishiye

2010-05-13

lmh2072005 写道

js 闭包传参_JavaScript闭包演示

1 楼

lmh2072005

2010-05-10

js 闭包传参_JavaScript闭包演示

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/148369.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Dijkstra算法时间复杂度分析[通俗易懂]

    Dijkstra算法时间复杂度分析[通俗易懂]文章目录Dijkstra算法的思路与关键点Dijkstra算法的时间复杂度之前一直默认Dijkstra算法时间复杂度为o(n2)o(n^{2})o(n2),没有思考过具体的时间复杂度,今天把这个弄清楚。Dijkstra算法的思路与关键点思路:广度优先+松弛所有点分为两个集合SSS和TTT,SSS最开始只包括源点sss,剩余点都位于TTT。SSS集合表示已经计算出最短路径的点集合,TTT表示尚未计算出最短路径的点集合。每次从集合TTT中选出一个与集合SSS距离最短的点vvv,将点vvv加

    2022年5月15日
    37
  • elementui快速入门_vue element ui

    elementui快速入门_vue element ui什么是ElementUI这篇文章会告诉你带你快速入门学会ElementUI

    2022年9月7日
    0
  • mysql 数据库连接_java连接oracle数据库

    mysql 数据库连接_java连接oracle数据库原理:Oracle数据网关,就像一个桥梁,贯通oracle数据库和non-oracle数据库。在配置过程中,我们经常讲到的三个重要文件:第一、tnsnames.ora;第二、lisener.ora;第三、init.ora。他们是如何工作呢?比如对一个连接数据库的查询,select*from“tablename”@linkdbname;oracle首先从linkdbname开始,通过dba_d…

    2022年9月14日
    0
  • not apng file怎么解决_function

    not apng file怎么解决_functionpadStartisnotafunction问题描述微信小程序开发时,控制台padStartisnotafunction;解决方案不用这个方法了呗,或者自己重新在String.prototype.padStart中自己实现,毕竟是es6之后的方法,经测试,微信6.6.6版本不支持,6.6.10版本支持,和版本也有一定的关系,期望以后的支持性…

    2022年9月9日
    0
  • PHP编码规范及建议

    PHP编码规范及建议

    2021年10月10日
    38
  • 浏览器javascript 下载m3u8视频合成mp4

    浏览器javascript 下载m3u8视频合成mp4m3u8download.jsdownloadm3u8URLtomp4下载m3u8视频合成一个完整的mp4源码:https://github.com/ccjy88/m3u8download.js功能m3u8downloader是在chrome浏览器中运行的html和js,用于下载m3u8视频。当视频链接比如是https://test-streams.mux.dev/x36xh…

    2022年5月3日
    194

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号