闭包与函数柯里化

闭包与函数柯里化是 JavaScript 函数式编程中的两大核心支柱。它们不仅极大地增强了代码的高阶抽象能力，也是前端工程师在实现复杂逻辑、进行架构设计时必须掌握的高阶技能。

1. 闭包 (Closure) 核心解析 ​

核心定义与原理 ​

闭包是函数及其声明时所在的词法环境的组合。

由于 JavaScript 采用的是静态/词法作用域 (Lexical Scoping)，函数的作用域在定义时就已经确定。这意味着：

• 当内部函数被返回并在其定义作用域之外执行时，它依然保留着对外部函数作用域内变量的持久引用。
• 尽管外部函数的执行上下文（Execution Context）在函数调用结束后会被销毁，但这些被内部函数引用的变量会被移动至堆内存（Heap）中，常驻内存，直到被释放。

// 闭包的核心演示
function outer() {
  const secret = "I'm hidden";
  return function inner() {
    console.log(secret); // 依然能访问 outer 作用域中的 secret
  };
}
const closureInstance = outer();
closureInstance(); // 输出: I'm hidden

三大应用场景 ​

1. 数据私有化：通过闭包隐藏变量，只通过暴露的接口进行操作，防止全局命名空间污染。这正是 Vue 3 setup 返回状态并保持响应式引用的底层哲学之一。
2. 函数柯里化：利用闭包存储先前接收的参数，在未来的某个时刻统一求值。
3. 模块化密封：在 ES Modules 普及前，开发者广泛利用立即执行函数 (IIFE) 配合闭包来封装独立作用域，防止局部变量外泄。

2. 内存管理与副作用 ​

内存泄漏与垃圾回收 (GC) ​

闭包最大的副作用在于其生命周期。由于闭包持续持有外部变量的引用，垃圾回收机制（GC）无法标记这些变量为垃圾，这就导致了内存占用持续攀升。

常见的内存风险：游离 DOM (Detached DOM) ​

若在闭包中引用了 DOM 节点，尤其是在事件监听器或定时器里，极易造成游离 DOM 节点无法回收的问题：

// 风险代码示例
function attachEvent() {
  const element = document.getElementById('my-btn');
  element.onclick = function() {
    console.log('Clicked!', element.id); // 闭包持有 element 引用
  };
}

[!CAUTION] 优化策略：在组件销毁或监听结束时，务必将变量手动置为 null (如 element = null)，断开引用链，帮助 GC 引擎进行有效清理。

3. 柯里化 (Currying) 进阶 ​

核心价值 ​

柯里化是一种将接收多个参数的函数，转化为逐步接收参数的嵌套技术。它在工程实践中的核心在于：“参数复用” 与 “延迟执行”。

通过闭包固定部分通用参数，我们可以快速生成特定的“专用工具函数”。

// 示例：生成通用的校验函数
const check = (regex, value) => regex.test(value);

// 柯里化后
const checkPhone = (value) => check(/^1[3-9]\d{9}$/, value);
const checkEmail = (value) => check(/^\w+@\w+\.\w+$/, value);

原生手写实现 ​

一个健壮的柯里化工具需要递归处理参数，并兼容 this 上下文。

/**
 * 健壮的柯里化辅助函数
 * @param {Function} fn 原始函数
 * @returns {Function} 柯里化后的函数
 */
function curry(fn) {
  return function curried(...args) {
    // 终止条件：当前参数数量已满足原函数形参长度
    if (args.length >= fn.length) {
      // 保持 this 上下文一致性
      return fn.apply(this, args);
    }

    // 未满足则继续递归：利用闭包保存当前参数(args)，返回新函数接收后续参数(rest)
    return function(...rest) {
      return curried.apply(this, args.concat(rest));
    };
  };
}

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

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

4. 深度思考：细节与差异 ​

关于 this 的绑定 ​

在手写 curry 时，如果直接调用 fn(...args)，往往会丢失调用方的 this 指向。生产环境的工具库（如 Lodash）通常会显式地使用 apply 或 call 来确保上下文的透明传递。

柯里化 vs 偏函数 (Partial Application) ​

• 柯里化：严格将 $n$ 个参数转化为 $n$ 个单参数函数的嵌套调用（$f(a, b, c) \rightarrow f(a)(b)(c)$）。
• 偏函数：一次固定多个参数，返回一个接收剩余参数的函数（$f(a, b, c) \rightarrow f(a, b)(c)$）。

在现代工程开发中，这两者往往混合使用，其共同目的都是为了实现更精细的代码重用。