天天看点

闭包初理解

闭包理解:

①理解JS特殊的变量作用域: JS的全局变量可以在局部函数中被引用,但是局部函数内部定义的变量无法在全局中得到引用。————“链式作用域”

②理解闭包: 闭包就是能够读取到其他函数内部变量的函数,本质上,闭包是将函数内部和外部链接起来的桥梁。

闭包用处:

①可以通过闭包读取到函数内部定义的变量;

②可以让函数内部一些变量的值永远存储在内存中(跟JS的垃圾回收机制有关)

使用闭包需要注意:

①不能滥用闭包,否则会造成内存泄漏,造成网页的性能问题。 解决方法:退出函数之前,删除所有不使用的局部变量。

②js引用this时,需要注意this的作用域。

③闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象使用,把闭包当作它的公用方法,把内部变量当作它的私有属性,这时一定要小心,不要随意改变父函数内部变量的值。

闭包例子:

① for(var i = 1; i <= 3; i++){

       (function(i){

          setTimeout(function(){

            console.log(i);

          },0)

        })(i)

      } 

      for(var i = 1; i <= 3; i++){

        setTimeout(function(){

          console.log(i);

        },0)

      }

②$(function(){  

    var con = $("div#panel");  

    this.id = "content";  

    con.click(function(){  

       alert(this.id);//panel  

    });  

});  

$(function(){  

    var con = $("div#panel");  

    this.id = "content";  

    var self = this;  

    con.click(function(){  

       alert(self.id);//content  

    });  

});  

③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/>");

        }

继续阅读