详解JavaScript中的闭包是如何产生的

2023年6月10日下午7:53 • JavaScript

下面是详解JavaScript中的闭包是如何产生的的完整攻略：

什么是闭包

闭包是指在一个函数内部创建另一个函数，并返回这个函数，这个函数可以访问父级作用域中的变量。因为这种情况下父级作用域中的变量不会被垃圾回收机制回收，所以称之为“闭包”。

简单来说，闭包是指有权访问另一个函数作用域中变量的函数。

闭包的产生

闭包的产生通常有两种情况。

1. 在函数内部创建另一个函数

在一个函数内部创建另一个函数，并在这个函数内部访问了外部函数的变量时就会产生闭包。

例如，下面这个函数就创建了一个内部函数，并在这个内部函数内部访问了外部函数的变量：

function createCounter() {
  let count = 0;
  function counter() {
    count++;
    console.log(count);
  }
  return counter;
}

let counter1 = createCounter();
counter1(); // 输出1
counter1(); // 输出2

这个例子中，外部函数createCounter创建了内部函数counter，并返回了这个内部函数。内部函数counter可以访问外部函数的变量count，并对其进行了修改。由于内部函数counter存在，导致count变量的作用域没有结束，也就是说，count变量没有被垃圾回收机制回收。这就是闭包产生的过程。

2. 在函数外部访问内部函数的变量

在函数外部访问内部函数的变量时，如果这个变量是通过闭包产生的，那么也会涉及到闭包的问题。

例如，下面这个例子中的内部函数increase定义时没有使用let或var关键字声明变量，因此它定义的变量count是一个全局变量。而外部函数counter返回了一个匿名函数，这个匿名函数引用了内部函数increase中的变量count。因为这个匿名函数引用了increase中的变量count，导致count变量的作用域没有结束，也就是说，count变量没有被垃圾回收机制回收。这就是闭包产生的过程。

function counter() {
  let count = 0;
  function increase() {
    count++;
    console.log(count);
  }
  return increase;
}

let increase1 = counter();
increase1(); // 输出1
increase1(); // 输出2

闭包的应用场景

闭包可以用于模拟私有变量、实现函数的记忆和缓存等。在JavaScript中，常常使用闭包来实现一些高级的功能。

模拟私有变量

例如，下面这个例子中的函数createPerson返回了一个对象，这个对象包含了两个方法setName和getName。这两个方法都可以修改或获取对象的名字。但是，这个名字是通过闭包产生的，外部无法直接访问这个名字。

function createPerson() {
  let name = '';
  return {
    setName(newName) {
      name = newName;
    },
    getName() {
      return name;
    }
  };
}

let person1 = createPerson();
person1.setName('Tom');
console.log(person1.getName()); // 输出Tom
console.log(person1.name); // 输出undefined

实现函数的记忆和缓存

例如，下面这个例子中的函数memoize接受了一个函数作为参数，并返回了一个新的函数，这个新的函数可以缓存函数的计算结果。新的函数首先会在缓存中查找计算结果，如果缓存中没有，则调用原函数进行计算，并将计算结果缓存起来。如果缓存中有，则直接返回缓存中的结果。

function memoize(fn) {
  let cache = {};
  return function(...args) {
    let key = JSON.stringify(args);
    if (cache[key]) {
      return cache[key];
    } else {
      let result = fn.apply(this, args);
      cache[key] = result;
      return result;
    }
  };
}

function add(x, y) {
  console.log(`计算${x} + ${y}`);
  return x + y;
}

let memoizedAdd = memoize(add);
console.log(memoizedAdd(2, 3)); // 输出计算2 + 3和5
console.log(memoizedAdd(2, 3)); // 只输出5

在这个例子中，使用闭包缓存了函数add的计算结果，避免了重复计算，提高了函数的执行效率。