浅谈Javascript中闭包的简单推演与作用

一、闭包的基本概念及作用：

闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域；作用：保护里面的私有变量不受外界干扰。

二、闭包的简单概述及实现

首先明确变量分为全局变量与局部变量

那么......直接开大，由最经典的“计数器困境”来刨析闭包的基本推演和理解：

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

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

var counter = 0; //定义全局变量counter
 
//构造一个计时函数
function add() {
   return counter += 1;
}
 
add();//输出1
add();//输出2
add();//输出3
 
// 现在，通过对add函数的不断调用我们已经实现了数字的累加：计数器现在为 3

但问题来了，此时页面上的任何脚本都能改变全局变量counter，进而改变我们希望的计数器的原有功能---仅仅因为调用add这个功能函数去对变量counter进行更改。

但如果我在函数内声明变量counter，那么就使它变成了一个局部变量，那么此时就不会被外界轻易篡改：

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

但，新的问题出现了，它失去了原有的功能！由于函数每次调用counter都被重新赋值为0，导致结果始终只有一个，那么怎么解决呢？

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

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

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

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

那么，是不是如果我们能在外部访问 plus() 函数，并确保 counter = 0 只执行一次，这样就能解决计数器的困境了呢？

那么明确几个基本概念：

自我调用函数只执行一次，然后销毁。

内部镶嵌函数在整个函数执行过程中所访问到的变量并不会销毁，会变成常驻内存储存起来

如下：

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();
//add函数自我执行，函数被销毁，此时返回内部镶嵌函数function () {return counter += 1;}，即后期调用等于调用var add=function () {return counter += 1;}；注意：变量counter已经被内部函数访问，并没有因为函数的自我销毁而消失，变成了隐藏的常驻内存
 
add();//输出1
add();//输出2
add();//输出3
 
这样，我们就完整的实现了一个只有调用函数add变量counter才会实现自我增加的功能函数

敲重点：add函数自我执行，函数被销毁，此时返回内部镶嵌函数function () {return counter += 1;}，即后期调用等于调用var add=function () {return counter += 1;}；注意：变量counter已经被内部函数访问，并没有因为函数的自我销毁而消失，变成了隐藏的常驻内存

如上，我们就实现了最基础的私有变量的保护,即闭包。

三、通过以上经典的“计数器困境”的基本推演和理解，我们知道了 JavaScript 闭包的基本作用如下：

它使得函数拥有私有变量变成可能。

计数器受匿名函数的作用域保护，只能指定方法（如上述例子中的add方法）修改。

闲的无聊，随便写写，偶有借鉴，彼此共勉。