一、概述

闭包（Closure）是 JavaScript 中最核心、最具特色也最容易引起困惑的概念之一。它既是前端面试的高频考点，也是理解 JavaScript 执行机制的关键。本文将从原理到实践，带你彻底掌握闭包的本质。

二、闭包的核心定义

闭包是函数和对其周围（词法）环境的引用的组合。

简单来说，当一个函数内部引用了外部函数的变量，即使外部函数已经执行完毕，这个内部函数仍然可以访问这些外部变量，这就是闭包。

"闭包是指有权访问另一个函数作用域中变量的函数。" —— MDN

三、闭包的形成条件

形成闭包需要满足三个必要条件：

函数嵌套：内部函数定义在外部函数内部
引用外部变量：内部函数引用了外部函数的变量
外部调用：内部函数被返回或在外部被调用

function outer() {
  let outerVar = '外部变量';
  
  function inner() {
    console.log(outerVar); // 引用外部变量
  }
  
  return inner; // 返回内部函数
}

const closure = outer(); // 调用外部函数并保存返回的内部函数
closure(); // 输出: 外部变量

四、闭包的工作原理

1. 作用域链机制

JavaScript 采用词法作用域（静态作用域），函数的作用域在定义时就已确定，而不是在执行时。

当函数被创建时，它会保存对其外层作用域的引用，形成一条作用域链。

function outer() {
  let a = 1;
  
  function inner() {
    let b = 2;
    console.log(a + b); // 作用域链查找：inner -> outer -> global
  }
  
  return inner;
}

2. 垃圾回收机制

在正常情况下，函数执行完毕后，其局部变量会被垃圾回收机制回收。但当这些变量被闭包引用时，它们就不会被回收，因为闭包保持着对这些变量的引用。

function createCounter() {
  let count = 0;
  
  return function() {
    count++;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

在这个例子中，count 变量在 createCounter 函数执行完毕后本应被回收，但由于被返回的函数（闭包）引用，所以它被保留了下来。

五、闭包的经典应用场景

1. 封装私有变量

JavaScript 没有 private 关键字，但可以通过闭包实现私有变量。

function createPerson() {
  let _name = "张三";
  
  return {
    getName: function() {
      return _name;
    },
    setName: function(name) {
      if (name.startsWith("张")) {
        _name = name;
      } else {
        throw new Error("姓氏必须是张");
      }
    }
  };
}

const person = createPerson();
console.log(person.getName()); // 张三
person.setName("张三丰");
console.log(person.getName()); // 张三丰
// console.log(_name); // Uncaught ReferenceError: _name is not defined

2. 实现模块化

闭包是 JavaScript 模块化设计的基础。

const Counter = (function() {
  let count = 0;
  
  return {
    increment: function() {
      return ++count;
    },
    decrement: function() {
      return --count;
    },
    value: function() {
      return count;
    }
  };
})();

console.log(Counter.increment()); // 1
console.log(Counter.increment()); // 2
console.log(Counter.value());     // 2

3. 事件处理与循环问题

闭包可以解决 for 循环中 i 变量的问题。

// 错误示例
const buttons = document.querySelectorAll('.button');
for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function() {
    console.log(i); // 所有按钮点击都输出 buttons.length
  });
}

// 正确示例：使用闭包
const buttons = document.querySelectorAll('.button');
for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', (function(index) {
    return function() {
      console.log(index);
    };
  })(i));
}

4. 函数柯里化

闭包是实现函数柯里化（Currying）的基础。

function add(x) {
  return function(y) {
    return x + y;
  };
}

const add5 = add(5);
console.log(add5(3)); // 8
console.log(add5(10)); // 15

5. 节流与防抖

使用闭包实现函数节流。

function throttle(func, delay) {
  let lastCall = 0;
  return function() {
    const now = Date.now();
    if (now - lastCall >= delay) {
      func.apply(this, arguments);
      lastCall = now;
    }
  };
}

const throttledFunction = throttle(() => console.log('触发'), 500);
// 每500ms最多触发一次

六、闭包的常见误区

1. 闭包一定会导致内存泄漏

事实：闭包本身不会导致内存泄漏，但不当使用闭包可能导致内存泄漏。

闭包会保留对其词法环境的引用，这是设计使然
问题在于：如果闭包被意外保留（如全局变量引用），且不再需要时未清除引用

function createClosure() {
  const largeData = new Array(1000000).fill('data');
  return function() {
    console.log('I have access to largeData');
  };
}

// 如果将返回的函数保存在全局变量中，largeData 将无法被回收
const closure = createClosure();

2. 闭包是"函数内部的函数"

事实：闭包是"函数和其词法环境的组合"，而不仅仅是"函数内部的函数"。

function outer() {
  const a = 1;
  const b = 2;
  
  function inner() {
    console.log(a + b);
  }
  
  return inner;
}

// inner 是闭包，因为它引用了 outer 的变量
const closure = outer();

七、闭包的性能考量

1. 内存使用

闭包会保留对外部作用域的引用，可能导致内存占用增加。

优化建议：

避免在闭包中保留不必要的大对象
在不再需要时，将闭包引用置为 null

function createLargeClosure() {
  const largeData = new Array(1000000).fill('data');
  let counter = 0;
  
  return {
    getValue: function() {
      counter++;
      return largeData[counter % largeData.length];
    },
    clear: function() {
      largeData = null; // 清除对大对象的引用
    }
  };
}

const closure = createLargeClosure();
console.log(closure.getValue());
closure.clear(); // 清除大对象引用

2. 作用域链查找

闭包会增加作用域链的长度，可能影响性能。