zoukankan      html  css  js  c++  java
  • let/var之块级作用域

    一、ES5中的var

    <body>
    <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <script> var btns = document.getElementsByTagName('button') for(var i = 0;i < btns.length;i ++){ btns[i].addEventListener('click',function(){ console,log('第' + i + '个按钮被点击') }) }
    </script>

    </body>

    无论点击哪个按钮,都是第三个按钮被点击

    原因:var不存在块级作用域,比如for和if

    解决方法:设置闭包

    <body>
      <button>按钮1</button>
      <button>按钮2</button>
      <button>按钮3</button>
    <script>
        var btns = document.getElementsByTagName('button');
        for(var i = 0;i < btns.length;i ++){
          (function (i) {
            btns[i].addEventListener('click',function() {
              console. log('第' + i + '个按钮被点击');
            })
          })(i)
        }
    </script>
    </body>

    为什么可以解决:因为在JavaScript中函数有作用域

    二、ES6中的let

    <body>
      <button>按钮1</button>
      <button>按钮2</button>
      <button>按钮3</button>
    <script>
        const btns = document.getElementsByTagName('button');
        for(let i = 0;i < btns.length;i ++){
            btns[i].addEventListener('click',function() {
              console. log('第' + i + '个按钮被点击');
            })
        }
    </script>
    </body>

    执行结果正确

    ES6引入了let有了自己的作用域,如if、for

    不将var修改的原因:防止浏览器不兼容以及开发者不适应

     

  • 相关阅读:
    Mysql Group by week
    查询数据库占用磁盘大小
    菜根谭#117
    菜根谭#116
    保护眼睛颜色的RGB数值
    手动释放linux内存和缓存
    菜根谭#115
    菜根谭#114
    菜根谭#113
    spring mvc静态资源文件的引用
  • 原文地址:https://www.cnblogs.com/hw1988/p/13262893.html
Copyright © 2011-2022 走看看