函数篇之JS闭包的妙用和陷阱，金三银四面试通关秘笈

前端

2023-12-08 08:17:10

在金三银四求职季，不少程序员正在摩拳擦掌，准备迎接大厂前端面试。闭包作为前端面试的经典考题，掌握其原理和妙用至关重要。本文将深入浅出地解析闭包的本质，揭示其在 JavaScript 中的妙用和陷阱，助你攻克面试难关。

闭包的定义与原理

闭包是一种函数，它可以访问其创建时所属的词法环境（即变量和函数）。换句话说，闭包将函数与其周围的环境绑定在一起，即使该函数被调用到环境之外也是如此。

在 JavaScript 中，每一个函数在创建时都会产生一个闭包。这意味着我们可以从内部函数访问外部函数的作用域。

闭包的妙用

1. 保留状态

闭包可以用来保留状态，即使函数已经执行完毕。这对于创建私有变量或模拟类实例非常有用。

function createCounter() {
  let count = 0;
  return function() {
    return ++count;
  };
}
const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

2. 柯里化

柯里化是一种将函数分解为一系列较小函数的技术。闭包可以通过保留中间状态来实现柯里化。

function add(a, b) {
  return a + b;
}
const add5 = add.bind(null, 5);
console.log(add5(10)); // 15

3. 事件监听器

闭包常用于事件监听器中。当事件触发时，闭包可以访问事件发生时的变量，即使这些变量在事件触发后已不再存在。

const buttons = document.querySelectorAll('button');
for (const button of buttons) {
  button.addEventListener('click', () => {
    console.log(button.innerHTML);
  });
}

闭包的陷阱

1. 内存泄漏

闭包会阻止其内部变量被垃圾回收。如果闭包持有对大量对象或 DOM 节点的引用，可能会导致内存泄漏。

function createHeavyObject() {
  const data = new Array(100000);
  return () => {
    return data;
  };
}
const heavyObjectCreator = createHeavyObject();
heavyObjectCreator(); // 创建大量数据

2. 作用域链过长

闭包会创建作用域链，每个内部函数都访问其外部函数的作用域。作用域链过长会影响性能，并使调试变得困难。

function a() {
  let x = 1;
  function b() {
    let y = 2;
    function c() {
      let z = 3;
      console.log(x, y, z);
    }
    c();
  }
  b();
}
a(); // 输出：1 2 3