JavaScript闭包

一、变量作用域

了解闭包之前，我们先简单了解一下JavaScript变量作用域。
首先函数内部可以访问全局变量：

  let a = 1000

  function f1() {
    console.log(a);
  }

  f1() // 1000

函数外部自然无法访问函数内部变量：

 function f2() {
    let b = 1000
  }

  f2()

  console.log(b);  // error  外部无法读取函数内部变量

注：当在函数内部定义变量时，不使用var、let、const命令时，实则是定义了一个‘全局变量’

  function f3() {
    c = 1000 // 不用var、let、const定义
  }

  f3()
  console.log(c); // 1000

事实上，不用var、let、const定义的话，js会默认认为是给window对象添加了一个属性：window.c = 1000

  function f3() {
    c = 1000 // 不用var、let、const定义的话，js会默认认为是给window对象添加了一个属性 // window.c = 1000
  }
  f3()
  console.log(c); // 1000
  console.log(window.c); // 1000

二、闭包的作用

1. 闭包的概念

闭包：闭包是指有权访问另一个函数作用域中的变量的函数
当然还有一些别的对闭包的定义，虽然说法不大相同，但是本质是一样的。

2. 读取函数内部变量

正常情况下我们无法在函数外面获取到函数内部的变量，但有时候需要这样做，这个时候闭包就派上了用场

  function f1() {
    let a = 100
    function child1() {
      return a
    }
    return child1()
  }

  console.log(f1()); // 获取函数内部的变量

在这里child1就是一个闭包。我们知道子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。所以child1可以获取父对象f1的变量，我们将它返回出来，这样就实现了在外部获取f1的变量了。相当于闭包child1为函数内部和外部搭建起了一个桥梁

3. 让变量的值保持在内存

闭包可以让函数内部变量的值始终保持在内存中

function f1() {
    let n = 999;
    function nAdd() {
      n += 1
    }

    function f2() {
      console.log(n);
    }

    return {
      getter: f2,
      setter: nAdd
    };
  }

  let result = f1();
  result.getter(); // 999
  result.setter();
  result.getter(); // 1000
  result.setter();
  result.getter(); // 1001
  result.setter();
  result.getter(); // 1002
  result.setter();
  result.getter(); // 1003

上面代码中，result函数只是返回n的结果，nAdd函数实现每次对变量n加一。我们f1函数只执行了一次，但是n的值却没有被销毁，而是一值在内存中，所以每次相加都是在之前是基础上加1。
原因就在于f1是f2和nAdd的父函数，而f2和nAdd被赋给了一个全局变量，这导致f2和nAdd始终在内存中，而f2和nAdd的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。

三、闭包的缺点

1、由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。

2、闭包会在父函数外部，改变父函数内部变量的值。比如上面的setter:nAdd所以使用的时候一定要小心，不要随便改变父函数内部变量的值。