[toc] ## var與let的區別 ### 1. 關于var和let的聲明 1.1 var聲明 ``` var i = 10; var i = 20; console.log(i); //20 ``` 1.2 let聲明，在一個作用域下不可重復聲明 ``` let i = 10; let i = 20; console.log(i); //Identifier 'i' has already been declared ``` 1.3 var的聲明提前 ``` var a = 1; function test(){ console.log(a); //1 } test(); /*因為a是全局變量，所以函數內可打印出a的值為1*/ ``` 聲明提前導致錯誤： ``` var a = 1; function test(){ console.log(a); //undefined var a = 2; } test(); ``` 以上函數可看作： ``` var a = 1; function test(){ var a; console.log(a); //undefined a = 2; } test(); ``` 因為函數內`var a`聲明提前導致，console.log(a)打印undefined ### 2. for循環中var和let 1) for中var i會對外界產生影響 ``` for(var i=1; i<5; i++){ console.log(i); //1, 2, 3, 4 } console.log(i); //5 ``` for中let i的作用域僅限for循環內 ``` for(let i=1; i<5; i++){ console.log(i); //1, 2, 3, 4 } console.log(i); //i is not defined ``` 2) for中var i中會覆蓋外界上層的聲明 ``` var i = 3; for(let i=1; i<5; i++){ console.log(i); //1, 2, 3, 4 } console.log(i); //5 ``` ### 3. for循環中嵌套事件，var與let的區別 1. 用var聲明的for循環會跳過點擊事件，當點擊事件執行的時候，i返回for循環最后得出的值 ``` <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <script> var lis = document.getElementsByTagName("li"); for(var i=0; i<lis.length; i++){ lis[i].onclick = function(){ // lis[i].style.color = "red"; //無法執行，因為沒有lis[3] //改成this.style.color = "red"可以執行 console.log(i); //i=3 } console.log(i); //0, 1, 2 } </script> ``` 2. let會正常執行 ``` var lis = document.getElementsByTagName("li"); for(let i=0; i<lis.length; i++){ lis[i].onclick = function(){ // lis[i].style.color = "red"; //可以正常執行, lis[i]返回點擊的i值 console.log(i); } console.log(i); } ```