学习总结の闭包(Closure)

[AngellinaZ]

概览

1. 作用域
2. 外部如何访问局部作用域
3. 闭包的概念
4. 闭包的用处

作用域

ES6之前JS并没有块级作用域， 只有全局作用域和局部作用域(函数作用域)

  var a = 1;
  function fn () {
    var  a = 2;
    console.log('fn: ' + a);  //2
  } 
  console.log('global: ' + a); //1
  fn() ;

特殊之处在于，可以在函数内部读取全局变量

  var a = 1;
  function fn () {
    console.log('fn: ' + a);  //1
  } 
  console.log('global: ' + a); //1
  fn() ;

但函数外部读取不到函数内部的局部变量

  function fn () {
    var  a = 2;
    console.log('fn: ' + a);  
  } 
  console.log('global: ' + a); // error
  fn() ;

注意，函数内部使用 var 进行变量声明，不使用，声明的是全局变量

外部如何访问局部作用域

Javascript语言特有的"链式作用域"结构（chain scope），子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。

  function fn () {
    var  a = 2;
    function fn1() {
        console.log(a)  //2
    } 
    fn1() 
  } 
  fn() ;

如若把函数fn1作为一个返回值，就能在全局访问到函数内部的变量了

  function fn () {
    var  a = 2;
    return function fn1() {
        console.log(a)  
    } 
  } 
  var fn2 = fn() ;
  fn2() //2

闭包的概念

阮一峰老师是这么说的，我觉得理解起来很容易，易懂

闭包就是能够读取其他函数内部变量的函数。
闭包就是将函数内部和函数外部连接起来的一座桥梁

闭包的用处

1. 读取函数内部的变量
2. 让这些变量始终保存在内存中

来自 阮一峰

    function f1(){
　　　var n=999;
　　　nAdd=function(){n+=1}
　　　function f2(){
　　　　　alert(n);
　　　}
　　　return f2;
    }
　var result=f1();
　result(); // 999
　nAdd();
　result(); // 1000

以上代码的运行结果说明，函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除。

为什么会这样呢？原因就在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。

这段代码中另一个值得注意的地方，就是"nAdd=function(){n+=1}"这一行，首先在nAdd前面没有使用var关键字，因此nAdd是一个全局变量，而不是局部变量。其次，nAdd的值是一个匿名函数（anonymous function），而这个匿名函数本身也是一个闭包，所以nAdd相当于是一个setter，可以在函数外部对函数内部的局部变量进行操作。

使用注意点

1. 由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

2. 闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。