js閉包~！[[5]]

啥是閉包？

這個玩意兒很有用！！

爲啥要有面相對象~？

還有函數式編程哦~  

js好強大

且看分析：

<script> 
/*
	下面例子形成了一個 "環境包"  但是別人訪問不到 age=20 這個。

	下面這個例子，  t2 接受了一個包  一個環境包  t2是有生態環境的

	主要在於 return t2  -----> t2 把 環境包捕捉
*/
function t1(){
	var age = 20;
	function t2(){
		alert(age);
	}
	return t2;
}

var tmp = t1();

var age = 99;
tmp();


</script>

取決於聲明的時候 不取決於調用的時候

例子：

<script> 
/*
	// {函數的作用於取決於聲明的時候， 不取決調用的時候！！！！}


	兩個爸爸， 到底alert那個爸爸？


*/
function who_dad(){
	var dad = '我是第一個爸爸';
	var me = function (){
		alert(dad);
	}
	return me;
}


function run(){
	var dad = "我是第二個爸爸";
	var me = who_dad();
	me();
}


run();


</script>

閉包計數器：

(場景：多人都開發js,每調用一次自增一次)

1：設置一個全局的變量

如：

window.xx = yy;
window.xx ++;   // 但是缺點是，污染全局變量了,  都用引用自己的js 就妥了....

2：閉包來搞  (污染不到的變量)

<script> 

function cout(){
	var cnt = 0;
	function cen(){
		return ++cnt;
	}
	return cen;   // 返回內個包包
}
var cen = cout();   // 需要接受這個包包
alert(cen());     // 調用
alert(cen());     // 調用
alert(cen());     // 調用

</script>

精簡：

// 一  返回包


(function (){
	var cnt = 0;
	return function(){
		return ++cnt;
	}
})();

// 二  接收包  完成
var cen = (function (){ 
	var cnt = 0;
	return function (){
		return ++cnt;
	}
})();
alert(cen());
alert(cen());
alert(cen());

重要：

/*
三、依然是全局變量，解決:
	1. 統一放在一個全局變量上面 如->jquery->$
	2. 用每個人自己的命名空間
*/
// 1 放在jquery的計數器
var $ = {};
$.cnt =( function (){
	var cnt = 0;
	return function(){
		return ++cnt;
	}
})();
alert($.cnt());
alert($.cnt());
alert($.cnt());
alert($.cnt());


// 2 個人命名空間
var zp = {};  // 說清，zp是我的空間
zp.cnt = (function(){
	var cnt = 0;
	return function (){
		return ++cnt;
	}
})();
alert(zp.cnt());
alert(zp.cnt());
alert(zp.cnt());
alert(zp.cnt());

最後一個測試題目：

	
	<ul>
		<li>one</li>
		<li>three</li>
		<li>four</li>
		<li>five</li>
	</ul>


<script> 

/*
	導航欄， 有四個
	然後想給效果，  然後for來添加click事件

單擊分別淡出 1 2 3 4
*/

var li = document.getElementsByTagName('li');
for(var i=0;i<li.length;i++){
	li[i].οnclick=function(){
		alert(i);
	}
}


// 結果 4 4 4 4 

</script>

答案：

(複製下面哦~)

var li = document.getElementsByTagName('li');
for(var i=0;i<li.length;i++){
	li[i].xxoo = i;	
	li[i].οnclick=function(){		
		alert(this.xxoo);
	}
}

// 函數式

var list = document.getElementsByTagName('li');
var len = list.length;
var i = 0;

for (i; i < len; i++) {
    (function (n) {
        list[n].onclick = function () {
            alert(n);
        };
    })(i)
}