如何产生闭包

当一个嵌套的内部函数（子函数），引用了嵌套的外部函数（父函数）的变量或函数时，就产生了闭包

function fn1(){
    var a = 2
    function fn2(){ //当内部函数定义的时候，闭包就已经产生了，而不是在内部函数被调用的时候
        console.log(a)
    }
    fn2()
}

fn1()

闭包的产生与死亡

• 产生闭包的条件
  • 函数发生嵌套
  • 内部函数引用了外部函数的数据
  • 外部函数被调用
• 闭包产生于内部函数定义的时候
• 当嵌套的内部函数的对象失去引用，成为垃圾对象时，闭包就死亡了

常见的闭包

• 将函数作为另一个函数的返回值

  function fn1(){
    var a = 2
    function fn2(){
        a++
        console.log(a)
    }
    return fn2
  }
  var f = fn1()
  f() //输出3
  f() //输出4
  

  此时a虽然是fn1的本地变量，但是a并没有被回收。这段代码产生了一个闭包，因为外部函数fn1只执行了一次

  逐行分析：

  • 1~8行：在全局执行上下文中，定义了一个函数fn1

  • 9行：声明了一个全局变量f去接收fn1的执行结果

  • 10行：调用f，跳至第2行，此处产生了一个fn1的本地执行上下文，声明了一个本地变量a并赋值为2

    • 3~6行：定义了一个内部函数fn2
    • 7行：将fn2作为函数fn1的返回值（注意这里是返回函数fn2的内容，而不是fn2的调用结果）

  • 10行：此时调用f相当于调用了fn2，产生了一个fn2的本地执行上下文，在里面寻找变量a，找不到，于是去外一层的执行上下文，即fn1的里面去找，得到a的值为2，于是a++，此时a的值为3，并打印出3。打印完成后a的值依旧存在在内存中

  • 11行：再次调用f，也就是再次在全局执行上下文中调用fn2，此时a的值为3，调用fn2将a的值变为4并打印出来，此时a的值依旧存在在内存里

• 将函数作为实参，传递给另一个函数进行调用

  function showDelay(msg, time){
    setTimeout(function (){
        alert(msg)
    }, time)
  }
  showDelay('哈库那马塔塔', 1000)
  

  此处的外部函数名为showDelay，内部函数是一个匿名函数，在内部函数中引用了外部函数的数据msg，满足闭包产生的条件

闭包有什么用

function fn1(){
    var a = 2
    function fn2(){
        a++
        console.log(a)
    }
    return fn2
}
var f = fn1()
f() 

f = null //此时闭包死亡

• 对于这段代码，a其实是函数fn1的内部变量，正常情况下在全局执行上下文是无法直接操作a的，但是通过将一个可以调用a的内部函数给返回到全局执行上下文中，并用一个全局变量存下了该函数，就可以实现在全局执行上下文中直接操作变量a的效果
• 由于JS的垃圾回收机制是将失去引用的对象进行回收，而此处使用了全局变量f引用了内部函数fn2的函数对象，从而导致了fn2的函数对象一直存在，即使此时fn2这个名字已经被回收了。而变量a虽然是局部变量，但是存在于被f引用的对象中，所以不会被回收

闭包的缺点

• 由于闭包是使用了全局变量去保存一个内部的函数对象，如果在执行完对应的功能后不进行手动释放的话，会占用大量的内存。所以在使用完闭包后最好进行手动释放，例如将引用了闭包的对象的全局变量设置为null
• 而且由于闭包的形成比较的隐蔽，很多人在写了闭包的代码后并不会发现，或者即使看到了也不认识这tm是闭包，也就无从谈起对闭包进行手动释放了。所以闭包还容易造成内存泄漏，在实际开发中尽量不要去用

面试题

1. var name = "the window"
   var obj = {
    name: "my object",
    getNameFunc: function(){
        return function(){
            return this.name
        }
    }
   }
   alert(obj.getNameFunc()()) //问：这里浏览器输出了啥？
   

   这里答案应该是"the window"，以下是简单的解释

   • 首先，这里产生了函数的嵌套，并且window直接在全局执行上下文调用了obj的内部方法，但是内部函数没有引用外部的变量，不符合闭包的情况
   • 在这段代码中，调用getNameFunc的是全局的window对象，alert其实是window.alert，所以这里的this是指window，并且全局变量name实际上也是window.name的缩写，所以浏览器会打印出"the window"

2. var name = "the window"
   var obj = {
    name: "my object",
    getNameFunc: function(){
        var that = this
        return function(){
            return that.name
        }
    }
   }
   alert(obj.getNameFunc()()) //问：这里浏览器输出了啥？
   

   这里的答案就变成了"my object"

   • 这段代码和上面的很像，区别就在于在getNameFunc的return之前，定义了一个本地变量that并赋值为this，并且返回的是that.name
   • 并且，这段代码由于出现了var that = this，就满足的闭包发生的情况
   • 此时虽然是window进行的调用，但是that赋值的this实际上是obj，所以返回的that.name就是obj的name属性

3. function fun(n, o){
    console.log(o)
    return{
        fun: function(m){
            return fun(m, n)
        }
    }
   }
   
   var a = fun(0)
   a.fun(1)
   a.fun(2)
   a.fun(3) 
   
   var b = fun(0).fun(1).fun(2).fun(3)
   
   var c = fun(0).fun(1)
   c.fun(2); c.fun(3)
   

   答案分别是：

   a：undefined, 0, 0, 0

   • 第一次调用fun(0)，接收两个参数，此时n为0，o没有，所以打印出undefined，并将一个对象返回给全局变量a，产生闭包。a引用的对象只有一个方法，是一个匿名函数，功能是返回fun(m, n)。此时闭包内保存的的属性是n，值为0
   • a.fun(1)，相当于在全局调用这个闭包内对象的匿名函数，这里传进去的1被赋值给了变量m，所以结果是返回一个函数的调用命令fun(1, 0)，效果是在控制台打印一个0。此时由于函数返回了一个新的对象，产生了新的闭包，这个新的闭包内保存的的属性是n，值为1。但是由于在全局作用域中，没有定义一个新的全局变量去引用这个新的闭包，于是系统将其回收。此时内存中剩下的还是原来的那个闭包，就是一开始调用fun(0)所产生的闭包，保存的的属性是n，值为0
   • a.fun(2)，道理和上面一个样，打印出0，
   • a.fun(3)，道理和上面一个样，打印出0

   b：undefined, 0, 1, 2

   • 先调用fun(0)，接收两个参数，此时n为0，o没有，打印出undefined，并将一个对象返回给全局变量a，产生闭包。a引用的对象只有一个方法，是一个匿名函数，功能是返回fun(m, n)。此时闭包内保存的的属性是n，值为0
   • 此时直接.fun(1)，相当于调用fun(1, 0)，控制台打印出0，并且将闭包内的n更新为了1
   • 再直接.fun(2)，打印出1，将n更新为2
   • .fun(3)，打印出2，将n更新为3

   c：undefined, 0, 1, 1

   • 先调用fun(0)，接收两个参数，此时n为0，o没有，打印出undefined，并将一个对象返回给全局变量a，产生闭包。a引用的对象只有一个方法，是一个匿名函数，功能是返回fun(m, n)。此时闭包内保存的的属性是n，值为0
   • 此时直接.fun(1)，相当于调用fun(1, 0)，控制台打印出0，并且将闭包内的n更新为了1，并保留到了全局变量a的引用上
   • c.fun(2)，相当于执行fun(2, 1)，打印出1，产生一个新的闭包，但是由于没有全局变量进行接收，新的闭包被回收，内存中存在的是一个被保留的变量n，值为1
   • c.fun(3)同理，打印出1

• 这道题的关键是，注意有没有产生新的闭包，并且这个新的闭包有没有被保留下来