深入理解防抖函数为什么使用闭包?

742 阅读2分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路

前言

我相信大部分人对闭包的概念都被的滚瓜烂熟,闭包就是能够读取其他函数内部变量的函数,然后对其为什么要使用闭包,以及一些使用闭包所用到的场景你们是否又能理解呢?当然在写这篇文章之前其实我也是不知道的,我也是查阅了相关资料才弄清楚,俗话说好记性不如烂笔头,我决定把它记录下来!!!

闭包的定义、作用

1.定义

闭包就是能够读取其他函数内部变量的函数

2.作用

闭包可以用在许多地方。它的最大用处有两个,一个是可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。

示例1:读取内部函数的变量

a函数return了一个匿名函数 匿名函数可以访问到b变量这就要形成了闭包

function a(){
  var b= 10;
  return function(){
    b++;
    console.log(b);
  }
}
a()() //11

示例2:让这些变量的值始终保持在内存中。

这个跟上面比多加了一句代码 var d = a(); 此时d存的是a返回的匿名函数,然后匿名函数中又在访问a函数中的b变量,如果 ****var d = a()这个引用一直存在那么b变量就不会销毁,我么每次执行d() 其实就是执行的匿名函数,所以会得到结果 1 2,那么怎么让b变量销毁呢,很简单 d = null,解除对a()的引用,也防止了内存泄漏。

function a(){
    var b = 0;
    return function(){
        b++;
        console.log(b);
    }
}
var d = a();
d();//1
d();//2

防抖函数的实现

也是利用了让变量timeout一直存在内存中,然后每次触发匿名函数都会先执行clearTimeout(timeout),然后在重新赋值setTimeout,这样每次循环就达到了防抖目的

// 第三版
function debounce(func, wait) {
    var timeout;

    return function () {
        var context = this;
        var args = arguments;

        clearTimeout(timeout)
        timeout = setTimeout(function(){
            func.apply(context, args)
        }, wait);
    }
}

End

是不是理解了呢?其实有的时候我们不要为了面试而面试要理解其中的原理,下一次面试可能就少背一道面试题吧,这也可能是中级程序员与高级程序员之间的差距所在。