JavaScript中的闭包

1. 什么是闭包

在理解闭包的概念之前，要先知道JS中的变量作用域，分为全局变量和局部变量两种。特点是，函数内部可以直接读取全局变量，而函数外部无法直接读取函数内部的局部变量。

那我们想要从外部读取函数内部的局部变量怎么办呢？
这就需要我们在函数内部再定义一个函数：

function f1(){
    var n=999;
    function f2(){
        alert(n); // 999
    }
}
1
2
3
4
5
6

上述代码中，函数f2在函数f1内部，此时f1中的所有局部变量对f2都是可见的，但是f2内部的局部变量对f1是不可见的。
原因：JS特有的链式作用域结构，子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。
既然f2能够读取到f1中的局部变量，那么只要把f2作为返回值，我们就可以在f1外部读取到它的内部变量了。而这个f2函数，就是闭包。

综上所述，闭包就是能够读取其他函数内部变量的函数，换句话说，其实它就是定义在一个函数内部的函数，也是将函数内部和外部连接起来的一个媒介。

2. 闭包的用途

1. 读取其他函数的内部变量
2. 让这些变量的值始终保持在内存中，不会在 f1 调用后被自动清除。
   原因：f1 是 f2 的父函数，而 f2 被赋给了一个全局变量，这导致 f2 始终在内存中，而 f2 的存在依赖于 f1，因此 f1 也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。

3. 闭包的应用场景

防抖（debounce）

当事件被触发后，延迟n秒再执行回调函数，如果这n秒内事件被再次触发，则重新计时。这样可以保证当用户频繁触发某些事件时，不会频繁执行回调函数，而是只执行一次。

例子：用户在输入框连续输入一串字符时，通过防抖策略，只有在输入完成后，才执行查询的请求，这样可以有效减少请求次数，节约资源。

实现：
借助setTimeout()来实现，当下次触发事件时，如果setTimeout()已经存在，则清除setTimeout()并重新计算时间。

<button id="debounce">防抖button>
1

window.onload = function() {
      // 1、获取这个按钮，并绑定事件
      var myDebounce = document.getElementById("debounce");
      myDebounce.addEventListener("click", debounce(sayDebounce,4000));
    }
 
    // 2、防抖功能函数，接受传参
    function debounce(fn,delay) {
      // 4、创建一个标记用来存放定时器的返回值
      let timeout = null;
      return function() {
        // 5、每次当用户点击/输入的时候，把前一个定时器清除
        clearTimeout(timeout);
        // 6、然后创建一个新的 setTimeout，
        // 这样就能保证点击按钮后的 interval 间隔内
        // 如果用户还点击了的话，就不会执行 fn 函数
        timeout = setTimeout(() => {
          fn.apply(this, arguments);
        }, delay);
      };
    }
 
    // 3、需要进行防抖的事件处理
    function sayDebounce() {
      // ... 有些需要防抖的工作，在这里执行
      console.log("防抖成功！");
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

节流（throttle）

指定时间间隔内只会执行一次回调函数，可以减少一段时间内事件的触发频率。

例子：鼠标不断触发某个事件时，比如点击，指定事件内只会执行一次；懒加载时要监听计算滚动条的位置，不必每次滑动都触发，可以降低计算频率，节约资源。

实现：借助setTimeout()和一个标志位来实现，当标志位为true时，代表可以执行回调函数，在回调函数内把标志位设为false，否则，说明距离上次操作还不满足指定的时间间隔，直接返回。

<button id="throttle">节流button>
1

window.onload = function() {
      // 1、获取按钮，绑定点击事件
      var myThrottle = document.getElementById("throttle");
      myThrottle.addEventListener("click", throttle(sayThrottle,4000));
    }
 
    // 2、节流函数体
    function throttle(fn,delay) {
      // 4、通过闭包保存一个标记
      let canRun = true;
      return function() {
        // 5、在函数开头判断标志是否为 true，不为 true 则中断函数
        if(!canRun) {
          return;
        }
        // 6、将 canRun 设置为 false，防止执行之前再被执行
        canRun = false;
        // 7、定时器
        setTimeout( () => {
          fn.apply(this, arguments);
          // 8、执行完事件（比如调用完接口）之后，重新将这个标志设置为 true
          canRun = true;
        }, delay);
      };
    }
 
    // 3、需要节流的事件
    function sayThrottle() {
      console.log("节流成功！");
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

更多应用场景参考：
闭包–防抖和节流的应用场景及区别

4. 使用闭包的注意事项

1. 闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题。解决方法：在退出函数之前，将不使用的局部变量全部删除。
2. 闭包会在父函数外部，改变父函数内部变量的值。