JavaScript进阶-闭包

闭包的定义

如何产生闭包？

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

产生闭包的条件

• 函数嵌套
• 内部函数引用了外部函数的变量

闭包是什么？

闭包是嵌套的内部函数。

常见的闭包

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

function fn1() {
    var a = 2

    function fn2() {
      a++
      console.log(a)
    }

    return fn2
  }
  var f = fn1()
  f() // 3
  f() // 4

• 将函数作为形参传递给另一个函数调用

function showMsgDelay(msg, time) {
    setTimeout(function () {
      console.log(msg)
    }, time)
  }
  showMsgDelay('hello', 1000)

闭包的作用

•  使用函数内部的变量在函数执行完毕后，仍然存活在内存中（延长了局部变量的生命周期）
• 让函数外部可以操作到函数内部的数据

闭包的生命周期

产生：在嵌套内部函数定义执行完毕时就产生了（不是在调用时）

死亡：在嵌套内部函数成为立即对象时

闭包的应用

定义JS模块

定义一个具有特定功能的JS文件：将所有数据与功能封装在一个函数内部中，只向外暴露一个包含n个方法的对象或函数。然后模块的使用者只需要通过模块暴露的对象调用方法或者函数调用就可以实现响应的功能。

以下是一个例子：

JS文件：

function coolModule() {
  //私有的数据
  var msg = 'atguigu'
  var names = ['I', 'Love', 'you']

  //私有的操作数据的函数
  function doSomething() {
    console.log(msg.toUpperCase())
  }
  function doOtherthing() {
    console.log(names.join(' '))
  }

  //向外暴露包含多个方法的对象
  return {
    doSomething: doSomething,
    doOtherthing: doOtherthing
  }
}

在HTML中引用：

<script type="text/javascript" src="05_coolModule.js"></script>
<script type="text/javascript">
  var module = coolModule()
  module.doSomething()
  module.doOtherthing()
</script>

闭包的缺点

• 函数执行完毕后，函数内部的局部变量没有释放，占用内存时间会变长
• 容易造成内存泄露

解决方法：

• 能不用闭包就不用闭包
• 及时释放

补充：内存溢出与内存泄露

内存溢出

内存溢出是一种程序运行出现的错误，当程序运行需要的内存超过了剩余的内存时，就会出现内存溢出的错误。

内存泄露

内存泄露指占用的空间没有及时释放，一旦内存泄露积累多了就会导致内存溢出。

常见的内存泄漏

• 意外的全局变量
• 没有及时清理的定时器或回调函数
• 闭包

闭包易错点

闭包找到的是同一地址中父级函数中对应变量最终的值。每次外部函数执行的时候,会重新创建一个新的地址，相当于开辟一块新的内存空间。

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) //undefined,0,0,0

  var b = fun(0).fun(1).fun(2).fun(3) //undefined,0,1,2

  var c = fun(0).fun(1)
  c.fun(2)
  c.fun(3) //undefined,0,1,1

解决这道典型题目的重点就在于判断函数执行是否开辟出一个新的地址值，比如

  var a = fun(0)
  a.fun(1)
  a.fun(2)
  a.fun(3) //undefined,0,0,0

这段代码中，第一行代码运行是返回undefined以及将内部函数封装在对象中返回赋值给a；第二行代码则是调用a的方法，此时创建一个地址值，并把实参1传递给形参m，返回函数fun(1,0)并执行（注意：0是在第一行代码时传递给形参n的），此时输出o为0。

但是当运行第三行代码时是再重新创建一个地址值，此时闭包中n仍然=0，结果仍然是输出o为0。

但是下面这段代码

  var b = fun(0).fun(1).fun(2).fun(3) //undefined,0,1,2

它只有是一直调用返回的对象中的方法来输出结果的， 所以它指向的父级函数的变量都是在同一个地址值中的，所以输出的结果是undefined,0,1,2。

剩下的代码也是上面解释的结合起来而已，不作解释。如果有哪些解释的不好的，欢迎评论区多多指正。