概念:
封闭了外部函数作用域中变量的内部函数,并且返回该内部函数，该变量称为自由变量，也可以叫做闭包变量. 即便返回该外部函数，由于内部函数的间接引用该变量，当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>