es6 作用域问题

最新推荐文章于 2022-08-17 20:09:15 发布

无味无感

最新推荐文章于 2022-08-17 20:09:15 发布

阅读量121

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_41863998/article/details/118462328

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在es5之前、es5和es6中作用域问题

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>

<script>
  <!--1.var申明变量是作用域:变量作用域在什么范围都是可以使用的-->
  // {
  //   var name='张三'
  //   console.log(name)
  // }
  // console.log(name)

  <!--2.在if判断里面申明var变量也是没有作用域的-->
  // var func;
  // if(true){
  //   var name='张三'
  //   func=function () {
  //     console.log(name)
  //   }
  // }
  <!--2.1在判断外面也能访问申明的变量-->
  // console.log(name);
  <!--2.2在判断外面也能修改变量的值；這里描述一个场景：本来张三是要当一个显示值传替的，但是不知道谁手动改了变量后，值变成了李四；照成显示的值错误-->
  // name='李四'
  // func()

  <!--3.在for判断里面申明var变量也是没有作用域的;场景：循环给五个按钮绑定点击事件后，点击第一个还是其它的按钮都输出第五个按钮被点击了-->
  // var btn=document.getElementsByTagName('button')
  // for(var i=0;i<btn.length;i++){
  //   btn[i].addEventListener('click',function () {
  //     console.log('第'+ i+'按钮被点击了');
  //   })
  // }
  <!--3.1解决var在for循环没有作用域的问题，需要用到es5的闭包或者函数的作用域;这相当于创建了五个函数，函数是有作用域的；为什么会有作用域這是因为javascrip会给穿个来的变量重新在函数里面第一个变量，循环变量i变了对了函数里面的i没有任何影响-->
  // var btn=document.getElementsByTagName('button')
  // for(var i=0;i<btn.length;i++){
  //   (function(i){
  //     btn[i].addEventListener('click',function () {
  //       console.log('第'+ i+'按钮被点击了');
  //     })
  //   })(i)
  // }
  <!--3.在es5语法之前if和for是没有块级作用域的概念的，在很多时候都与借助funciton来解决应用块外面变量的问题；自从es6语法加入了let后，用let在if、for定义的变量就有作用域的概念了-->
  const btn=document.getElementsByTagName('button')
  for(let i=0;i<btn.length;i++){
    btn[i].addEventListener('click',function () {
      console.log('第'+ i+'按钮被点击了');
    })
  }

</script>
</body>
</html>