最近在做一个项目,发现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>