在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 ,则声明的变量不会存在变量提升，属于局部作用域.上面的绑定索引步骤就可以省略了.