JS闭包用法实例详解

什么是闭包?

闭包是指有权访问另一个函数作用域中变量的函数。创建闭包的常见方式是在一个函数内部创建另一个函数。在创建的内部函数中，可以访问外部函数的参数和变量，即使外部函数已经返回退出。

为什么要使用闭包?

闭包的主要作用是作为函数工厂，可以用来封装变量和方法，使全局变量不被污染。

同时，闭包可以让一个函数访问另一个函数的局部变量，使得这些变量的值即使在外部函数调用结束后仍然能被访问到。

闭包的使用场景

闭包最常见的使用场景是封装变量或函数。通过定义外部函数，在其内部定义内部函数，并在内部函数中引用外部函数定义的变量或函数，从而实现对外部函数变量或函数的保护控制。

例如：

function add() {
  var count = 0;
  function plus() {count += 1;}
  plus();
  return count;
}
add(); // 输出 1
add(); // 输出 1

在这个例子中，存储变量 count 的作用域被限制在 add() 函数内。 plus() 函数就是一个闭包，它可以访问 add() 函数内的变量 count。每一次执行 plus() 函数都会对 count 变量进行递增操作。因此，第一次执行 add() 函数时返回值为 1，第二次执行时返回值为 1，这说明内部变量 count 的值已经得到了保留，而闭包则对 count 变量的保护作用达到了目的。

闭包用法实例

实例1：计数器

function createCounter() {
  var counter = 0;
  function inner() {
    return ++counter;
  }
  return inner;
}

var getCount = createCounter();
console.log(getCount());  // 输出1
console.log(getCount());  // 输出2
console.log(getCount());  // 输出3

在这个例子中，createCounter 函数创建了一个闭包，并返回内部函数inner。内部变量 counter 被一直保留下来，并且每次调用 inner() 函数时，变量 counter 都会增加。这就实现了一个简单的计数器，每次调用 getCount() 函数都会返回递增的计数值。

实例2：缓存

function createCache() {
  var cache = {};
  function get(key) {
    return cache[key];
  }
  function set(key, value) {
    cache[key] = value;
  }
  return {
    get: get,
    set: set
  };
}

var cache = createCache();
cache.set('name', 'Jack');
cache.set('age', 20);
console.log(cache.get('name'));   // 输出 Jack
console.log(cache.get('age'));    // 输出 20
console.log(cache.get('gender')); // 输出 undefined

在这个例子中，createCache 函数同样创建了一个闭包，并返回了内部函数组成的对象。该对象包含了两个方法： get() 和 set()。 get() 函数通过传入的 key 参数返回对应的缓存值； set() 函数则将 value 值存入 cache 对象的 key 属性中。

整个缓存过程的实现都在闭包内完成， cache 对象的作用域被限制在闭包内。由于闭包的保护作用， cache 对象不会被外部访问到，因此实现了一个简单的缓存框架。