小白成长之路_今天学到的(2018.4.16)

刚刚困扰许久的问题

用for循环绑定事件执行时总是得到循环的最后一条参数,代码如下

var param = {
    "0":{
        "id":"swipe-top",
        "scope":"0",
        "type":"Swiper",
        "content":[]
    },
    "1":{
        "id":"act-body",
        "scope":"1",
        "type":"Normal",
        "content":[]
    },

}

for(var scope in param){

    $("#"+param[scope].id).click(funciton(){

        show(param[scope]);

    });

}

function show(parm){

    console.log(parm);

}

以上代码执行完绑定的点击事件,无论点击id="swipe-top"或是id="act-body"元素,执行的函数show中得到的参数parm都是最后一个scope为1的参数

想了很久,打了断点改了参数试了几遍,没想到问题所在,后来百度了一下,发现是JS闭包的原因

以前只是知道闭包这个词,总觉得是很重要的一个知识点,但是只是在书本上看到过,也并不清楚它的概念以及原理,工作中并未涉及到

如今遇到了,也算对闭包有了一点实质性的理解了

目前我了解到闭包的一点如以上代码中的for循环绑定事件

我的理解是(并不一定正确),点击事件click中的function函数在绑定时并不执行,而函数中的show函数此时并没有得到实际参数,所以当循环结束,点击事件触发时function执行,此时show函数得到的参数永远是for循环最后一次获取的值param[1]

针对以上问题最终的解决方法如下

for(var scope in param){

    $("#"+param[scope].id).click(

        (function(parm){

    return function(){
                show(parm);
    }

        })(param[scope])

    );

}

click绑定一个立即执行的函数,用当前循环的值param[scope]作为参数,该函数的内容为返回另一个函数,这个返回的函数为click点击事件的最终执行函数,此时show获取的参数parm即是当前循环的值param[i],通过这种方式包装起来的函数就是闭包,有不对的地方望大佬指出。

emmmmmm.....其实之前辛辛苦苦写了一大堆的,发布之后莫名其妙就没了,只留了一半的草稿,CSDN真坑!

阅读更多 登录后自动展开
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页