JS高级-闭包

 什么是闭包

1. 如何产生闭包?

* 当一个嵌套的内部(子)函数引用了嵌套的外部(父)函数的变量(函数)时, 就产生了闭包

2. 闭包到底是什么?

* 使用chrome调试查看 Closure

* 理解一: 闭包是嵌套的内部函数(绝大部分人)

* 注意: 闭包存在于嵌套的内部函数中

3. 产生闭包的条件?

* 函数嵌套

* 内部函数引用了外部函数的数据(变量/函数)

 function fn1 () {
    var a = 2
    var b = 'abc'
    function fn2 () { //执行函数定义就会产生闭包(不用调用内部函数)，调用外部函数
      console.log(a)
    }
    // fn2()
  }
  fn1()

  function fun1() {
    var a = 3
    var fun2 = function () {    //闭包产生，函数还没有创建，没有实际作用
      console.log(a)
    }
  }
  fun1()

常见的闭包

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

2. 将函数作为实参传递给另一个函数调用

闭包产生几次看外部函数执行几次

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

// 1. 将函数作为另一个函数的返回值
  function fn1() {
    var a = 2    //执行fn1产生  执行一次后被销毁？
    function fn2() {  
      a++
      console.log(a)
    }
    return fn2
  }
  var f = fn1()   //得到f2函数，没有输出a，还没有执行，但产生闭包
  f() // 3      //实际执行的fn2,调用内部函数
  f() // 4    a累加

此过程调用一个外部函数，所以产生了一个闭包

 

 

 2. 将函数作为实参传递给另一个函数调用

// 2. 将函数作为实参传递给另一个函数调用
  function showDelay(msg, time) {
    setTimeout(function () {  //内部函数引用了外部函数的msg，产生了闭包
      alert(msg)		//闭包里边只有msg，没有time
    }, time)
  }
  showDelay('atguigu', 2000)

闭包的作用及生命周期

1. 使用函数内部的变量在函数执行完后, 仍然存活在内存中(延长了局部变量的生命周期)

2. 让函数外部可以操作(读写)到函数内部的数据(变量/函数)

看不到闭包但是能在外部操作局部变量，间接访问局部变量

问题:

1. 函数执行完后, 函数内部声明的局部变量是否还存在?

一般是不存在, 存在于闭中的变量才可能存在

2. 在函数外部能直接访问函数内部的局部变量吗?

不能, 但我们可以通过闭包让外部操作它

执行后：

1）a还存在，因为他在闭包里边

2）fn2这个函数对象不存在，因为没有引用他，所以成为垃圾对象

fn2是个局部变量，但是并没有在闭包里边，自动释放

3）fn3也是个局部变量，但是并不在闭包里边，闭包里边只有a

fn3释放，fn3的函数对象并没有成为垃圾对象，

因为 var f = fn1()用一个变量来指向fn3的函数对象，闭包一直存在没有消失的根本原因是 f 指向 函数对象，而函数对象关联着闭包。用 f 将返回值（地址值）存起来了

fn3本身不在了，但函数没有成为垃圾对象，因为f引用着

 

 var f = new fn1()

//fn1() 没有引用指向，内部函数对象成为垃圾对象,闭包不存在

生命周期

1. 产生: 在嵌套内部函数定义执行完时就产生了(不是在调用)

2. 死亡: 在嵌套的内部函数成为垃圾对象时 f = null

第一种：

function fn1() {
     //此时闭包就已经产生了(函数提升, 内部函数对象已经创建了)
    var a = 2
    function fn2() {
      a++
      console.log(a)
      // return a  可以让外部看到a
    }
    function fn3() {
      a--
      console.log(a)
    }
    return fn3
  }
  var f = fn1()
  f() // 1
  f() // 0
   f = null //闭包死亡(包含闭包的函数对象成为垃圾对象)

第二种：

 function fn1() {
    //此时闭包就已经产生了(函数提升, 内部函数对象已经创建了)
    var a = 2
    var fn2 = function () {  //闭包在这行函数执行完毕后产生
      a++
      console.log(a)
    }
    return fn2
  }
  var f = fn1()
  f() // 3
  f() // 4
  f = null //闭包死亡(包含闭包的函数对象成为垃圾对象)

闭包的缺点及解决

1. 缺点

* 函数执行完后, 函数内的局部变量没有释放, 占用内存时间会变长

* 容易造成内存泄露

2. 解决

* 能不用闭包就不用

* 及时释放

<script type="text/javascript">
  function fn1() {
    var arr = new Array[100000]
    function fn2() {
      console.log(arr.length)
    }
    return fn2
  }
  var f = fn1()
  f()

  f = null //让内部函数成为垃圾对象-->回收闭包
</script>

内存溢出与内存泄漏

1. 内存溢出

* 一种程序运行出现的错误

* 当程序运行需要的内存超过了剩余的内存时, 就出抛出内存溢出的错误

// 1. 内存溢出
  var obj = {}
  for (var i = 0; i < 10000; i++) {
    obj[i] = new Array(100000000)   //obj的属性名都是0,1,2,3...
    
    console.log('-----')   //内存不足，崩溃了
    
  }

2. 内存泄露

* 占用的内存没有及时释放

* 内存泄露积累多了就容易导致内存溢出

* 常见的内存泄露:

* 意外的全局变量

    // 意外的全局变量
function fn() {
    a = new Array(10000000)  //a 没有用var声明
    console.log(a)
}
fn()

* 没有及时清理的计时器或回调函数

   // 没有及时清理的计时器或回调函数
var intervalId = setInterval(function () { //启动循环定时器后不清理
    console.log('----')
}, 1000)

* 闭包

   // 闭包
function fn1() {
    var a = 4
    function fn2() {
      console.log(++a)
    }
    return fn2
}
var f = fn1()
f()

  // f = null