只知道闭包,但是要用出来呀

102 阅读3分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第28天,点击查看活动详情

闭包可以说是js的特性了,用的好的话可以说是锦上添花,但是用的不好就看造成内存的泄露。我们来看一下在实际开发中,我们闭包有怎么样的应用。

什么是闭包

当子函数访问父函数的局部变量时,通过返回子函数就形成了闭包。此时父函数的局部变量不会被销毁,而且不会受到全局污染。既有了全局变量可以重复使用的优点,又有局部变量不会污染全局的优点,还可以延迟作用域链。可以说只要有函数的存在就有闭包的存在,因为每一个函数都有一个scoped存放着可以访问到外部的变量的作用域链,只要有函数+方位自由变量,那么就可以说是产生了闭包。

防抖

防抖(debounce):当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时。在固定的时间内触发事件,每隔n秒触发一次。

 //在一定的时间内多次触发只会执行最后一次
    function debounce(fn, timeout) {
      let timer = null;
      return function () {
        if (timer) {
          clearTimeout(timer);
        }
        timer = setTimeout(() => {
          fn();
        }, timeout);
      }
    }

我们通过返回一个匿名函数,匿名函数体内引用着debounce中的timer变量,这样就形成了闭包,不论执行多少次这个匿名函数它都引用的是同一个timer,因为debounce只执行了一次,这就是闭包的魅力。

节流

节流(throttle):当持续触发事件时,保证一定时间段内只调用一次事件处理函数。节流通俗解释就比如我们水龙头放水,阀门一打开,水哗哗的往下流,秉着勤俭节约的优良传统美德,我们要把水龙头关小点,最好是如我们心意按照一定规律在某个时间间隔内一滴一滴的往下滴。当你频繁触发后,n秒内只执行一次。

    //在一定的时间内一定只会执行一次
    function debounce(fn, timeout) {
      let timer = null;
      return function () {
        if (!timer) {
          timer = setTimeout(() => {
            fn();
          }, timeout);
        }
      }
    }

这里闭包起的作用和前面的是一样的我们就不再赘述了。

函数柯里化:

函数柯里化,是一种加工函数,在react中对于函数式组件的加工很多时候我们都可以用到它,通过分布传参的时候我们可以改变一种形式,原来我们用的是点语法,用了函数柯里化之后,我们就可以用纯函数的方法进行组件的加工。

function a(tem1){
    return function b(tem2){
        return function c(tem3){
            return tem1+tem2+tem3;
        }
    } 
}