概念:
封闭了外部函数作用域中变量的内部函数,并且返回该内部函数,该变量称为自由变量,也可以叫做闭包变量. 即便返回该外部函数,由于内部函数的间接引用该变量,当GC检查没有相关对象引用它时,就会释放该资源.
在通过Demo介绍闭包前,先来点开胃小菜吧!
//(1)
function (n) {
alert(n);
} (3); //没有效果
//(2)
(function (n) {
alert(n);
})(3); //会弹出3
//(3)
var b = function (n) {
alert(n);
} (3); //也会弹出3
//(4)
var b1 = function (n) {
alert(n);
}
b1(3); //也会弹出3
/*从上面代码中我可以得出
1.(1)和(2)的区别在于(1)没有执行,(2)执行啦
2.()表示让匿名函数立刻执行
*/
我将通过一些Demo来介绍闭包.
1.
/*
通过下面代码Result1和Result2输出的结果分别是什么了.
结果肯定是不一样的
Method1:输出的是:1-9
Method2:输出的是:9个10
为什么会这样了.
你可以考虑刚才的开胃小菜中的Demo.
下面我们来看下Method1中的
(function (m) {
return m;
})(i);
这个匿名函数返回的是经过运算结果的值,然后赋给数组
接下来我们看下Method2中的
array[j] = function () {
return j;
};
此时数组获取的时该函数的引用,该函数并没有执行
*/
function CreateArray1() {
var array = new Array();
for (var i = 0; i < 10; i++) {
//区别
array[i] = (function (m) {
return m;
})(i);
}
return array;
}
var results1 = CreateArray1();
document.write("Method1 Results:<br/>");
for (var i = 0; i < results1.length; i++) {
document.write(results1[i]+"<br/>");
}
document.write("------------------------<br/>");
document.write("Method2 Results:<br/>");
function CreateArray2() {
var array = new Array();
for (var j = 0; j < 10; j++) {
//区别
array[j] = function () {
return j;
};
}
return array;
}
var results2 = CreateArray2();
for (var i = 0; i < results2.length; i++) {
document.write(results2[i]() + "<br/>");
}
2.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
/*
当我点击例子1,例子2,例子3的时候 分别弹出1,2,3
代码如下:
但是下面的代码没有得到我想要的效果,而是点击所有的"例子"都是4.
这个原因就是闭包造成的.每个点击onclick引用的函数都是alert()
当真个循环结束的时候,alert()函数返回的值是最大值.
怎么解决这个问题了
看func2()
//怎么理解这个话(function (n) { return function () { alert(n) }; })(v);
立刻执行当前函数,当前例子onclick引用的函数就是function () { alert(n) },n的值就是当前v的值
*/
function func1() {
var v;
for (var i = 1; i < 5; i++) {
v = i;
document.getElementById('closureExample' + v).onclick = function () { alert(v) };
}
}
function func2() {
var v;
for (var i = 1; i < 5; i++) {
v = i;
document.getElementById('closureExample' + v).onclick = (function (n) { return function () { alert(n) }; })(v);
}
}
window.onload = function () {
//func1();
func2();
}
</script>
</head>
<body>
<a href="#" id="closureExample1">例子1</a>
<a href="#" id="closureExample2">例子2</a>
<a href="#" id="closureExample3">例子3</a>
<a href="#" id="closureExample4">例子4</a>
</body>
</html>