JS闭包的那些事

JavaScript 中的闭包（Closure）可以想象成一个“魔法盒子”，它能够记住并访问它被创建时的环境。

想象一下，你在一个房间里（函数A），房间里有一个盒子（闭包）。当你在房间里往盒子里放东西（变量和函数），然后你离开房间，带着这个盒子去到另一个房间（函数B）。尽管你已经不在原来的房间了，但只要你打开盒子，你仍然能够访问到原来房间里放进去的东西。

简单来说，闭包就是函数和它声明时的作用域的组合。它让你能够在函数外部访问函数内部的变量。这在很多编程场景中非常有用，比如创建私有变量、延长变量的生命周期、实现模块化等。

应用场景

1、数据封装和私有变量

通过闭包，你可以创建一个包含私有变量的环境，这些变量对外部代码不可见，只能通过闭包内的函数进行访问和修改。

function createCounter() {
  let count = 0;
  return {
    increase: function() {
      count++;
    },
    getCount: function() {
      return count;
    }
  };
}

const counter = createCounter();
counter.increase();
console.log(counter.getCount()); // 输出 1

2、模块化

闭包可以用来创建模块，封装代码和数据，防止全局作用域污染。

const myModule = (function() {
  let privateVar = "I'm private";

  return {
    publicMethod: function() {
      console.log(privateVar);
    }
  };
})();

myModule.publicMethod(); // 可以访问
console.log(myModule.privateVar); // 报错，无法访问

3、函数工厂

创建一系列函数，这些函数可以记住并操作一些共享的变量

function makeSizer(size) {
  return function(word) {
    return word.length <= size ? word : word.substring(0, size);
  };
}

const mySizer = makeSizer(5);
console.log(mySizer("Hello")); // 输出 "Hello"
console.log(mySizer("JavaScript")); // 输出 "JavaS"

4、柯里化函数

闭包可以用来创建柯里化函数，这些函数接受一些参数，返回一个新的函数，新函数接受剩余的参数。

function curry(f) {
  return function(a) {
    return function(b) {
      return f(a, b);
    };
  };
}

const add = curry(function(a, b) {
  return a + b;
});

const addFive = add(5);
console.log(addFive(3)); // 输出 8

5、循环和计数器

在循环中使用闭包可以记住每次迭代的状态

function createFunctions() {
  var results = [];
  for (let i = 0; i < 5; i++) {
    results.push(function() {
      return i;
    });
  }
  return results;
}

const functions = createFunctions();
functions[0](); // 输出 5，因为闭包记住了循环结束时的 i 值

6、事件处理器

在事件驱动编程中，闭包可以用来保存事件处理函数的状态

function createEventListener() {
  let message = "Hello";
  return function(event) {
    console.log(message);
  };
}

const listener = createEventListener();
document.getElementById('myButton').addEventListener('click', listener);

7、异步编程

在异步编程中，闭包可以用来保存函数的状态，直到异步操作完成

function fetchData(callback) {
  setTimeout(() => {
    const data = "Data received";
    callback(data);
  }, 1000);
}

fetchData(function(data) {
  console.log(data); // 1秒后输出 "Data received"
});