闭包总结,看了秒懂

闭包
1、什么是闭包?
2、闭包的优点?应用在哪里?
3、使用闭包需要注意什么?

1.什么是闭包?

简单的说,就是函数嵌套函数,
内部函数可以引用外部函数的参数和变量
参数和变量不会被垃圾回收机制所回收
Eg:

1
2
3
4
5
6
7
8
9
10
function aaa() {
    var a = 5;
 
    function bbb() {
        console.log(a);
    }
    return bbb;
}
var c = aaa();
c(); //5

闭包总结,看了秒懂

 

2、闭包的优点?

(1)希望或者说可以使一个变量长期驻扎在内存当中
(2)避免全局污染
首页看一个全局变量的例子:
eg:

1
2
3
4
5
6
7
var a=1;
function aaa(){
a++;
console.log(a);
}
aaa();//2
aaa();//3

闭包总结,看了秒懂
然后把这个变量变成局部变量来看一下:

1
2
3
4
5
6
7
function aaa() {
    var a = 1;
    a++;
    console.log(a);
}
aaa(); //2
aaa(); //2

闭包总结,看了秒懂
接下来咱们改成闭包:

1
2
3
4
5
6
7
8
9
10
function aaa() {
    var a = 1;
    return function() {
        a++;
        console.log(a);
    }
}
var b = aaa();
b(); //2
b(); //3

闭包总结,看了秒懂
还可以这样写:

1
2
3
4
5
6
7
8
9
var aaa = (function() {
    var a = 1;
    return function() {
        a++;
        console.log(a);
    }
})();
aaa(); //2
aaa(); //3

闭包总结,看了秒懂
那闭包用在哪里呢?看下面例子

(1)模块化代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var aaa = (function() {
    var a = 1;
 
    function bbb() {
        a++;
        console.log(a);
    }
 
    function ccc() {
        a++;
        console.log(a);
    }
    return {
        b: bbb,
        c: ccc
    }
})();
aaa.b(); //2
aaa.c(); //3
aaa.ccc(); //报错

闭包总结,看了秒懂

继续往下看:

(2)在循环中直接找到对应元素的索引
eg:

1
2
3
4
5
<ul>
   <li>11</li>
   <li>11</li>
   <li>11</li>
</ul>
1
2
3
4
5
6
7
window.onload = function() {
        var aLi = document.getElementsByTagName(li);
        for (var i = 0; i & lt; aLi.length; i++) {
            aLi[i].onclick = function() {
                alert(i); //连续弹出三次3 }
            }
        }

 

上面没有达到闭包效果,那么怎么改写呢?看下面

1
2
3
4
5
6
7
8
9
10
window.onload = function() {
    var aLi = document.getElementsByTagName(‘li’);
    for (var i = 0; i & lt; aLi.length; i++) {
        (function(i) {
            aLi[i].onclick = function() {
                alert(i); //连续弹出三次,分别0 1 2
            }
        })(i);
    }
}

还可以这样改写:

1
2
3
4
5
6
7
8
9
10
window.onload = function() {
    var aLi = document.getElementsByTagName(‘li’);
    for (var i = 0; i & lt; aLi.length; i++) {
        aLi[i].onclick = (function(i) {
            return function() {
                alert(i); //连续弹出三次,分别0 1 2
            }
        })(i);
    }
}

3、闭包注意的地方?继续往下看

在IE浏览器会出现或引起内存泄露,如何解决?
eg:

555
1
2
3
4
5
window.onload = function() {
        var oDiv = document.getElementById(‘d1’);
        oDiv.onclick = function() { //变量引用内部函数
            alert(oDiv.id); //内部函数引用外部对象
        }

//这时候就会出现内存泄露,应该这样解决

1
2
3
4
window.onunload = function() {
    oDiv.omclick = null;
}
}

还可以这样解决:

1
2
3
4
5
6
7
8
window.onload = function() {
    var oDiv = document.getElementById(‘d1’);
    var id = oDiv.id;
    oDiv.onclick = function() {
        alert(id);
    }
    oDiv = null;
}
虚拟主机
《JavaScript高级程序设计(第3版)》PDF
《HTML5 权威指南》PDF
《锋利的jQuery(第2版)》PDF
《你不知道的Javascript(上卷)》PDF
广告也精彩