JavaScript闭包函数应用

作者:陆金龙    发表时间:2015-07-12 15:24   


JavaScript函数闭包应用场景:

需求:在循环中绑定click事件,要求点击某个按钮时,弹出显示该按钮的索引。

普通绑定面临的问题:变量msg的值虽循环次数发生变化,要关联到按钮绑定的事件中,常规方式难以实现。 如点击"普通绑定"后,每个按钮点击时,弹出都是“第5个按钮”,显然不是我们预期的。

预期:通过闭包,将msg的值"固化"到闭包函数中,并将闭包函数绑定到按钮的点击事件上。

JavaScript代码清单:

function closurefunTest() {
            var btns = $("#divPanel input");
            $(btns).unbind("click");
            for (var i = 0; i < btns.length; i++) {
                var msg = "第" + i + "个Button";
                var clickCall = getClickCall(msg);
                //$(btns[i]).click(function () {
                //clickCall();
                //}); 
                //以上为错误的用法,click执行时才使用到clickCall,此时clickCall又被修改了,只有最后一个i的值被使用到
                $(btns[i]).click(clickCall); //正确用法:click绑定时即使用clickCall(不后续循环的影响),每个每次循环中i都被用到了。
            }
        }

        function getClickCall(msg) {
            var localfun = function () {
                alert(msg);
            }
            return localfun;
        }


        function normalfunTest() {
            var btns = $("#divPanel input");
            $(btns).unbind("click");
            for (var i = 0; i < btns.length; i++) {
                var btn = btns[i];
                $(btn).click(function () {
                    alert("第" + i + "个Button");
                });
            }
        }

Html中body清单:

 <p>
        <input type="button" value="普通绑定" onclick="normalfunTest();" />
        <input type="button" value="使用闭包" onclick="closurefunTest();" />
    </p>
    <div id="divPanel">
        <input type="button" id="button1" value="button1" />
        <input type="button" id="button2" value="button2" />
        <input type="button" id="button3" value="button3" />
        <input type="button" id="button4" value="button4" />
        <input type="button" id="button5" value="button5" />
    </div>
    <span id="msg"></span>
 

JavaScript函数闭包演示