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

var 声明变量的变量提升问题(let/const)的更多相关文章

  1. var声明的成员变量和函数内声明的变量区别

    1.函数内部,有var声明的是局部变量,没var的,声明的全局变量. 2.在全局作用域内声明变量时,有var 和没var声明的都是全局变量,是window的属性.通过变量var声明全局对象的属性无法通 ...

  2. “没有用var声明的为全局变量”这种说法不准确

    结论: “没有用var声明的变量为全局变量”这样的说法不太正确,需要在这句话前面加一个前提,如果①变量前面没有用var声明,②在变量所在在的作用域链中没有这个变量名称,则设置该变量为全局变量. 代码 ...

  3. var声明提前 undefined

    1.同一代码块内,所有var声明都提前: 2.var 变量的初始化不提前,按顺序执行: 3."undefined"和undefined都存在于window中: 4.if(" ...

  4. JS中的函数声明和函数表达式的区别，即function(){}和var function(){}，以及变量提升、作用域和作用域链

    一.前言 Uncaught TypeError: ... is not a function function max(){}表示函数声明,可以放在代码的任何位置,也可以在任何地方成功调用: var ...

  5. 使用var声明的变量 和 直接赋值并未声明的变量的区别

    在看JS高级程序设计时忽然想到这个问题,众所周知,直接赋值一个变量而为声明,会产生一个全局变量(或者说是全局对象的属性),但用var声明的变量 和 直接赋值而并未声明的变量 都有哪些区别呢,这是我在百 ...

  6. es6中的let声明变量与es5中的var声明变量的区别,局部变量与全局变量

    自己通过看typescript官方文档里的let声明,与阮一峰老师翻译的的es6学习文档,总结以下三点 1.var声明可以多次重复声明同一个变量,let不行 2.let变量只在块级作用域里面有效果,v ...

  7. JS变量重复声明以及忽略var 声明的问题及其背后的原理

    腾讯的一个笔试题,先看一下 var a = 100; function fn() { alert(a); //undefined var a = 200; alert(a); //200 } fn() ...

  8. 【repost】 JS变量重复声明以及忽略var 声明的问题及其背后的原理

    JS的容错率很高,一些其他语言常见的小错误JS都能大度得包容,比如给一个方法传入超出预计的参数.在声明变量之前使用该变量(变量的声明提升解决了这个问题)等等,这里我们就要解剖一下JS变量重复声明以及当 ...

  9. JavaScript 中定义变量时有无var声明的区别

    关于JavaScript中定义变量时有无var声明的区别 var a=5; //正确 a=5; //正确 在javascript中,以上两种方法都是定义变量的正确方法.微软的Script56.CHM中 ...

  10. ES6的let和var声明变量的区别

    关于let的描述 let允许你声明一个作用域被限制在块级中的变量.语句或者表达式.与var关键字不同的是,它声明的变量只能是全局或者整个函数块的. 作用域规则 let声明的变量只在其声明的块或子块中可 ...

随机推荐

  1. 一些lua代码

    1.把k--v表转化为数组表,只支持2级 2.取中值 3.字符串按每行最多n像素分割,并返回每行最大宽度,可以用"\n"手动换行

  2. Odoo 8.0 new API 之model 装饰

    model装饰器的作用是返回一个集合列表 应用举例: 定义columns langs = fields.Selection(string="Lang",selection=&quo ...

  3. linux查看端口命令和kill

    1.查看  netstat -atunlp 2kill:kill -9 PID

  4. 逻辑斯特回归（logistic regression）与最大熵模型(maximum entropy model)

  5. Ubuntu libpng png++安装

    http://blog.csdn.net/xiaozhun07/article/details/49865785 png使用过程问题小结: (1) libpng “png_set_longjmp_fn ...

  6. 解决cookie跨域访问.2

    v一.前言 随着项目模块越来越多,很多模块现在都是独立部署.模块之间的交流有时可能会通过cookie来完成.比如说门户和应用,分别部署在不同的机器或者web容器中,假如用户登陆之后会在浏览器客户端写入 ...

  7. 敏捷软件开发实践-Code Review Process（转）

    介绍: 在敏捷软件开发中,从代码的产生速度上来看,要比 传统Waterfall产生速度高很多.因为我们把时间安排的更加紧凑了.那么这么多的代码,如何能保证这些代码质量呢?很多人可能直接想到静态代码检测 ...

  8. Android的Parcelable中describeContents方法的作用

    这个方法返回的值通常为0,那什么情况下需要填写其他值呢? 这个方法到目前为止返回其他唯一有效的值就是CONTENTS_FILE_DESCRIPTOR(0x01),指明这个Parcel的内容包含文件描述 ...

  9. Windows网络接口API函数

    Windows提供了一套非常轻量级的网络函数,方便进行网络应用开发,整理出来供参考使用. The following functions are used in Windows networking: ...

  10. 类库服务寄宿到WebHost

    1.该Demo中包含一个类库项目.一个空的WebForm项目 2.新建WebForm项目 3.全局路由中注册类库服务 public class Global : System.Web.HttpAppl ...