在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. 复现IIS6.0远程命令执行漏洞

    出这个漏洞有一定时间了,一直没测试,因为知道这个漏洞有条件的,好吧,顺便感谢royal大佬今天晚上日内网的指点. 漏洞要求: 开启Webdav PS:不想刚拿下的内网服务器一下权限掉了,又不想放xx远 ...

  2. cocos2dx3.2升级Android5的坑

    虽然已经转到服务端,但是对客户端的事情,偶尔还看看.公司的游戏用的是cocos2dx 3.2的版本, 然而在Android 5 上却无法运行. 先是没有触摸事件. 在stackoverflow上看到, ...

  3. eclipse开发cocos2dx 3.2环境搭建之中的一个： Android C\C++环境搭建（ndk r9d）

    这几天有时间,琢磨一下cocos2dx.cocos2d家族事实上挺庞大的.也有cocos2d-android这样的能够直接用Java语言来开发的,可是cocos2d-android资料相对少一些.并且 ...

  4. Setup Factory 读取安装包的配置文件

    result = INIFile.GetValue(SessionVar.Expand("%SourceFolder%\\set.ini"), "set", & ...

  5. Office Web App2013 在线查看PDF文件

    经常会有客户问,在SharePoint中,如何在浏览器中查看与编辑文档,通常给出的解决方案是集成Office Web App. 而在实际应用过程中,客户通常会要求实现PDF文件在线查看,对于PDF文件 ...

  6. myeclipse工程重名后怎么更改deploy location？

    http://zhidao.baidu.com/link?url=I9E16OYfxovPHqBrRWhYCI9TYNG_X-Whg_X7QrJiOBXBGEwi-6WYsC-Zi4Jcg9zd3ye ...

  7. BI开发之——Mdx基础语法(2)(转至指尖流淌)

    结合webcast中老师的讲解,现在把基础语法应用通过几个案例应用如下: 一.维度的概念 上图中一个维度(Dimension):Region 改为度下有四个级别(Levels):country.pro ...

  8. 日期-date.js

    Date.prototype.format = function(format) { var o = { "M+" : this.getMonth() + 1, // 月 &quo ...

  9. 009Maven_建立私服——报错问题

    前一篇文章的建立私服一直出问题,这里的问题是: jdk6.0只支持nuxus2.5及以下的版本,要支持nexus2.6以上,必须要jdk7.0以上.不然报错,把nexus-2.6.2war包放在Tom ...

  10. 【BZOJ】3172: [Tjoi2013]单词（后缀自动机）

    http://www.lydsy.com/JudgeOnline/problem.php?id=3172 随便搞个sam就行了.(其实一开始看到数据n<=200, 单词长度不超过1e6,然后感觉 ...