JS闭包---5

闭包

能够读取其他函数内部变量的函数

本质:将函数内部和外部连接起来的桥梁

function fn1() {
    var b = 2 //b是fn1的局部变量
    function fn2() {//fn2()是内部函数,一个闭包
      console.log(b);//2
    }
    fn2()
  }
  fn1()
//fn2() 没有自己的局部变量。然而，由于闭包的特性，它可以访问到外部函数的变量

 

2、闭包有3个特性：

1. 函数嵌套函数
2. 函数内部可以引用函数外部的参数和变量
3. 参数和变量不会被垃圾回收机制回收

函数作为返回值

 function funA() {
    var a = 10;  // funA的活动对象之中;
    return function () {   //匿名函数的活动对象;
      console.log(a);
    }
  }
  funA()();

闭包的经典例子

 function funA() {
    var a = 3; 
    return function () {   
      var c=0
      console.log(++a);
      console.log(++c);
    }
  }

  var b = funA();
  b();  //4    1
  b();  //5    1
  b();  //6    1

每一次函数调用完成后,都应该被销毁,但是这个例子里面函数的返回值直接赋值给了b,

b=function(){var c = 0 ... }     每一次调用完这个函数会被销毁,但是函数里面有一个引用外部变量a无法被销毁,于是这里就产生了内存消耗的问题

案例:写一个for循环，让它每隔100毫秒分别依次输出数字

for (var i = 1; i <= 5; i++) {
    setTimeout(() => {
      console.log(i);//6 个 6
    }, i * 100);
  }

用var就会打印出来6个6,这个是为什么呢?  

因为在退出循环时，迭代变量保存的是导致循环退出的值：6。在之后执行超时逻辑时，所有的i都是同一个变量，因而输出的都是同一个最终值。

for (let i = 1; i <= 5; i++) {
    setTimeout(() => {
      console.log(i);//1 2 3 4 5 
    }, i * 100);
  }

  而在使用let声明迭代变量时，JavaScript引擎后台会为每个迭代循环声明一个新的迭代变量。每个setTimeout引用的都是不同的变量案列，所以console.log输出的是我们期望的值，也就是循环执行过程中每个迭代变量的值。

 用闭包来写

  for (var i = 1; i <= 5; i++) {
    (function (i) {
      setTimeout(() => {
        console.log(i);
      }, i * 100);
    })(i)
  }

 在这段代码中，相当于同时启动3个定时器，i*100是为5个定时器分别设置了不同的时间，同时启动，但是执行时间不同，每个定时器间隔都是100毫秒，实现了每隔100毫秒就执行一次打印的效果

 

闭包的好处与坏处

好处

①保护函数内的变量安全 ，实现封装，防止变量流入其他环境发生命名冲突

②在内存中维持一个变量，可以做缓存（但使用多了同时也是一项缺点，消耗内存）

③匿名自执行函数可以减少内存消耗

坏处

①其中一点上面已经有体现了，就是被引用的私有变量不能被销毁，增大了内存消耗，造成内存泄漏，解决方法是可以在使用完变量后手动为它赋值为null；

②其次由于闭包涉及跨域访问，所以会导致性能损失，我们可以通过把跨作用域变量存储在局部变量中，然后直接访问局部变量，来减轻对执行速度的影响