@TOC

一、概述

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

二、闭包的核心定义

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

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

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

三、闭包的形成条件

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

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

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. 作用域链查找

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

优化建议：

• 避免在闭包中使用过于复杂的嵌套作用域
• 将常用变量缓存到局部变量中

function createFunction() {
   
  const a = 1;
  const b = 2;

  // 优化前：每次调用都要查找作用域链
  return function() {
   
    return a + b;
  };

  // 优化后：将结果缓存到局部变量
  const result = a + b;
  return function() {
   
    return result;
  };
}

八、闭包的实践建议

1. 合理使用：闭包是强大的工具，但不要过度使用
2. 明确目的：每次使用闭包前，思考是否真的需要它
3. 清理引用：在不再需要闭包时，清除对闭包的引用
4. 避免大对象：不要在闭包中保留不必要的大对象
5. 理解原理：深入理解闭包的机制，避免误用

九、总结

闭包是 JavaScript 语言的精髓所在，它使我们能够：

• 实现数据封装和私有变量
• 创建模块化和可重用的代码
• 解决作用域和事件处理中的常见问题
• 实现函数式编程的高级模式

理解闭包的关键在于掌握：

• 作用域链的机制
• 垃圾回收的工作原理
• 词法环境的保留

正如《JavaScript 高级程序设计》中所说："闭包是 JavaScript 中最强大的特性之一，也是最容易被误解的特性之一。"

掌握闭包，你就能更深入地理解 JavaScript 的运行机制，编写出更优雅、更高效的代码。记住，闭包不是魔法，而是 JavaScript 语言设计的自然结果。