前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >js 闭包传参_JavaScript闭包演示

js 闭包传参_JavaScript闭包演示

作者头像
全栈程序员站长
发布2022-07-02 15:52:27
3.1K0
发布2022-07-02 15:52:27
举报

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

有个网友问了个问题,如下的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+’)’)

}

}

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档