通过计数器了解闭包

闭包

这个问题旨在介绍 闭包(closures) 的概念。在 JavaScript 中，函数具有对在相同作用域以及任何外部作用域中声明的所有变量的引用。这些作用域被称为函数的 词法环境 。函数与其环境的组合被称为 闭包 。

简述： 闭包是函数和声明该函数的词法环境的组合。

简单的来说就是：在一个内部函数中访问外部函数作用域的变量

闭包的主要特点：

• 闭包可以访问包含它的函数内部的变量，即使该函数已经执行完毕。

• 函数内部的变量即使函数执行完毕后也不会被垃圾回收机制回收。

• 闭包会使得函数内部的变量一直驻留在内存中，除非没有任何函数引用这些变量。

闭包的作用：

• 保护函数内部变量不被外部访问。

• 在函数外部读取和修改函数内部变量。

• 实现私有变量和私有方法。

• 可以在事件回调函数或者定时器中访问外部变量。

• 实现模块化。

• 在面向对象的语言中实现私有方法和属性。

创建闭包的常见方式：

• 函数嵌套函数
• 对象内部定义函数
• 使用bind()、call()、apply()绑定this

以下我们通过实现计数器的方法来认识闭包

闭包示例

const createCounter = function () {
  let count = 0
  return function () {
    return count++
  }
}
let counter = createCounter()
counter() // 0
counter() // 1

在以上示例，我们声明一个名为 createCounter 的函数，在其内部声明一个 count 变量来使内部返回函数能对其进行访问并修改其值。当我们将返回的函数分配给 counter 变量时，我们创建了一个闭包，它保留了对 count 变量的引用。这样我们就完成一个简单的闭包函数。之后我们每次调用 counter() 时，它都会递增 count 变量，例如：第一次调用 counter() 后输出 0 ，第二次调用 counter() 后输出 1 ，再次调用后输出的值会依次递增。温馨提示：要想看到输出的值记得把它打印到控制台

注意：由于是修改了 count 变量的值，所有应该使用 let 关键字来声明，而不是 const 关键字来声明它。

以下是闭包函数带参的写法

const createCounter = function (n) {
  return function () {
    return n++
  }
}

以上可通过箭头函数减少代码量简写为

const createCounter = (n) => {
  return () => n++
}

闭包使用需要注意的问题：

• 可能会产生内存泄漏，如果闭包中的引用对象无法及时释放。

• 过多使用闭包会影响页面性能。