什么是闭包？常见应用常见？

心已赠人 2024-03-16 11:09 11阅读 0赞

## 什么是闭包？ ##

闭包指的是：即便外部函数已经不存在，也可以获取作用域链上变量的函数。

上面我们提到了一个概念，叫做**作用域链**。如果你不理解什么是**作用域链，**请看下面的例子：

function outer() {
            const a = 1;
            function f() {
              console.log(a);
            }
            return f;
          }
    
          let f = outer();
          f();

在 f 函数内，我们并没有定义变量 a。当我们在 f 函数内 console.log(a) 的时候，为什么仍然能输出 1 呢？这就是**作用域链**的用途。当我们访问 a 的时候，如果在当前作用域内找不到 a，就在当前作用域的上一层去寻找 a 。如果上一层也找不到，就再去上上层找。直到全局作用域都找不到 a，就返回 undefined。以上述代码为例，f 函数的上一层是 outer 函数，在 outer 函数在作用域内我们找到了 a 变量，因此可以打印 a 的值。

理解了**作用域链**之后，我们再来看看什么是闭包。在 outer 函数执行结束之后，outer 内部的变量理论上应该被销毁（也就是说 a 变量应该被销毁）。但是由于子函数（也就是 f 函数）仍需要访问 a 变量的值，所以 a 变量被保下来（没有被销毁）。今后，每当我们执行 f( ) 的时候 ，都能够访问 a 变量的值。在这个例子中 f 函数和a变量 就叫做**闭包**。

通过以上例子我们可以得出一个结论：闭包存储作用域链上变量的引用（在本例中a就是这个引用）。所以，即便外部函数（outer）被销毁，内部函数（f ）仍能够获取父函数内的变量（a）。

## 面试题 1 ： 闭包一定有 return 吗？ ##

答：不一定，只要内部函数访问了外层作用域的变量，就会形成闭包。我们尝试将上述代码中的 return 去掉：

![8f142575c71b4d0288353bbe65dd463f.png][]

我们会发现，即使没有return f 函数，仍然会形成闭包。

## 闭包的缺点是什么（引起的问题） ##

闭包容易引起内存泄漏。在 JavaScript 中，如果一个对象不再被引用，那么这个对象就会被垃圾收集器回收。闭包会使得函数中的变量被保存在内存中，只有当闭包被销毁的时候，这些变量才会被垃圾收集器回收。

function leakMemory() {
      var element = document.getElementById('codereasy');
      var someResource = new Array(1000).join('*'); // 模拟一个较大的资源
    
      element.onclick = function() {
        console.log(someResource); // 创建了一个闭包
      };
    }

在上述代码中，someResource是一个较大的数组，每次点击element按钮的时候，都会打印这个元素。由于someResource属于闭包，它不会被**垃圾回收机制销毁** 。所以造成了内存泄漏。（只有当这个 DOM 元素 element 被从页面中移除时，闭包才会被销毁，`someResource` 才会被回收）

那么想要对 someResource 进行垃圾回收应该怎么做呢？在上述例子中，可以在不需要使用 `element` 的时候，解除它与 `onclick` 事件的绑定，例如可以设 `element.onclick = null;`。

## 闭包的优点是什么（使用场景） ##

### 封装私有变量 ###

function createCounter() {
      let count = 0; // 这个变量在函数外部无法直接访问，可以被视为私有的
    
      return function() {
        count++;
        return count;
      };
    }
    
    let counter = createCounter();
    
    console.log(counter());  // 输出: 1
    console.log(counter());  // 输出: 2
    // count 变量在函数外部无法访问

### 函数柯里化： ###

function createAdder(x) {
      return function(y) {
        return x + y;
      };
    }
    
    let add5 = createAdder(5);
    let add10 = createAdder(10);
    
    console.log(add5(2));  // 输出: 7
    console.log(add10(2)); // 输出: 12

### 防抖和截流 ###

[8f142575c71b4d0288353bbe65dd463f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/64b46ea501064d27907361f1bf88e04c.png