js局部变量和全局变量--函数作用域中变量的使用

当我们使用计数器时一般会使用全局变量来计数如下：

var counter = 0; //声明一个全局变量用于计数
 //声明一个用于计数的函数给变量赋值
 function add(){
    counter++;
 }
 //执行三次函数相当于函数执行了三次
 add();
 add();
 add();
 //将结果传到标签查看结果
 document.getElementById("pa").innerHTML += counter;

最后检查结果为3，这说明变量是受到了函数的影响，但是这样就有一个弊端就是，这个counter变量是全局变量，谁都能改变，但是实际时只有add函数能用到，所以我们就尝试着把变量counter放入函数中。

function add(){
    var counter = 0; //声明一个全局变量用于计数
    counter++;
    return counter;
 }
 //执行三次函数相当于函数执行了三次
 add();
 add();
 var rel = add();  
 //因为变量放进了函数中所以我们只能用一个变量接收然后展示结果
 //将结果传到标签查看结果
 document.getElementById("pa").innerHTML += rel;

我们发现结果是1，这是为什么？函数明明已经执行了三次，这是因为每次执行函数的时候，函数counter都被重新赋值，所以每次返回结果都是1。那么该如何解决这个问题呢？这就要用到函数闭包的策略和自调用函数，根据这种思路我们作改进结果如下；

//声明一个自调用函数，在声明的时候就会执行仅一次，然后返回表达式
 var newSz = (function add(){
    var counter = 0; //声明一个全局变量用于计数
    return function(){ counter++; return counter};
 })();
//执行表达式，即计数方法
 newSz();
 newSz();
 newSz();
 var rel = newSz();  
 //因为变量放进了函数中所以我们只能用一个变量接收然后展示结果
 //将结果传到标签查看结果,神奇的地方就在这里，这种在自调用函数只有在自调用的时候才会初始化参数，
 //而在它内部的函数可以使用到上一层的变量这就实现了计数器变量的函数内部使用
 document.getElementById("pa").innerHTML += rel;