JavaScript 匿名函数（anonymous function）与闭包（closure）

JavaScript 匿名函数（anonymous function）与闭包（closure）是 JavaScript 语言中比较常用且常误解的概念。在本文中，我们将详细介绍匿名函数与闭包的概念、用法及其注意事项。

匿名函数

概念

匿名函数是指没有函数名的函数。在 JavaScript 中，我们通常通过函数表达式来定义匿名函数。如下所示：

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

上述代码定义了一个名为 add 的常量，其值为一个匿名函数，该匿名函数接收两个参数 a 和 b，并返回它们的和。由于函数没有名字，因此在代码中无法通过函数名来调用它，需要通过变量 add 来调用：

add(1, 2); // 返回 3

用法

匿名函数的使用场景较多，常见的用法包括以下几个方面：

1. 作为参数传递给其他函数。例如，在 Array.prototype.map 方法中可以使用匿名函数：

const arr = [1, 2, 3];
const doubled = arr.map(function (num) {
  return num * 2;
});
console.log(doubled); // 输出 [2, 4, 6]

1. 作为自执行函数使用。自执行函数是一种特殊的匿名函数，其在定义后会立即执行。自执行函数通常使用括号将函数包裹起来，并在括号后面跟上一个空的函数调用。例如：

(function () {
  console.log('自执行函数执行了！');
})();

上述代码定义了一个自执行函数，并立即执行该函数，在控制台中输出了一条信息。

1. 作为闭包使用。闭包是指函数及其相关变量的组合体，它可以在函数内部定义并使用一个或多个变量，并将这些变量保存在内存中。例如：

function createCounter() {
  let count = 0;
  return function () {
    count++;
    console.log(count);
  }
}
const counter = createCounter();
counter(); // 输出 1
counter(); // 输出 2
counter(); // 输出 3

上述代码定义了一个 createCounter 函数，该函数返回了一个匿名函数。在返回的匿名函数内部，我们定义了一个变量 count，并将其初始化为 0。每次调用返回的匿名函数时，都会将 count 的值加 1，并将其输出到控制台。

注意事项

使用匿名函数时，需要注意以下几点：

1. 匿名函数无法在自身内部递归调用。因为匿名函数没有名字，无法在函数内部调用自身。如果需要递归调用函数，应该使用具名函数。

2. 匿名函数的作用域与具名函数相同。在 JavaScript 中，函数的作用域是由函数声明位置的作用域链决定的，而与函数的名称无关。因此，匿名函数的作用域与具名函数相同，即在函数内部可以访问函数声明所在的作用域中的变量。

闭包

概念

闭包是指可以访问外部函数作用域中变量的函数。在 JavaScript 中，闭包通常是由内部函数引用了外部函数作用域中的变量而产生的。例如：

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

上述代码定义了一个 createAdder 函数，该函数接收一个参数 x，并返回一个函数。在返回的函数中，我们对参数 x 和传入的参数 y 进行相加，并将结果返回。在第二行，我们通过调用 createAdder(5) 来创建了一个函数 add5。然后我们传入参数 3 来调用 add5(3)，将返回 8。

在闭包中，由于内部函数可以访问外部函数作用域中的变量，因此外部函数作用域中的变量不会随着函数执行结束而被销毁，而是会被内部函数引用并保存在内存中。这为 JavaScript 中一些高级编程技巧的实现提供了基础。

用法

闭包的使用场景较多，常见的用法包括以下几个方面：

1. 封装变量。通过闭包和立即调用函数表达式（IIFE），可以实现类似于私有变量的封装效果。例如：

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

上述代码定义了一个 counter 对象，该对象包含了 getCount、increment 和 decrement 三个方法。这些方法都是通过闭包访问了外部函数作用域中的变量 count。由于 count 只能通过 counter 对象中的方法进行更改，因此可以实现对 count 的封装。

1. 记忆结果。使用闭包可以通过缓存中间结果的方式实现记忆结果，提高函数的性能。例如：

function fib(n) {
  if (n <= 1) {
    return n;
  }
  let cache = {};
  function _fib(n) {
    if (n <= 1) {
      return n;
    }
    if (!cache[n]) {
      cache[n] = _fib(n - 1) + _fib(n - 2);
    }
    return cache[n];
  }
  return _fib(n);
}
console.log(fib(45)); // 输出 1134903170

上述代码定义了一个 fib 函数，该函数实现了斐波那契数列的计算。由于递归计算斐波那契数列的时间复杂度较高，因此我们使用了闭包来缓存中间结果。在 _fib 函数中，我们使用一个对象 cache 来缓存已计算的值。如果已经计算过了，则直接返回该值。否则，我们进行递归计算，并将结果缓存到 cache 中。

注意事项

使用闭包时，需要注意以下几点：

1. 闭包中引用的变量不会被垃圾回收。由于闭包中引用的外部变量将被保存在内存中，因此不再需要时应当手动将其置为 null。

2. 闭包中的变量可能引发内存泄漏。如果对于闭包中引用的变量无法确定其生命周期，就可能会出现内存泄漏的情况。例如：

function createDivWithListener() {
  const div = document.createElement('div');
  const listener = function () {
    console.log('click');
  };
  div.addEventListener('click', listener);
  document.body.appendChild(div);
}
createDivWithListener();

上述代码定义了一个函数 createDivWithListener，该函数创建了一个 div 元素，并为其添加了一个 click 事件监听器。在函数执行后，由于闭包中引用了 div 元素和 listener 函数，它们将一直存在于内存中，直到页面被卸载，进而引发内存泄漏问题。为了避免这种情况的出现，应该在不需要使用变量时手动解除对其的引用。