[JS Daily] JavaScript 闭包原理：作用域与变量生命周期的深度解析 #JavaScript #闭包 #ES6 #教程

JavaScript 闭包原理：作用域与变量生命周期的深度解析 闭包（Closure）是 JavaScript 中最重要但也最容易让人困惑的概念之一。它不仅是面试高频考点，更是理解 JavaScript 作用域和内存管理机制的关键。今天我们来彻底搞懂它。 一、什么是闭包？ 闭包是指有权访问另一个函数作用域中的变量的函数。简单来说，当一个函数记住并访问其词法作用域，即使这个函数在其词法作用域之外执行，就产生了闭包。 // 最简单的闭包示例 function outer() {   let count = 0;  // outer 的局部变量      function inner() {     count++;  // inner 访问 outer 的变量     console.log(count);   }      return inner;  // 返回 inner 函数 } const counter = outer();  // outer 执行完毕，count 应该被销毁？ counter();  // 输出: 1 counter();  // 输出: 2 counter();  // 输出: 3 神奇的是，outer() 执行完毕后，count 并没有被销毁，而是被 counter 引用着，这就是闭包的魔力。 二、闭包的形成条件 形成闭包需要满足三个条件： 嵌套函数：一个函数内部定义了另一个函数 内部函数引用了外部函数的变量 内部函数被返回到外部函数之外，或以某种方式暴露到外部 // ✅ 形成闭包：内部函数被返回 function createCounter() {   let count = 0;   return function() {     return ++count;   }; } // ❌ 没有形成闭包：内部函数只在内部执行 function noClosure() {   let count = 0;   function inner() {     console.log(count);   }   inner();  // 立即执行，没有暴露到外部 } 三、闭包的实际应用场景 1. 数据私有化 - 模拟私有变量 function createBankAccount(initialBalance) {   let balance = initialBalance;  // 私有变量      return {     deposit: function(amount) {       balance += amount;       return balance;     },     withdraw: function(amount) {       if (amount <= balance) {         balance -= amount;         return balance;       }       return 'Insufficient funds';     },     getBalance: function() {       return balance;     }   }; } const account = createBankAccount(100); console.log(account.getBalance());  // 100 console.log(account.balance);       // undefined (无法直接访问) account.deposit(50); console.log(account.getBalance());  // 150 2. 函数柯里化 (Currying) // 柯里化：将多参数函数转为单参数链式调用 function multiply(a) {   return function(b) {     return a * b;   }; } const double = multiply(2);  // 记住 a=2 const triple = multiply(3);  // 记住 a=3 console.log(double(5));  // 10 console.log(triple(5));  // 15 3. 延迟执行与回调 // 为每个按钮绑定独立的事件处理 function setupButtons() {   for (let i = 1; i <= 3; i++) {     const button = document.getElementById('btn' + i);     button.addEventListener('click', function() {       console.log('Button ' + i + ' clicked');  // 每个回调记住自己的 i     });   } } // ⚠️ 注意：如果用 var 而不是 let，需要使用闭包技巧 function setupButtonsVar() {   for (var i = 1; i <= 3; i++) {     (function(capturedI) {       const button = document.getElementById('btn' + capturedI);       button.addEventListener('click', function() {         console.log('Button ' + capturedI + ' clicked');       });     })(i);  // 立即执行函数(IIFE)创建闭包   } } 四、闭包与内存管理 闭包会阻止垃圾回收器回收外部函数的变量，因为内部函数仍然持有对这些变量的引用。 // 潜在内存泄漏示例 function leaky() {   const hugeArray = new Array(1000000).fill('x');      return function() {     // 只使用数组长度，但整个数组被闭包引用     console.log(hugeArray.length);   }; } const leak = leaky();  // hugeArray 无法被回收！ // ✅ 优化：只保留需要的数据 function notLeaky() {   const hugeArray = new Array(1000000).fill('x');   const length = hugeArray.length;  // 只提取需要的数据      return function() {     console.log(length);  // 不再引用 hugeArray   }; } const safe = notLeaky();  // hugeArray 可以被回收 五、经典面试题解析 // 面试题：下面代码输出什么？ for (var i = 0; i < 3; i++) {   setTimeout(function() {     console.log(i);   }, 100); } // 输出: 3, 3, 3 (不是 0, 1, 2) // 原因：var 声明的 i 是函数作用域，三个回调共享同一个 i // 当 setTimeout 执行时，循环已经结束，i = 3 // ✅ 解决方案 1：使用 let（块级作用域） for (let i = 0; i < 3; i++) {   setTimeout(function() {     console.log(i);   }, 100); } // 输出: 0, 1, 2 // ✅ 解决方案 2：使用闭包(IIFE) for (var i = 0; i < 3; i++) {   (function(capturedI) {     setTimeout(function() {       console.log(capturedI);     }, 100);   })(i); } // 输出: 0, 1, 2 六、闭包的优缺点 优点： 实现数据封装和私有化 保持函数内部变量的状态 实现模块化编程模式 函数柯里化和部分应用 缺点： 内存消耗增加（变量无法被垃圾回收） 调试困难（作用域链复杂） 不当使用会导致内存泄漏 总结 闭包是 JavaScript 函数能够记住并访问其词法作用域的特性 闭包通过保持对外部变量的引用实现数据私有化和状态保持 合理使用闭包可以实现模块模式、柯里化、防抖节流等高级模式 注意闭包带来的内存占用问题，及时释放不再需要的闭包引用 ES6 的 let/const 解决了许多经典的闭包陷阱 理解了闭包，你就理解了 JavaScript 作用域链的核心机制。建议动手实践，用闭包实现一个简单的计数器、缓存函数或事件委托，加深理解。