JavaScript 闭包的理解

Example：计数器困境

1. 设想下如果你想统计一些数值，且该计数器在所有函数中都是可用的。
   你可以使用全局变量，函数设置计数器递增：

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

计数器数值在执行 add() 函数时发生变化。
但问题来了，页面上的任何脚本都能改变计数器，即便没有调用 add() 函数。

2. 如果我在函数内声明计数器，如果没有调用函数将无法修改计数器的值：

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

JavaScript内嵌函数

实际上，在 JavaScript 中，所有函数都能访问它们上一层的作用域。JavaScript 支持嵌套函数。嵌套函数可以访问上一层的函数变量。该实例中，内嵌函数 plus() 可以访问父函数的 counter 变量：

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

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

闭包的使用例子

闭包：
1.闭包是可访问上一层函数作用域里变量的函数，即便上一层函数已经关闭。
2.或简单理解为定义在一个函数内部的函数，内部函数持有外部函数内变量的引用

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();
 
add();
add();
add();
// 函数自调用的写法 
// 计数器为 3

为什么上面这段代码没有直接写的 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 innerFunction 是：function；而typeof innerFunction（）是number；
    */
}
var add = outerFunction();

/* 
调用 outerFunction()返回的是内部函数innerFucntion,那么调用几次add()将调用几次
内部函数inner Function，内部函数公用了counter，所以能够计数,所以说闭包就是将内部嵌套函数变成外部可调用的。
*/

add();
add();
add();

如之前嵌套函数想实现的一样，我们做的实际是想调用内嵌的函数。
而每次调用outerFunction()时都重新声明了一个counter，这个互不影响

不使用闭包而是使用构造函数

自己定义一个构造函数，有自己的属性和方法，然后局部计算，操作自己定义的属性

var newAdd = function() {
	this.count = 0;
	this.addAdd = function(){
		this.count = this.count + 1;
		return this.count;
	}
}
var addCount1 = new newAdd();
var addCount2 = new newAdd();
// 声明两个，两个的Count也互不干扰
function myFunction3(){
    document.getElementById("demo3").innerHTML = addCount1.addAdd();
}
function myFunction3(){
    document.getElementById("demo3").innerHTML = addCount2.addAdd();
}