for循環中的作用域 閉包

1.作用域的問題
作用域可以簡單的理解為作用的范圍，一般就是大括號就是一個域，也就是一個范圍，一個空間，如果當前這個大括號內找不到變量的初始值，就回去上一級中去找，這里需要注意的有以下三點。

// for i 的作用域
for( var i = 0;i<4; i++){
	//TODO
}
console.log(i); // 輸出4，也就是 i 的作用域是在外面

// 多個script的情況
<script type="text/javascript">
	var name="bonly";
</script>
<script type="text/javascript">
	alert(name);  // 這里是可以獲取上一個script中的name值
</script>

// 通過小括號傳參數的作用域
function countPrice(num,price){
	// 這里才是num和price的作用域
	if(checkNum(num)&&checkPrice(price)){
		return num*price;
	}
}
function checkNum(num){
	return num>0 ? true : false;
}
function checkPrice(price){
	return price>0 ? true : false;
}
var num = 8; // 羊肉串的個數
var price = 10;  // 羊肉串的單價
console.log(countPrice(num,price)); //輸出總價80

2.for循環內想依次獲取索引值問題，點擊每一個li彈出索引

<ul>  
    <li>脆皮豬</li>
	<li>烤全羊</li>
	<li>叫花雞</li>
</ul>

我們可能會這樣寫，這里獲取的是偽數組，不是真正的數組，具有數組length屬性

var ali = document.querySelectorAll('li');
for(var i = 0; i < ali.length; i++) {
	ali[i].onclick = function() {
		console.log(i); // 輸出的結果都是3
	}
}

3.這里多了一個大括號，也就是又多了一個域並且這個i在這里並沒有定義，需要向上級查找，所以當查到的時候，for循環已經執行完，i的值變成了3。解決方案如下

// 閉包解決
var ali = document.querySelectorAll('li');
for(var i = 0; i < ali.length; i++) {
	(function(j) {
		ali[j].onclick = function() {
			console.log(j);  // 依次輸出0,1,2
		}
	})(i);
}
//閉包的作用是把定義的變量保存到內存中，不被銷毀，這里是就每次穿過來的i都被j接受並且保存。  
閉包還有其他寫法，如(funciton()()) !function()() ~function()() 等等

// 給對象添加屬性
var ali = document.querySelectorAll('li');
for(var i = 0; i < ali.length; i++) {
	ali[i].index=i;  // 這一步很關鍵
	ali[i].onclick = function() {
		console.log(this.index); // 點擊輸出索引
	}
}