一:闭包的含义:
1)在一个对象(函数)中的函数,引用了这个对象中的变量,这就叫闭包;
2)在一个对象(函数)中的函数的子函数,引用了这个对象中的变量,这也叫闭包;
3)在一个对象(函数)外的函数,引用了这个对象(函数)内的变量,着还叫闭包
二:闭包的好处
1:减少全局变量
function add() {
var a = 0;
return function (){
a++;
alert(a);
}
}
var b = add();
b();//1
b();//2
2:减少传递给函数的参数变量
function crli(base) {
return function(max){
num = 0;
for (var i = 1;i <= max; i++){
num += i;
}
return num + base;
}
}
var sum = crli(2);
alert(sum(3));//8
3:实现封装
(function () {
var a = 0;
function get(){
return a;
}
function set(val){
a = val;
}
window.g = get;
window.s = set;
})()
s(5);
alert(g());//5
三:经典题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="1">1</div>
<div id="2">2</div>
<div id="3">3</div>
<script>
for (var i = 1; i <= 3; i++ ){
var obj = document.getElementById(i);
obj.onclick = function(){
alert(i);
}
}
</script>
</body>
</html>
每次单击都会返回4,因为函数没有块级作用域,所以单击时候调用的i实际是全局变量
解决办法
for (var i = 1; i <= 3; i++ ){
var obj = document.getElementById(i);
obj.onclick = (function(id){
return function(){
alert(id);
}
})(i)
}
上面解决方法中的函数相当于预处理之后得到了3个函数
document.getElementById(1).onclick = function(){
alert(1);
}
document.getElementById(2).onclick = function(){
alert(2);
}
document.getElementById(3).onclick = function(){
alert(3);
}