JS闭包解决js for循环输出i为同一值的方案

最近在做一个项目,发现js for循环变量输出的i老是同一个值,想到了以前做的项目也涉及到js闭包,重新整理代码发出来做一个笔记,初学者一看即懂,大神可以略过了。

JS闭包特性:

①函数嵌套函数

②函数内部可以引用函数外部的参数和变量

③参数和变量不会被垃圾回收机制回收

直接上代码:

    <div id="demo"></div>
    <br />
    <div id="demo2"></div>
    <script>
        $(function () {
            var init = function () {
                _onClick = function (obj, _item) {
                    //将i传入到(外部)函数函数执行,作用域为该方法内有效
                    obj = $(obj).click(_item, function (e) {
                        alert(_item);
                    });
                    return obj;
                }
                for (var i = 0; i < 10; i++) {
                    //方法①jQuery解决方案
                    var div_item = _onClick("<div>" + i + "</div>", i);
                    div_item.css({ "width": "200px", "height": "30px", "line-height": "30px", "text-align": "center", "background": "#" + Math.floor(Math.random() * 16777215).toString(16) });
                    $("#demo").append(div_item);

                    //方法②源生js解决方案
                    var div_item = document.createElement("div");
                    (function (div_item, i) {
                        var temp = { i: i };//将i保存到当前匿名函数的临时变量,作用域为匿名方法内有效
                        div_item.onclick = function (e, i) {
                            alert(temp["i"]);
                        };
                    })(div_item, i);//执行匿名方法
                    div_item.innerHTML = i;
                    div_item.style.width = "400px";
                    div_item.style.height = "30px";
                    div_item.style.lineHeight = "30px";
                    div_item.style.textAlign = "center";
                    div_item.style.background = "#" + Math.floor(Math.random() * 16777215).toString(16);
                    document.getElementById("demo2").appendChild(div_item);
                }
            }
            init();
        });
    </script>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值