一文了解JavaScript闭包函数

JavaScript中的闭包函数是一种常见的概念，尤其常用于前端开发中。本文将对闭包函数进行详细讲解，帮助更好地理解它的概念和使用方法。

什么是JavaScript闭包函数？

在了解什么是闭包函数之前，我们先要了解嵌套函数的概念。在JavaScript中，我们可以在一个函数内部定义另一个函数，这个内部函数就是嵌套函数。

闭包函数本质上也是一种嵌套函数，只不过它在内部函数里面引用了外部函数的变量。而这个内部函数可以作为返回值返回给外部函数，并在外部函数返回之后继续使用外部函数的变量，从而形成了一个闭合的函数环境，就叫做闭包函数。

简单来说，闭包函数就是内部函数可以访问到外部函数作用域中的变量。

如何创建闭包函数？

创建闭包函数比嵌套函数多了一个返回函数的步骤。以下是一个闭包函数的基本结构示例：

function createClosure() {
  var outerVar = 'I am an outer variable';

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

  return innerFunction;
}

var closure = createClosure();
closure(); // I am an outer variable

在这个例子里，我们在createClosure函数内部定义了一个innerFunction函数并将其返回。innerFunction中可以访问到outerVar这个外部函数定义的变量，由于innerFunction被返回后在外部被调用，因此innerFunction称为了闭包函数。

闭包函数的使用场景

闭包函数在实际开发中有很多应用场景，以下是两个常见的例子：

1. 实现函数记忆缓存

函数记忆是指将函数的运算结果缓存起来，在输入相同参数时直接返回缓存结果，以提高函数的执行效率，避免重复计算。闭包函数可以轻松实现这一功能。

function memoize(func) {
  var cache = {};

  return function() {
    var key = JSON.stringify(arguments);
    if (cache[key]) {
      return cache[key];
    } else {
      var value = func.apply(this, arguments);
      cache[key] = value;
      return value;
    }
  };
}

var fibonacci = memoize(function(n) {
  if (n == 0 || n == 1)
    return n;
  else
    return fibonacci(n - 1) + fibonacci(n - 2);
});

console.log(fibonacci(10)); // 55
console.log(fibonacci(10)); // 55

在这个例子里，memoize函数接收一个函数作为参数，并返回一个闭包函数，在闭包函数中使用一个cache对象来保存函数的计算结果。当输入相同参数时，闭包函数先尝试从缓存中取出结果，如果有缓存，则直接返回结果，否则计算结果并缓存起来。

2. 突破JavaScript作用域限制

JavaScript中的变量作用域是函数级别的，外部函数无法访问内部函数定义的变量。但是通过闭包函数，我们可以将内部函数定义的变量暴露给外部函数。

function createCounter() {
  var count = 0;

  function increment() {
    count++;
    console.log(count);
  }

  function decrement() {
    count--;
    console.log(count);
  }

  return {
    increment: increment,
    decrement: decrement
  }
}

var counter = createCounter();
counter.increment(); // 1
counter.increment(); // 2
counter.decrement(); // 1

在这个例子里，我们通过一个createCounter函数返回一个对象，该对象包含有两个可以对count变量进行操作的闭包函数increment和decrement。通过这种方式，我们就可以在外部函数中访问到闭包函数中的变量。