var 声明变量的变量提升问题(let/const)

最新推荐文章于 2022-05-05 17:33:26 发布

weixin_33709590

最新推荐文章于 2022-05-05 17:33:26 发布

阅读量193

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/amber-liu/p/9714416.html

版权

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

转载于:https://www.cnblogs.com/amber-liu/p/9714416.html

weixin_33709590

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
var 声明变量的变量提升问题(let/const)

在ES6之前，JavaScript没有块级作用域(一对花括号{}即为一个块级作用域)，只有全局作用域和函数作用域。变量提升即将变量声明提升到它所在作用域的最开始的部分。既全局变量.<script> let a=[];　　　　　　　　#console.log(i)//undifined for(var i=0;i<5;i++){ a[i...
复制链接

扫一扫