1.前言
Javascript也算用了挺久了，为了得到一个变量，类似Java的静态变量的功能，我想到了很早以前学习JS的闭包，还有做俄罗斯方块的排行榜用到LocalStorage技术，所以想总结一下，分享给大家，也算是作为笔记记载了。
2.代码
<!DOCTYPE html>
<html>
<head>
<title>JS Counter Test</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$().ready(function(){
//*************counter0*************//
function counter0(){
var num = 0;
// function ()， it was the same.
return function plus(){
return num ++;
}
//plus();
};
//执行counter0时，里面的return，直接返回了其内容 ,并没有执行plus方法，此案例用来对比，满足好奇心。
$('#b0').click(function(){
$('#c0').html("Num0="+counter0());
});
//*************counter1*************//
function counter1(){
var num = 0;
function plus(){
return num ++;
}
plus();
return num;
};
//和counter0比较，执行了plus方法，这个就是闭包的前身了，但是每次调用counter1，plus只能执行一次，所以每次值都是1
$('#b1').click(function(){
$('#c1').html("Num0="+counter1());
});
//*************counter2*************//
var c2 = (function counter2(){
var num = 0;
return function (){
return num ++;
}
})();
//闭包的正确玩法，方法里面写一个匿名方法或者有名称的方法都行
$('#b2').click(function(){
$('#c2').html("Num2="+c2());
});
//*************counter3*************//
var c3 = (function counter3(){
var num = 0;
return function plus(){
return num ++;
}
})();
//闭包里面方法可以匿名也可以有名称
$('#b3').click(function(){
$('#c3').html("Num3="+c3());
});
//*************counter4*************//
//使用Html5本地存储技术，只要不要关了浏览器，即Session一直存在，就可以保存变量，刷新页面也存在
function counter4(){
if(typeof(Storage)!=="undefined"){
var num = localStorage.getItem("pageviews");
if (num != null){
localStorage.setItem("pageviews", Number(num) + 1);
}else{
localStorage.setItem("pageviews", 1);
num = 1;
}
$('#c4').html("Num4="+num);
}else{
$('#c4').html("Sorry, Your browser is unable to support web storage");
}
}
$('#b4').click(function(){
counter4();
});
$('#reset4').click(function(){
localStorage.clear();
$('#c4').html("Num4=0");
});
//refresh will exeute every time.
counter4();
});
</script>
</head>
<body>
<h3>JS Counter</h3>
<button id="b0">Click Btn0</button>
<div id="c0">line zero</div>
<button id="b1">Click Btn1</button>
<div id="c1">line one</div>
<button id="b2">Click Btn2</button>
<div id="c2">line two</div>
<button id="b3">Click Btn3</button>
<div id="c3">line three</div>
<button id="b4">Click Btn4</button> <button id="reset4">Rest Num4</button>
<div id="c4"></div>
</body>
</html>
闭包：有权访问另一个函数作用域内变量的函数都是闭包。
例如上面例子中counter方法里面的匿名或者有名称的方法。那你也许有疑惑，为啥后面调用counter2中num值是有记忆的呢？因为如果没有内部方法，使用了num变量，使得counter2方法使用完，变量num要被回收，但是又被另一个函数使用，即变量被引用，所以不会被回收了，因此可以利用这个特性来封装一个私有变量。
3.结果图
3.1初始化时的界面
3.2各自点击一次button
说明：Num2和Num3都是0的原因在于return num++; 是返回num +1前的num值，故此处为0。.
3.3前三个button各自点击3下，Btn3点击4下，Btn4点击6下。
4.结束语
闭包当然还可以使得对象中变量变成私有变量。