JS中的闭包

什么是闭包？

(function(){
  var local = '你好'
  function fn(){
    console.log(local)
  }
})()

上面的代码就形成了一个闭包：
「函数」和「函数内部能访问到的变量」的总和，就是一个闭包
所以，可以这么说，JS中所有的函数都是闭包。因为JS中所有的函数都可以访问全局变量，那么全局变量和函数就形成了闭包。
闭包不是故意弄出来的东西，而是JS函数作用域的副产品。

函数作用域

ES 5 中只有两种作用域，全局作用域和函数作用域。函数内部的变量可以读取全局作用域中的变量，而函数外部不能读取函数内部定义的变量。而闭包，就是沟通全局作用域和函数作用域之间的桥梁，全局作用域和函数作用域通过闭包来实现变量的连接。

闭包的一般形式

常见的使用闭包的一般形式是使用自执行函数 或 函数里面套函数，目的是为了提供一个函数作用域，隔开函数作用域和全局作用域，达到隐藏变量的目的。使用闭包将变量声明放到函数作用域中，除了这个函数的其他地方就不能访问到这个变量，变量就隐藏了。

闭包的用途

1. 读取函数内部变量

function foo(){
  var xx = '你好'
  return function(){
    return xx
  }
}
// 上面这段代码中，函数 foo 返回的匿名函数与 foo 中的变量 xx 形成了一个闭包。
// foo 返回一个匿名函数，该匿名函数读取 foo 作用域中的变量，之后返回该变量。
// 调用函数 foo ，返回一个匿名函数，再调用该匿名函数，就可以读取 foo 中的变量。

var getVariable = foo()
getVariable()     //  返回  '你好'
console.log(xx)   // 报错，xx 没有被定义

2. 让变量保持在内存中，不被垃圾回收机制回收

function foo(xx){
  return function(){
    return xx++
  }
}
// 上面代码中，使用闭包，多创建了一个匿名函数的作用域来保存变量 xx 的值。
// 在函数 foo 执行之后，xx 的值在匿名函数中被保留下来，不会因为没有被引用而被内存回收 

var fn = foo(1)
fn()   // 1，每一次调用 fn，其实都是在调用 fn（foo 中返回的匿名函数） 作用域中的xx
fn()   // 2，每一次调用 fn，其实都是在调用 fn（foo 中返回的匿名函数） 作用域中的xx
fn()   // 3，每一次调用 fn，其实都是在调用 fn（foo 中返回的匿名函数） 作用域中的xx

var li = document.querySelectorAll('li')
for(var i = 0; i < li.length; i++){
  li[i].onclick = function(){
    console.log(i)
  }
}
// 上面这段代码，每一次点击 li， 都会打印出 5
// 这是因为上面的 i，用的都是同一个作用域下的变量 i，这个作用域之中的 i，在经过 for 循环之后，值会变成 5。

// 而想要让代码达成我们想要的效果，就需要为每一个变量 i 创建一个作用域，
// 使打印出来的每一个变量 i 的作用域不同，就是打印出不同的 i，使用闭包就可以做到。
var li = document.querySelectorAll('li')

for(var i = 0; i < li.length; i++){
  li[i].onclick = (function(i){
    return function(){
      console.log(i)
    }
  })(i)
}
// 上面代码新增了一个函数作用域，用来保存变量 i 的值。新增的函数返回要执行的回调函数，
// 又因为 ‘click’事件是直接执行的，所以，要将返回的函数直接执行，使用自执行函数的方式，来执行返回的回调函数。
// 这时调用的回调函数，每一个 i 都是独立函数作用域之中的 i，它们的值都不一样。

3. 封装私有变量、方法

function fn(a){
  var b = 'hi'
  
  function add(){
    return a++
  }
  
  function reduce(){
    return a--
  }
  
  function getA(){
     return a
  }
  
  function getB(){
    return b
  }
  
  function modefyB(x){
    b = x
    return b
  }
  
  return {
    getA: getA,
    add: add,
    reduce: reduce,
    getB: getB,
    modefyB: modefyB,
  }
}

// 上面的代码封装了两个私有变量和4个私有方法。
// 一个私有变量是参数传入的，一个私有变量是自身定义的。
// 通过私有方法来对私有变量进行操作。

var f1 = fn(1)
var f2 = fn(10)
// f1 和 f2 是两个不同的对象，拥有各自的私有变量和私有方法，分别对 f1 和 f2 进行操作，并不会影响另一个。

f1.getA()  // 1
f1.getB() // 'hi'
f1.modefyB('hello')
f1.getB()  // 'hello'

f2.getA()  // 10
f2.getB()  // 'hi'
f2.modefyB('放心，我不会改变对象f1的。不信你试试？')
f2.getB()  // '放心，我不会改变对象f1的。不信你试试？'

f1.getB() // 'hello'