在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. HDU 2110 Crisis of HDU

    Crisis of HDU Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) To ...

  2. gdb 初步学习记录

    客户有一段代码,一个死循环, 里面就一个 times(NULL) 函数,以及一个usleep, 运行了10分钟左右就会出现段错误. 现在用 gdb 调试看一下是哪一步出现了问题. 在Linux 虚拟机 ...

  3. HTML5 + AJAX ( jQuery版本 ) 文件上传带进度条

    页面技术:HTML5 + AJAX ( jQuery) 后台技术:Servlet 3.0 服务器:Tomcat 7.0 jQuery版本:1.9.1 Servlet 3.0 代码 package or ...

  4. 框架Iframe的退出，IE 火狐都没问题 到360就不跳转页面 刷新一遍才跳转到登录页

    遇到这种情况 ,郁闷死了,来回折腾好几种跳转方法,最后有一个灵感,当我点击退出按钮的时候,我是用jquery $("#ID").click(function(){}) 这种方法异步 ...

  5. 微信小程序 - WapRequest.js

    文件位于 utils/WapRequest.js 封装了所有接口请求和wap站点的controller请求,代码示例 /** * 选择 洲 国家 * 无参数 */ WapRequest.prototy ...

  6. 9款很酷炫jQuery/HTML5特效应用 有源码哦~

            目前最流行的网页特效应用当属jQuery和HTML5的特效应用了,它们可以帮你快速实现网页中的各种特效设计.本文就为了收集了9款非常酷炫的jQuery/HTML5特效应用,可以很方便的 ...

  7. 判断gridView是否有数据

    我这里的gridView是采用空模板数据来显示的 当gridView的数据源为空的时候它们就会显示标题 有数据的显示它们就会显示下面的这种 你仔细观察会发现,当有数据的时候空标题的table没有了,解 ...

  8. svn & git 问题汇总

    svn: warning: W150002: '/Users/piercalex/svn/azzz/1' is already under version control svn: E200009: ...

  9. 正向工程、逆向工程与MDA

    正向工程.逆向工程与MDA 正向工程:从UML图形生成代码: 逆向工程:从代码和成UML图形: //不要依赖于正向或逆向工程,仅是一种辅助手段.画图的目的不是为了生成代码:而写代码的目的也不是为了生成 ...

  10. QWidget切换

    QWidget切换,参考类:QstackedLayout,QStackedWidget,QTabWidget 一.Tab出现的位置 tabWidget.setTabPosition(QTabWidge ...