闭包

一、闭包的核心定义

1.1 基本概念

闭包（Closure）是指能够访问自由变量的函数，这里的自由变量是指在函数中使用的、既不是函数参数也不是函数局部变量的变量。从技术实现角度看，闭包是函数和声明该函数的词法环境的组合。

1.2 核心特征

• 函数嵌套：闭包通常涉及至少两层函数嵌套
• 外部引用：内部函数引用了外部函数的变量
• 持久状态：即使外部函数执行结束，其变量仍可被内部函数访问

function outer() {
  const secret = 'Closure!';
  return function inner() {
    return secret;
  };
}
const getSecret = outer();
console.log(getSecret()); // 输出"Closure!"

二、闭包的形成机制

2.1 词法作用域（Lexical Scope）

JavaScript采用词法作用域（静态作用域），函数的作用域在定义时就确定，而非执行时。这是闭包实现的基础。

2.2 作用域链保持

当函数被创建时，它会保存当前的作用域链。即使外部函数执行完毕，只要内部函数仍然存在引用，外部函数的活动对象就不会被销毁。

function createCounter() {
  let count = 0; // 被闭包"捕获"的变量
  
  return {
    increment: function() { count++ },
    get: function() { return count }
  };
}

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

三、闭包的高级特性

3.1 模拟私有变量

利用闭包可以实现类似面向对象语言的私有成员特性：

function createPerson(name) {
  let _age = 0; // 私有变量
  
  return {
    getName: () => name,
    getAge: () => _age,
    setAge: (age) => { _age = age }
  };
}

const person = createPerson('Alice');
person.setAge(25);
console.log(`${person.getName()} is ${person.getAge()}`); // Alice is 25
console.log(person._age); // undefined

3.2 函数工厂模式

闭包可以创建具有特定行为的函数组：

function createMultiplier(factor) {
  return function(x) {
    return x * factor;
  };
}

const double = createMultiplier(2);
const triple = createMultiplier(3);

console.log(double(5)); // 10
console.log(triple(5)); // 15

3.3 模块化编程

现代模块系统的基础实现：

const calculator = (function() {
  let memory = 0;
  
  function add(x) { memory += x }
  function subtract(x) { memory -= x }
  function clear() { memory = 0 }
  
  return {
    add,
    subtract,
    get result() { return memory },
    clear
  };
})();

calculator.add(10);
calculator.subtract(3);
console.log(calculator.result); // 7

四、闭包的性能考量

4.1 内存管理

• 内存保留：闭包会保持其词法环境中的所有被引用变量
• 潜在泄漏：不当使用会导致不再需要的变量无法被GC回收

function setupHandler() {
  const hugeData = new Array(1000000).fill('*');
  
  document.getElementById('btn').addEventListener('click', () => {
    // 闭包持有hugeData引用，即使处理函数不需要它
    console.log('Button clicked');
  });
  
  // 解决方案：处理完成后手动解除引用
  // hugeData = null;
}

4.2 优化策略

1. 最小化捕获：只保留必要的变量
2. 及时清理：事件监听器、定时器等使用后移除
3. 避免嵌套过深：控制闭包链的长度

五、现代JavaScript中的闭包演进

5.1 块级作用域闭包（let/const）

ES6的块级作用域与闭包结合产生更精确的控制：

function createFunctions() {
  const funcs = [];
  
  for (let i = 0; i < 3; i++) { // let创建块级作用域
    funcs.push(function() {
      console.log(i); // 每个闭包捕获不同的i
    });
  }
  
  return funcs;
}

const functions = createFunctions();
functions[0](); // 0
functions[1](); // 1
functions[2](); // 2

5.2 异步场景中的闭包

闭包在异步编程中的关键作用：

function fetchUser(userId) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(`User${userId}`); // 闭包保持对userId的访问
    }, 1000);
  });
}

fetchUser(123).then(console.log); // User123

六、闭包的典型应用场景

6.1 防抖与节流

function debounce(fn, delay) {
  let timer = null;
  
  return function(...args) {
    clearTimeout(timer); // 闭包访问timer
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

const debouncedScroll = debounce(() => {
  console.log('处理滚动事件');
}, 200);

window.addEventListener('scroll', debouncedScroll);

6.2 缓存（Memoization）

function memoize(fn) {
  const cache = new Map();
  
  return function(arg) {
    if (cache.has(arg)) {
      return cache.get(arg);
    }
    
    const result = fn(arg);
    cache.set(arg, result);
    return result;
  };
}

const factorial = memoize(n => 
  n <= 1 ? 1 : n * factorial(n - 1)
);

console.log(factorial(5)); // 计算并缓存
console.log(factorial(5)); // 直接读取缓存

6.3 柯里化（Currying）

function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    } else {
      return function(...args2) {
        return curried.apply(this, args.concat(args2));
      };
    }
  };
}

const sum = (a, b, c) => a + b + c;
const curriedSum = curry(sum);

console.log(curriedSum(1)(2)(3)); // 6

七、闭包调试与问题排查

7.1 内存泄漏检测

1. Chrome DevTools Memory面板：

   • 拍摄堆快照对比前后差异
   • 查找意外保留的闭包引用

2. 性能监测：

// 闭包引用的变量会显示在闭包列表中
function createLeak() {
  const data = new Array(1000000);
  return function() {
    console.log('Leaking closure');
  };
}

const leakyFn = createLeak();
// 在DevTools中检查leakyFn的闭包引用

7.2 常见问题解决方案

1. 循环引用问题：

function setup() {
  const element = document.getElementById('myElement');
  element.onclick = function handleClick() {
    // 闭包引用element，同时element也引用handleClick
    console.log(element.id);
  };
  
  // 解决方案：事件解绑时清除引用
  // element.onclick = null;
}

2. 循环中的闭包陷阱：

// 经典问题：所有闭包共享同一个i
for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i); // 全部输出5
  }, 100);
}

// 解决方案1：使用IIFE创建新作用域
for (var i = 0; i < 5; i++) {
  (function(j) {
    setTimeout(function() {
      console.log(j); // 0,1,2,3,4
    }, 100);
  })(i);
}

// 解决方案2：使用let块级作用域（推荐）
for (let i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i); // 0,1,2,3,4
  }, 100);
}

八、闭包最佳实践

1. 明确闭包意图：避免无意中创建闭包
2. 控制闭包范围：只保留必要的变量引用
3. 及时清理资源：事件监听器、定时器等
4. 模块化组织：使用闭包实现清晰的接口封装
5. 性能敏感场景测试：大数据量时监控内存使用

// 良好的闭包实践示例
function createSafeClosure() {
  const data = fetchData(); // 大数据
  
  const processor = {
    process() {
      // 只处理需要的数据
      return data.filter(item => item.active);
    },
    cleanup() {
      // 提供显式清理方法
      data = null;
    }
  };
  
  return processor;
}

const processor = createSafeClosure();
// 使用processor...
processor.cleanup(); // 明确释放资源

闭包是JavaScript最强大的特性之一，深入理解其工作机制能够帮助开发者编写出更高效、更安全的代码，同时避免常见的内存管理问题。