JavaScript中闭包的写法和作用详解

什么是闭包

闭包是指有权访问另一个函数作用域中的变量的函数。闭包是JavaScript中最强大的特性之一，也是最容易误用而降低性能的特性之一。

举个例子：

function outer() {
  let name = "Bob";
  function inner() {
    console.log(name);
  }
  return inner;
}
let func = outer();
func(); // 输出 Bob

在这个例子中，我们定义了一个outer函数，它返回了一个inner函数。inner函数中访问了name变量，而这个变量在outer函数作用域中定义。调用outer函数会返回一个inner函数，我们把这个函数赋值给变量func，最后调用func函数会输出 Bob。

这个过程中，inner函数访问了outer函数中的变量，而outer函数已经执行完毕，这时候如果不使用闭包，name就会被垃圾回收器回收掉，inner函数无法访问它，也就无法正确输出 Bob。

闭包的写法

在JavaScript中，闭包的写法有两种：

1. 函数作为返回值

function outer() {
  let name = "Bob";
  function inner() {
    console.log(name);
  }
  return inner;
}
let func = outer();

这个例子中，我们定义了一个outer函数，它返回了一个inner函数。在调用outer函数之后，我们把返回值赋值给了变量func。最后调用func函数会输出 Bob。

2. 函数作为参数

function outer(func) {
  let name = "Bob";
  func(name);
}
function inner(name) {
  console.log(name);
}
outer(inner); // 输出 Bob

这个例子中，我们定义了一个outer函数，它接受一个函数作为参数。在outer函数内部，我们定义了一个字符串name，然后把name作为参数传递给了传入的函数func。在这个例子中，我们把inner函数作为参数传递给了outer函数，inner函数内部访问了name变量并输出了它。最后调用outer函数会输出 Bob。

闭包的作用

闭包有以下几个作用：

1. 封装变量

使用闭包可以将变量封装起来，防止它们被外部访问和修改，以达到数据安全的目的。例如：

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

在这个例子中，我们定义了一个counter函数，它返回了一个包含三个函数的对象。这三个函数分别是increment、decrement和getCount，它们均访问了count变量。由于count变量只在counter函数的作用域中，因此它们是外部无法访问和修改的，从而实现了封装的效果。

2. 延长变量的生命周期

使用闭包可以延长变量的生命周期，防止它们过早被垃圾回收器回收掉，以达到保存状态的目的。例如：

function bindEvent() {
  let btn = document.getElementById("btn");
  let count = 0;
  btn.addEventListener("click", function() {
    count++;
    console.log(count);
  });
}
bindEvent();

在这个例子中，我们定义了一个bindEvent函数，在其中监听了一个按钮的点击事件，每次点击按钮会输出一个数字，这个数字代表了点击的次数。由于count变量被click事件回调函数所引用，因此即使bindEvent函数执行完毕，count变量仍然存在，并且每次点击按钮都会增加它的值，达到了保存状态的效果。