所谓闭包,概念是父函数的执行虽然完成,但是在父函数中嵌套的子函数仍然可以访问父函数的变量的权利。
就像这样:
<script>
function father() {
var i = 10;
return function () {
console.log(i);
}
}
father()();
</script>
打印输出的结果是10。
那么,我们已经对闭包有了初级的认识了,现在,我们再加深一点儿:
<script>
function father() {
var i = 10;
return function () {
i++;
console.log(i);
}
}
var next = father();
for (var i = 0; i < 5; i++)
{
next();
}
</script>
这段代码在控制台输出的结果是11,12,13,14,15,由此我们可以得出结论,闭包中的数据是存在一个特定的内存区域的(如果学过C语言的同学,是不是觉得有点儿像static呢?哈哈)
但是,我们这儿如果稍微的改变一下,又是另一种情况。
<script>
function father() {
var i = 10;
return function () {
i++;
console.log(i);
}
}
for (var i = 0; i < 5; i++)
{
fathr()();
}
</script>
结果打印出来的都是11,为什么呢,因为我们每次调用的时候,这次的数据将上一次的数据覆盖掉了,所以打印了5次11。
接下来,我们说一个比较常见的应用场景,
<script>
window.onload = function () {
var aAs = document.getElementsByTagName("a");//在页面上放了5个a以便测试
for (var i = 0; i < aAs.length; i++)
{
aAs[i].onclick = function () {
console.log(i);//我们这儿访问的其实是闭包中的数据
}
}
};
</script>
打印出来的i每一个都是5,道理在何处呢?因为这个时候的i已经成了闭包中的数据。
那么,如果我想要打印出对应的索引该怎么办呢?
只需要稍微的进行修改即可:
<script>
window.onload = function () {
var aAs = document.getElementsByTagName("a");//在页面上放了5个a以便测试
for (var i = 0; i < aAs.length; i++)
{
aAs[i].index = i;//动态的挂载在每个a上面它对应的索引值
aAs[i].onclick = function () {
console.log("我的索引:" + this.index);//通过this取出之前我们挂载的索引值。
console.log(i);
}
}
};
</script>
(这儿其实这种做法有点儿做作,我们其实可以在定义a标签的时候这样写,<a index="1">点我</a>,然后在循环的时候,通过getAttribute()来取得当前的索引也可以达到同样的效果。我个人在实际的开发中比较喜欢这样做,因为增加自定义属性,并不会影响什么。)
以上我的理解是在参考了一个著名的老师对闭包的讲解所写,对他表示感谢。