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修改的原因:防止浏览器不兼容以及开发者不适应

     

  • 相关阅读:
    手机品牌大集合
    什么是全角和半角?
    String,StringBuffer,StringBuild的区别
    什么是法人?法定代表人?法人代表?法定代表?
    如何得到table里面的ID
    Jquery代码编写工具Komodo
    jquery 验证email
    jQuery使用手册 (转)
    centos iptables 防火墙 命令
    php webservice实例(转载)
  • 原文地址:https://www.cnblogs.com/hw1988/p/13262893.html
Copyright © 2011-2022 走看看