JS 闭包有哪些经典的使用场景和源代码

闭包在JavaScript中是一个非常强大的特性，经典的使用场景包括数据封装和隐藏、模块化代码、在回调函数中保持状态、创建工厂函数以及实现柯里化（Currying）。闭包允许函数访问并操作函数外部的变量，即使外部函数已经执行完毕。其中，数据封装和隐藏是闭包的一个非常重要的应用，通过闭包可以创建包含私有数据的函数，这些数据不会被外部直接访问，从而模仿类似私有变量的功能。

一、数据封装和隐藏

在JavaScript中，我们可以通过闭包隐藏数据，这样就可以实现类似于"私有变量"的概念。通过这种方式封装的变量，不会被外部直接访问，只可以通过提供的公有方法来间接操作。

function createCounter() {

    let count = 0; // 私有变量
    return {
        increment: function() {
            count++;
        },
        decrement: function() {
            count--;
        },
        getCount: function() {
            return count;
        }
    };
}
const counter = createCounter();
counter.increment();
console.log(counter.getCount()); // 输出 1
counter.decrement();
console.log(counter.getCount()); // 输出 0
// count 不可以直接访问，封装性良好。

二、模块化代码

闭包可以帮助我们更好地模块化代码。例如，我们可以创建模块，将相关的函数和变量组织到一起，只暴露必要的接口，其余的细节都隐藏起来。

var module = (function() {

    var privateVar = 'I am private...';
    return {
        getPrivate: function() {
            return privateVar;
        },
        setPrivate: function(value) {
            privateVar = value;
        }
    };
})();
console.log(module.getPrivate()); // 输出 'I am private...'
module.setPrivate('New value');
console.log(module.getPrivate()); // 输出 'New value'

三、在回调函数中保持状态

闭包也常用在异步操作和回调函数中，可以记住上下文环境中的变量，这样即使异步操作完成后，这些变量依然可以被访问。

function asyncFunction(data, callback) {

    setTimeout(function() {
        callback(data);
    }, 100);
}
var data = 'Data needed in callback.';
asyncFunction(data, function(data) {
    console.log('Callback called! ' + data); // 输出 'Callback called! Data needed in callback.'
});

四、创建工厂函数

闭包允许我们创建工厂函数，这类方法能够返回一个特定功能的函数，这在创建大量类似的函数时非常有用。

function makeAdder(x) {

    return function(y) {
        return x + y;
    };
}
const add5 = makeAdder(5);
console.log(add5(2));  // 输出 7
console.log(add5(3));  // 输出 8
const add10 = makeAdder(10);
console.log(add10(2)); // 输出 12
console.log(add10(3)); // 输出 13

五、实现柯里化（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));
            }
        }
    };
}
function sum(a, b, c) {
    return 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

闭包是JavaScript中一个非常有用且功能强大的特性，上述情境只是它们应用的冰山一角。掌握闭包的使用，能让你的JavaScript代码更加强大和灵活。

相关问答FAQs：

1. 闭包是什么？如何创建闭包？

闭包是指函数可以“记住”并访问其词法作用域，即使在该函数已经执行完毕之后仍然可以访问。在JavaScript中，闭包的创建非常简单，只需在一个函数内部定义另一个函数，并将内部函数作为返回值返回即可。

2. 闭包的经典使用场景是什么？

闭包的经典使用场景包括保存私有变量、模块化开发和事件处理等。通过使用闭包，我们可以创建私有变量，使其在函数外部不可访问，从而保护数据的安全性。此外，闭包还可以帮助我们将代码模块化，将一些变量和函数封装在一个闭包中，避免全局命名空间的污染。最后，闭包还常用于事件处理，例如在循环中创建闭包来保存循环变量的值，实现每个元素都可以正常运行的事件处理函数。

3. 可以给出一些闭包的源代码示例吗？

当然可以。下面是一个简单的闭包示例：

function outerFunc() {
  var outerVar = 'Hello';

  function innerFunc() {
    console.log(outerVar);
  }

  return innerFunc;
}

var closure = outerFunc();
closure(); // 输出: Hello

在这个例子中，outerFunc函数内部定义了innerFunc函数，并将其作为返回值返回。在外部调用outerFunc函数后，将返回的函数赋值给变量closure。在调用closure函数时，由于innerFunc形成了闭包，它可以访问到outerFunc函数的变量outerVar，并输出其值。