在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. 转：Linux下which、whereis、locate、find 命令的区别

    我们经常在linux要查找某个文件,但不知道放在哪里了,可以使用下面的一些命令来搜索.这些是从网上找到的资料,因为有时很长时间不会用到,当要用的时候经常弄混了,所以放到这里方便使用. which    ...

  2. 转：解决centos netstat和ps感染木马

    解决方法:a.去除恶意文件的执行权限chmod 000 /tmp/gates.lod   /tmp/moni.lod    service sendmail stopchkconfig --level ...

  3. CSS 框架之 Bootstrap 的下载和安装

    BootStrap 简介: Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 响应式设计:Bootst ...

  4. Cocos2d-x 3.1.1 学习日志7--7分钟让你了解cocos2d-x3.1.1 Sprite精灵类

    精灵(Sprite)是游戏里面的角色,比方敌人.游戏里面运动的物体等等,所以精灵是游戏里面一个很常见的概念.差点儿无处不在. 在Cocos2D-x里面精灵是用Sprite类来进行表示的,它能够用一张图 ...

  5. 回文树(回文自动机) - URAL 1960 Palindromes and Super Abilities

     Palindromes and Super Abilities Problem's Link: http://acm.timus.ru/problem.aspx?space=1&num=19 ...

  6. MyBatis的优缺点

    优点: 1.简单易学 mybatis本身就很小且简单.没有任何第三方依赖,最简单安装只要两个jar文件+配置几个sql映射文件易于学习,易于使用,通过文档和源代码,可以比较完全的掌握它的设计思路和实现 ...

  7. INSERT INTO 语句用于向表格中插入新的行。

    语法 INSERT INTO 表名称 VALUES (值1, 值2,....) 我们也可以指定所要插入数据的列: INSERT INTO table_name (列1, 列2,...) VALUES ...

  8. Collection接口都是通过Iterator()（即迭代器）来对Set和List遍历

    以下介绍接口: List接口:(介绍其下的两个实现类:ArrayList和LinkedList) ArrayList和数组非常类似,其底层①也用数组组织数据,ArrayList是动态可变数组. ① 底 ...

  9. LoadRunner检查点实战之运行查看器

    一.为什么要使用检查点 为什么要使用检查点,那就要说明一下LR如何判断脚本是否执行成功.LR判断脚本是否执行成功是根据服务器返回的状态来确定的,如果服务器返回的HTTP状态为 200 OK ,那么Vu ...

  10. Gradle详解+Groovy

    http://blog.csdn.net/u014761700/article/details/51867939