DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> js for循環,為什麼一定要加var定義i變量
js for循環,為什麼一定要加var定義i變量
編輯:關於JavaScript     
譬如下面。
復制代碼 代碼如下:
for(i=0;i<10;i++){//就不寫成: var i=0
   alert(i);
}

  但是,這真的不是個好習慣,下面我就說說為什麼寫Js的for循環一定要加var,否則會時不時給你帶來煩人難查的bug。
  譬如現在我們要實現這樣的功能:輸出  
  10
  20
  30
  40
  50
  60
  70
  80
  90
  100
  通過下面code實現,WriteNumber從1到10循環,每次循環調用TenTimes方法返回10倍的索引值。 
復制代碼 代碼如下:
<script type="text/javascript">
function WriteNumber() {
for (i = 1; i <= 10; i++) {
document.write(TenTimes(i) + "<br/>")
}
}
function TenTimes(v) {
var result = 0;
alert(i);
for (i = 1; i <= 10; i++) {
result += v;
}
return result;
}
WriteNumber();
//alert(i)
</script>

  你會發現最終只輸出了10。大家可以用下面的代碼框運行測試。

[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
關於在WriteNumber和TenTimes方法裡加不加var,就是說是否聲明索引變量i有4種情況:
  第一種情況,WriteNumber和TenTimes各有1個for循環,2個循環裡均沒有用var聲明i索引變量。
  運行結果:會alert出1。結果只輸出了10,不是我們所想要的。
  分析:執行WriteNumber時,其作用域內並沒有找到聲明過的變量i,直接對i進行賦值,則隱式的將i聲明為全局變量,(對於函數內部未聲明過的變量,如果給它賦值,會隱式的將它聲明為全局變量。) 循環開始,i=1,調TenTimes方法,發現TenTimes方法也沒有聲明過變量i ,所以TenTimes裡的i就是全局變量i,就和WriteNumber的i成了同一個。 這時line9 alert出來的自然是1了。TenTimes循環了10次,使得全局的i變成了11,自然WriteNumber就不會執行第2次循環操作了。
  驗證:如果在WriteNumber();語句後加alert(i),即取消line16的注釋,會發現alert出12(12=10+2個i++),證明了i此時為windows對象。
  第二種情況,WriteNumber聲明了i變量,即line3: var i=1,TenTimes未聲明i變量,即line10: i=1。
  運行結果:line9 alert(i)處報i未定義錯誤 ,因為WriteNumber有聲明過變量i,所以沒有成為全局的i,TenTimes執行時又沒有聲明過i,所以報未定義。若注釋掉line9,輸出結果正確。因為當TenTimes裡運行到i=1時,隱式將i聲明是全局變量,不影響WriteNumber裡的i。WriteNumber仍然會執行10次循環。
  驗證:如果在WriteNumber();語句後加alert(i),即取消line16的注釋,會發現alert出11(11=10+TenTimes裡的i++),證明了此時有windows.i。
  第三種情況,WriteNumber沒有聲明i變量,即line3: i=1,TenTimes聲明了i變量,即line10: var i=1。
  運行結果:彈出10個undefined。因為WriteNumber未聲明i,隱式將i聲明是全局變量,而TenTimes有聲明過變量i(補充一句,對於變量的聲明都是在預編譯中進行的),所以line9 alert(i)裡的i不是windows.i,而是TenTimes聲明的變量i,此時當然是undefined了。同時,發現輸出結果正確,因為TenTimes的i不會影響WriteNumber的全局i,WriteNumber仍然是執行了10次循環。
  第四種情況:WriteNumber和TenTimes均用var聲明了i。
  運行結果:注釋掉line9,不說了,好習慣,結果當然完美。
  雖然第二、三種情況輸出結果是正確的,但是對i的使用很混亂,應該算是運氣導致結果正確,因為剛好1個是window.i,一個是函數內部的私有變量i,使得沒有沖突。
此文雖然講的是寫for循環為什麼一定要加var,但其實講的是變量的作用域(或者說變量的生命周期)。理解之後,下面的2段code運行結果你應該能准確說出答案吧。

[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]

[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
Ps:說道coding的好習慣,想起了這個:if(a==3) 應該寫成if(3==a) 。因為我們常會把==寫成1個=,如果把變量寫在右邊時只寫了1個=,就會報編譯錯誤,這樣就能及時發現錯誤。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved