<body>
<ul id="ullist">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<button>1</button>
<button>2</button>
</body>
var el = document.getElementById("ullist");
var liel = el.getElementsByTagName("li");
//错误!!每次都弹出遍历完所有的索引值
for (var i = 0; i < liel.length; i++) {
liel[i].onclick = function () {
alert(i);
};
}
//错误!!每次都弹出遍历完所有的索引值
//点击到每一个li的时候弹出对应的位置索引
for (var i = 0; i < liel.length; i++) {
liel[i].onclick = function (num) {
return function () {
alert(num);
}
}(i);//每次都重新传入i
}
//闭包保存变量现场的作用
var btn = document.getElementsByTagName("button");
btn[0].onclick = function () {
var a = 1;
alert(a++);
};//每次点击完毕后就销毁a变量到下次执行时a被重新声明,弹出1;
btn[1].onclick = function () {
var b = 2;
return function () {
alert(b++);
}
}();//函数执行完毕后会自动销毁局部变量,但在闭包内的变量依旧保留,所以重复点击后能累加;
以上讲的都是闭包的应用场景。
现在从原理上讲讲闭包:
var foo = function(){
var bar = function(){
var local = "jububianliang";
return function(){
return local;
}
}
var baz = bar();
console.log(baz());
}
其实闭包还是和辣鸡回收机制相关,有兴趣的同学可以对此去作了解。
对于上一段栗子,一般而言,在bar()函数执行完毕后,局部变量local会随着作用域的销毁而收回。
关键就在于一个返回值是匿名函数,且该匿名函数有访问局部变量local的权限。因此依然可以通过中间函数稍作中转访问。
也就是实现了闭包:实现外部作用域访问内部作用域中变量的方法。