在ES6之前，JavaScript沒有塊級作用域(一對花括號{}即為一個塊級作用域)，只有全局作用域和函數作用域。變量提升即將變量聲明提升到它所在作用域的最開始的部分。既全局變量.
<script> let a=[]; #console.log(i)//undifined for(var i=0;i<5;i++){ a[i]=function () { console.log(i) } } a[2]();//5 此時i是全局變量,會先聲明變量i,然后for循環賦值 let f=[]; for(let i=0;i<5;i++){ f[i]=function () { console.log(i) } } f[2]();//2 //let 和 const 聲明變量1.都不存在變量提升,2.局部作用域,3.變量不能重復聲明 // console.log(b); #報錯 { const b=5; // b++; //const 同let,並且只能聲明常量(不可變的量),且不能做修改, } </script>
需求：鼠標放到上面的li上，li本身變色，對應的p也顯示出來
思路：1.點亮上面的盒子。 2.利用索引值顯示下面的盒子。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ list-style: none; } #tab{ width: 480px; margin: 20px auto; border: 1px solid red; } ul{ width: 100%; overflow: hidden; } ul li{ float: left; width: 160px; height: 60px; line-height: 60px; text-align: center; background-color: #cccccc; } ul li a{ text-decoration: none; color:black; } li.active{ background-color: red; } p{ display: none; height: 200px; text-align: center; line-height: 200px; background-color: red; } p.active{ display: block; } </style> </head> <body> <div id="tab"> <ul> <li class="active"> <a href="#">首頁</a> </li> <li> <a href="#">新聞</a> </li> <li> <a href="#">圖片</a> </li> </ul> <p class="active">首頁內容</p> <p>新聞內容</p> <p>圖片內容</p> </div> </body> <script> var obtns=document.getElementsByTagName('li'); var op=document.getElementsByTagName('p'); for(var i=0; i<obtns.length;i++){ //因為i是全局變量,導致最后(遍歷綁定所有事件后)i的值是3.
obtns[i].index=i; //綁定索引值(新增一個自定義變量:index屬性) obtns[i].onclick=function(){ for(var j=0;j<obtns.length;j++){ //走到這證明已經觸發了事件,i此時的值已經是3了 obtns[j].className=''; op[j].className=''; } this.className='active'; //所以可以用this(事件源自身,和self一樣)
//op[i].className='active'; 會報錯.因為此時i的值也是3,所以可以通過綁定索引來來獲取對應的索引值,this.index op[this.index].className='active'; //此時才不會報錯 } } </script> </html>
方式2
可用es6的let替換掉var ,則聲明的變量不會存在變量提升，屬於局部作用域.上面的綁定索引步驟就可以省略了.