JS 理解闭包

Posted 2020-06-20 Krystal_M

   闭包是js的一个难点，许多高级应用都需要用闭包实现。要理解闭包，首先必须理解javascript特殊的变量作用域，其次是垃圾回收机制。

一、理解变量作用域

  ①  变量分为全局变量和局部变量，在函数内部可以直接读取全局变量，如：

 var a = 100;

function x1(){

   alert(a);

}

x1();  //得到 100

   而在函数外部，自然无法读取函数内部的局部变量，如：

 function x1(){

   var a = 100;

 }

 alert(a);//error

ps:如果在函数内部声明变量时不用var命令，意味声明了一个全局变量，那么函数外部可以调用，如：

  function x2(){

  b = 150; 

}

 x2();

alert(b);//得到150

② 如何从外部读取局部变量？

可以在函数的内部再定义一个函数，如：

  function x1(){

    var n = 200;

    function x2(){

      alert(n); //得到200;

   }

 }

以上代码，x2包含在x1中，x1中的所有局部变量对x2都是可见的，反之却不行，即“链式作用域结构”。

x2可以读取x1的变量，那么将x2作为返回值，便可以在x1外部读取x1内部的变量了。即：

 function x1(){

   var n = 200;

    function x2(){

     alert(n);//200

   }

   return x2;

}

  var result = x1();

  result();//200

 

以上代码中的x2函数就是闭包。

二、理解闭包

      简单理解，闭包就是可以读取其他函数内部变量的函数，即：定义在一个函数内部的函数。

闭包的作用不仅能读取函数内部的变量，还能让这些变量的值始终保持在内存中。

例：function x1(){

      var a = 999;

        add = function(){a+=1};

       function x2(){

        alert(a);

   }

   return x2;

  }

  var result = x1();

  result(); //999

  add();

  result();//1000

以上代码，result实际就是闭包x2函数，一共运行两次，一次为999，一次1000，说明函数x1中的局部变量a一直保存在内存中，并没有在x1调用后被自动清除。add变量前没有声明var ，即一个全局变量，并且add的值是一个匿名函数，这个匿名函数本身也是一个闭包，因此可以在函数外部对函数内部的局部变量进行操作。

ps:因为变量都会保存在内存中，内存消耗很大，因此不能滥用闭包，避免造成网页的性能问题。

简单总结：

1、闭包外层是个函数
2、闭包内部都有函数
3、闭包会return内部函数
4、闭包返回的函数内部不能有return.(因为这样就真的结束了)
5、执行闭包后,闭包内部变量会存在,而闭包内部函数的内部变量不会存在