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>