JS 闭包随笔

来源：互联网发布：入骨相思知不知什么时编辑：程序博客网时间：2024/06/11 17:35

概念:

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

         /*         通过下面代码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/>");        }

<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>