面试必问之闭包

Posted 2021-03-08 fmixue

/**
 1、闭包的概念

    闭包可是指有权访问另一函数作用域中的变量的函数，或者简单理解为定义在一个函数内部的函数；

 **/

/**
 2、闭包的特点

   a、函数嵌套函数
   b、函数内部可以引用函数外部的参数和变量
   b、参数和变量不会被垃圾回收机制回收

 **/

/**
 3、闭包的优缺点

    优点：
     ①保护函数内的变量安全 ，实现封装，防止变量流入其他环境发生命名冲突
     ②在内存中维持一个变量，可以做缓存（但使用多了同时也是一项缺点，消耗内存）
     ③匿名自执行函数可以减少内存消耗

    缺点：
    ①被引用的私有变量不能被销毁，增大了内存消耗，造成内存泄漏，解决方法是可以在使用完变量后手动为它赋值为null；
    ②其次由于闭包涉及跨域访问，所以会导致性能损失，我们可以通过把跨作用域变量存储在局部变量中，然后直接访问局部变量，来减轻对执行速度的影响；
 **/

/**
 4、闭包有哪些应用场景？

    ①闭包之定时器参数传递
        //原生的setTimeout擦混提的第一个函数不能带有参数
        setTimeout（function(a){
            alert(a)
        },1000）
        //通过闭包可以实现传参效果
         function b(a){
             return function(){
                alert(a);
             }
         }
         var f = b(1);
         setTimeout(f,1000);

    ②闭包之setTimeout
        for(var i = 0; i < 5; i++){
            setTimeout(function(){
                console.log(i) //5次5
            },100)
        }
      解决方法一为var改为let
      解决方法二为：
        //以下代码，相当于同时启动3个定时器，i*100是为4个定时器分别设置了不同的时间，同时启动，但是执行时间不同，每个定时器间隔都是100毫秒，实现了每隔100毫秒就执行一次打印的效果。
          for(var i = 0; i < 5; i++){
              (function(i){
                   setTimeout(function(){
                        console.log(i)
                   },i*100)
              })(i)
          }

    ③为节点循环绑定click事件
        var li = document.getElementById(‘li‘);
        for(var i = 0; i < li.length; i++){
            li[i].onclick = function(){
               alert(i);//结果为弹出li的length
            }
        }

       解决方法一： 将var改为let;
       解决方法二：
        for(var i = 0; i < li.length; i++){
            li[i].onclick = function(num){
                return function(){ //闭包
                    alert(num); //num为相应的i值
                }
            }
        }
 **/

更加具体栗子请参考https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures