JS函数之JavaScript闭包★★★★★

声明

该文部分代码和内容节选自菜鸟教程，仅用作个人学习，特此声明

链接：https://www.runoob.com/

JavaScript 闭包

1、计数器困境

设想下如果你想统计一些数值，且该计数器在所有函数中都是可用的。

你可以使用全局变量，函数设置计数器递增：

var counter = 0;
 
function add() {
   return counter += 1;
}
 
add();
add();
add();
 
// 计数器现在为 3

计数器数值在执行 add() 函数时发生变化。

但问题来了，页面上的任何脚本都能改变计数器，即便没有调用 add() 函数。如果我在函数内声明计数器，如果没有调用函数将无法修改计数器的值

function add() {
    var counter = 0;
    return counter += 1;
}
 
add();
add();
add();
 
// 本意是想输出 3, 但事与愿违，输出的都是 1 !

JavaScript 内嵌函数可以解决该问题。

2、JavaScript内嵌函数

所有函数都能访问全局变量。

实际上，在 JavaScript 中，所有函数都能访问它们上一层的作用域。

JavaScript 支持嵌套函数。嵌套函数可以访问上一层的函数变量。

以下实例中，内嵌函数 plus() 可以访问父函数 add() 的 counter 变量：

function add() {
    var counter = 0;
    function plus() {counter += 1;}
    plus();    
    return counter; 
}

如果我们能在外部访问 plus() 函数，这样就能解决计数器的困境。我们同样需要确保 counter = 0 只执行一次。

这个时候JavaScript闭包就派上用场了。

---

3、JavaScript 闭包

首先，我们来回忆一下之前学过的自调用函数

var add = (function () {						//该自调用函数只执行一次
    var counter = 0;							//设置计数器为0	
    return function () {return counter += 1;}   //返回函数表达式
})();
 
add();//1
add();//2
add();//3
 
// 计数器为 3

我们来分析一下上边的这个自调用函数实例

• 变量 add 指定了函数自我调用的返回字值。
• 自我调用函数只执行一次。设置计数器为 0。并返回函数表达式。
• add变量可以作为一个函数使用。它可以访问函数上一层作用域的计数器。
• 计数器受匿名函数的作用域保护，只能通过 add 方法修改。

这个实例就展示了函数的闭包，它使函数拥有私有变量成为可能。闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。直观的说就是形成一个不销毁的栈环境。

它的保护原理就是只有通过add才能访问add的上一层作用域的私有变量counter

我的个人理解是返回的函数表达式就是add(这样说可能不太严谨)，该函数表达式的上一层作用域自然就是自调用函数的作用域，故该函数表达式也就是add自然就可以访问自调用函数的私有变量counter了，并且只有add可以访问这个私有变量，从而起到了所谓的闭包保护作用

---

随堂笔记

• 很多人看到最后这个计数器问题都会感到困惑, 我也一样。经过代码验证, 发现其中的奥妙在于：

  var add = (function () {
      var counter = 0;
      return function () {return counter += 1;}
  })();
  

  注意: 为什么上面这段代码没有直接写的 function add (){...} 而是把function赋值给了变量add呢?

  我们通常会想当然的认为每次调用 add() 都会重走一遍add()中的代码块, 但其实不然。

  注意add方法中的return, 它return的并不是1,2,3这样的数值,而是return了一个方法,并且把这个方法赋值给了add变量。

  那么在这个function自运行一遍之后,其实最后赋值给add的是return counter += 1 这段代码。

  所以后面每次调用add() 其实都是在调用return counter += 1。

  再结合文章之前所说的, 闭包会持有父方法的局部变量并且不会随父方法销毁而销毁, 所以这个counter其实就是来自于第一次function执行时创建的变量。

• 理解闭包可以将以上代码分解如下：

  function outerFunction() {
      var counter = 0;
      function innerFunction(){
          return counter += 1;
      }
      return innerFunction;
      /*
       注意 typeof outerFunction 是：function；而typeof innerFunction（）是number；
      */
  }
  var add = outerFunction();
  
  /* 
  调用 outerFunction()返回的是内部函数innerFucntion,那么调用几次add()将调用几次
  内部函数inner Function，内部函数公用了counter，所以能够计数,所以说闭包就是将内部嵌套函数变成外部可调用的。
  */
  
  add();
  add();
  add();
  

• 多看看 JavaScript 闭包 | 菜鸟教程 (runoob.com) 下边别人发表的笔记加深闭包理解