推荐|JavaScript中闭包详解+举例，闭包的各种实践场景：高级技巧与实用指南

闭包的各种实践场景：高级技巧与实用指南

一、什么是闭包？

1、闭包的基本概念

2、闭包的工作原理

作者：watermelo37

涉及领域：Vue、SpingBoot、Docker、LLM、python等

-----------------------------------------------------------------------------------

-------温柔地对待温柔的人，包容的三观就是最大的温柔。-------

-----------------------------------------------------------------------------------

闭包的各种实践场景：高级技巧与实用指南

闭包在很多现代编程语言中都存在。常见支持闭包的语言有 JavaScript、Python、Ruby、Swift、Kotlin、Scala 等。本文将着重讲在JavaScript中闭包的常见用法及实操意义。

在JavaScript中，闭包（Closure）是一个非常重要的概念，几乎贯穿于日常开发的方方面面。尽管它强大且用途广泛，但对于初学者而言，理解闭包的原理和实际应用常常是一个挑战。在这篇文章中，将通过理论与实践相结合的方式，帮助你全面理解闭包的本质、原理及其在实际项目中的应用。

一、什么是闭包？

1、闭包的基本概念

闭包可以简单理解为：一个函数和其词法环境的组合。当一个函数能够记住并访问其词法作用域，即使函数在其词法作用域之外执行，这个函数就被称为闭包。

在JavaScript中，函数在创建时会形成一个包含函数内部变量和外部环境的闭包。这意味着，闭包可以“记住”其创建时的上下文，并能在稍后调用时访问这些变量。

2、闭包的工作原理

要理解闭包的工作原理，我们首先需要理解JavaScript的执行上下文和作用域链。当一个函数在另一个函数内部被定义时，它会包含对外部函数变量的引用。这些引用在外部函数执行完毕后不会被销毁，而是被闭包所保留。


function outerFunction() {
    let outerVariable = 'I am from outer scope';
    function innerFunction() {
        console.log(outerVariable);
    }
    return innerFunction;
}
 
const closure = outerFunction();
closure();  // 输出: I am from outer scope

在上面的例子中，innerFunction保留了对outerVariable的访问权，即使outerFunction已经执行完毕。这就是闭包的基本特性。

3、闭包的用途

数据封装和私有化（模拟私有变量）
维持变量初始状态
柯里化（Currying）
函数工厂（创建函数的函数）

二、闭包的实际应用场景

闭包不仅仅是一个理论概念，在实际开发中它有很多重要的应用场景。

1、模拟私有变量

JavaScript中没有私有变量的概念，但通过闭包可以模拟出类似私有变量的效果。


function createCounter() {
    let count = 0;
    return {
        increment: function() {
            count++;
            return count;
        },
        decrement: function() {
            count--;
            return count;
        }
    };
}
 
const counter = createCounter();
console.log(counter.increment());  // 输出: 1
console.log(counter.increment());  // 输出: 2
console.log(counter.decrement());  // 输出: 1

在这个例子中，count变量无法直接从外部访问，只能通过increment和decrement方法进行操作。这种方式在编写模块化代码时尤为有用。

2、事件处理和回调函数

闭包在事件处理和回调函数中非常常见，尤其是在需要保持状态或访问外部变量的情况下。


function setupClickHandlers() {
    const buttons = document.querySelectorAll('button');
    for (let i = 0; i < buttons.length; i++) {
        buttons[i].addEventListener('click', function() {
            console.log('Button ' + i + ' clicked');
        });
    }
}
 
setupClickHandlers();

每个按钮点击时，都会输出其对应的索引。这是因为闭包“记住”了当时的 i 值。

3、延迟函数和异步操作

闭包在处理延迟函数或异步操作时也非常有用。


for (var i = 1; i <= 5; i++) {
    setTimeout(function() {
        console.log(i);
    }, i * 1000);
}
 
// 通过闭包解决变量提升问题
for (var i = 1; i <= 5; i++) {
    (function(j) {
        setTimeout(function() {
            console.log(j);
        }, j * 1000);
    })(i);
}

在第一个例子中，所有的setTimeout函数都会输出5，因为它们共享了同一个i变量。而在第二个例子中，通过闭包创建了新的作用域，每个setTimeout函数都有自己的j变量，从而正确输出1到5。

4、柯里化

柯里化（Currying）是一种将接受多个参数的函数转换成一系列接受单个参数的函数的技术。这种技术以数学家哈斯凯尔·柯里（Haskell Curry）的名字命名。在柯里化过程中，原函数被转换成一个函数，这个函数接受一个参数并返回一个新的函数，后者再次接受下一个参数，依此类推，直到收集完所有需要的参数。


function add(x) {
  return function(y) {
    return x + y;
  };
}
 
const addFive = add(5);
console.log(addFive(3)); // 输出 8

在这个例子中，add 函数返回一个新的函数，它记住了 x 的值，并接受另一个参数 y 来完成加法。

5、备忘录模式（Memoization）

备忘录模式特别适用于递归算法，如计算斐波那契数列，或者任何重复调用相同参数的递归函数。以下是使用闭包实现备忘录模式的一个例子。


function memoize(fn) {
  const cache = {};
  return function(...args) {
    const key = args.toString(); // 将参数列表转换为字符串作为缓存键
    if (key in cache) {
      return cache[key];
    } else {
      const result = fn.apply(this, args);
      cache[key] = result;
      return result;
    }
  };
}
 
const fibonacci = (n) => {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
};
 
const memoizedFibonacci = memoize(fibonacci);
 
console.log(memoizedFibonacci(10)); // 使用备忘录快速计算

在这个例子中，memoize 函数是一个高阶函数，它接收一个函数 fn 作为参数，并返回一个新的函数。新函数会检查传入的参数是否已经在缓存 cache 中，如果是，则直接返回缓存的结果；如果不是，则调用原始函数 fn，将结果存入缓存，并返回结果。

三、闭包的性能问题

虽然闭包功能强大，但滥用闭包可能会带来性能问题。每次创建闭包时，都会在内存中保留一份变量的引用，过多的闭包可能导致内存泄漏。因此，在编写代码时应谨慎使用闭包，避免在不必要的场合创建闭包。

1、内存泄漏

不当的闭包使用会导致内存泄漏，特别是在循环中创建大量闭包时。如果闭包引用了不再需要的变量或对象，内存将无法释放。


function leakyFunction() {
    let largeData = new Array(1000000).join('*');
    return function() {
        console.log(largeData.length);
    };
}
 
const leaky = leakyFunction();
// largeData 仍然保存在内存中，即使它不再被需要