自己理解的闭包的含义以及优缺点适用场景

爱被打了一巴掌 2021-09-01 10:22 346阅读 0赞

**             闭包：函数****可以在外部****间接****访问内部的变量就叫闭包**

**            「函数」和「函数内部能访问到的变量」（也叫环境）的总和，就是一个闭包**

**               闭包常常用来「间接访问一个变量」。换句话说，「隐藏一个变量」。**

**               优点:****因为JS回收机制导致的，因为JS会在变量使用过后将其清理，**

**                      但是闭包调用了函数的变量，所以函数的变量将会一直保存下来，**

**                      又 因为变量处于函数作用域中，变量的存储环境比较干净，不会被污染，**

**                       所以闭包经常用来保存一个需要持久保存的变量**

**         **

**              缺点:比普通函数占用性能,会导致网页性能变差,在IE下容易造成内存泄露（而我理解的这并不是闭包的问题而是ie在内存存储方面的问题，详细可参考这篇文章司徒正美的**[这篇文章][Link 1]。**）**

**                 案列:**

function f1(){
    　　　　var n=999;
            //这里定义函数作用域只不过是想把 var n=999 定义为局部变量
    　　　　function f2(){
    　　　　　　alert(n); 
    　　　　}
    　      //而这里我的理解是 var n=999是外部环境 alert(n)为内部语句 所以return f2 为了外面你能访问f2的内部语句取出来
             return f2;
           }
          // 这时你定义一个新的变量赋值给f1 而f1作为全局作用域链里面包含着f2 而这时你result已经把f1全局作用域中的所有的东西取出来了 这时候你就间接从全局访问到你想要的这个隐藏的变量
    　     　var result=f1();
    　　     result(); // 999
    
    
    
    //垃圾回收机制 在闭包中体现就是 这时候虽然定义了变量　var n=999;但是没有被回收  alert(n); 再调用n所以没有被回收   函数f2 没有被回收的原因是 return f2;在调用，如果去掉return f2;现在就会被回收  
    函数f1();因为被赋值了给了result所以也没有被回收  这样就形成了一个完整的闭包

**         **

###           闭包的使用场景:函数防抖 ###

/**
     * @function debounce 函数防抖
     * @param {Function} fn 需要防抖的函数
     * @param {Number} interval 间隔时间
     * @return {Function} 经过防抖处理的函数
     * */
    function debounce(fn, interval) {
        let timer = null; // 定时器
        return function() {
            // 清除上一次的定时器
            clearTimeout(timer);
            // 拿到当前的函数作用域
            let _this = this;
            // 拿到当前函数的参数数组
            let args = Array.prototype.slice.call(arguments, 0);
            // 开启倒计时定时器
            timer = setTimeout(function() {
                // 通过apply传递当前函数this，以及参数
                fn.apply(_this, args);
                // 默认300ms执行
            }, interval || 300)
        }
    }

概念：

就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。  
通俗一点：在一段固定的时间内，只能触发一次函数，在多次触发事件时，只执行最后一次。

使用时机：

*  **搜索功能，在用户输入结束以后才开始发送搜索请求，可以使用函数防抖来实现；**

###       **闭包实例--函数节流、**     ###

/**
     * @function throttle 函数节流
     * @param {Function} fn 需要节流的函数
     * @param {Number} interval 间隔时间
     * @return {Function} 经过节流处理的函数
     * */
    function throttle(fn, interval) {
        let timer = null; // 定时器
        let firstTime = true; // 判断是否是第一次执行
        // 利用闭包
        return function() {
            // 拿到函数的参数数组
            let args = Array.prototype.slice.call(arguments, 0);
            // 拿到当前的函数作用域
            let _this = this;
            // 如果是第一次执行的话，需要立即执行该函数
            if(firstTime) {
                // 通过apply，绑定当前函数的作用域以及传递参数
                fn.apply(_this, args);
                // 修改标识为null，释放内存
                firstTime = null;
            }
            // 如果当前有正在等待执行的函数则直接返回
            if(timer) return;
            // 开启一个倒计时定时器
            timer = setTimeout(function() {
                // 通过apply，绑定当前函数的作用域以及传递参数
                fn.apply(_this, args);
                // 清除之前的定时器
                timer = null;
                // 默认300ms执行一次
            }, interval || 300)
        }
    }

概念

就是限制一个函数在一定时间内只能执行一次。

使用时机

*  改变浏览器窗口尺寸，可以使用函数节流，避免函数不断执行；
 *  滚动条scroll事件，通过函数节流，避免函数不断执行。

### **函数节流与函数防抖的区别：** ###

我们以一个案例来讲一下它们之间的区别：  
设定一个间隔时间为一秒，在一分钟内，不断的移动鼠标，让它触发一个函数，打印一些内容。

*  函数防抖：会打印1次，在鼠标停止移动的一秒后打印。
 *  函数节流：会打印60次，因为在一分钟内有60秒，每秒会触发一次。
 *  总结：节流是为了限制函数的执行次数，而防抖是为了限制函数的执行时机。

**     以下为我自己理解  如有错误请指教**

[Link 1]: https://link.zhihu.com/?target=http%3A//www.cnblogs.com/rubylouvre/p/3345294.html