ES5和ES6中涉及var let的块级作用域

最新推荐文章于 2022-05-07 21:29:42 发布

小力与大力

最新推荐文章于 2022-05-07 21:29:42 发布

阅读量341

点赞数

文章标签： es6 javascript

本文链接：https://blog.csdn.net/weixin_44455926/article/details/104451782

版权

块级作用域

补充ES5和ES6的知识

ES5之前在if和for中没有块级作用域的概念，所以在很多时候，我们都必须使用到function的作用域来解决应用外变量的问题-------使用闭包！！
ES6中加入了let，let他是有if 和for的块级作用域

补充块级作用域的知识

JS中作用域有：全局作用域、函数作用域。没有块作用域的概念。ECMAScript 6(简称ES6)中新增了块级作用域，使用let声明的变量只能在块级作用域里访问，有“暂时性死区”的特性（也就是说声明前不可用）。
块作用域由 { } 包括，if语句和for语句里面的{ }也属于块作用域。

引用ES5中var没有块级作用域引起的问题：for-----未使用闭包

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>块级作用域</title>
</head>
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
</body>
<script type="text/javascript">
  var  btns = document.getElementsByTagName('button');
  for (var i=0;i<btns.length;i++){
    btns[i].addEventListener('click',function () {
      console.log('第'+i+'个按钮被点击');
    })
  }
</script>
</html>

在这里插入图片描述
无论点击哪一个按钮都无法实现对某个按钮的监听的打印，这是因为在var中，没有块级作用域，在进行i++过程中，被替代

引用ES5中var没有块级作用域引起的问题：for-----使用使用闭包

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>块级作用域</title>
</head>
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
</body>
<script type="text/javascript">
  var  btns = document.getElementsByTagName('button');
  for (var i=0;i<btns.length;i++){
    (function(num){btns[i].addEventListener('click',function () {
      console.log('第'+num+'个按钮被点击');
    })
    })(i)
  }
</script>
</html>

在这里插入图片描述 在ES5中通过var实现了对按钮的监听—闭包存在的完美性

ES6中使用let无需闭包，因为本身自带块级作用域

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>块级作用域</title>
</head>
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
</body>
<script type="text/javascript">
  const  btns = document.getElementsByTagName('button');
  for (let i=0;i<btns.length;i++){
    {btns[i].addEventListener('click',function () {
      console.log('第'+i+'个按钮被点击');
    })
    }
  }
</script>
</html>

在这里插入图片描述 ES6完美吧！！！真的很棒，但是这只是冰山一角！！冰山一角

小力与大力

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES5和ES6中涉及var let的块级作用域

块级作用域补充ES5和ES6的知识ES5之前在if和for中没有块级作用域的概念，所以在很多时候，我们都必须使用到function的作用域来解决应用外变量的问题-------使用闭包！！ES6中加入了let，let他是有if 和for的块级作用域补充块级作用域的知识JS中作用域有：全局作用域、函数作用域。没有块作用域的概念。ECMAScript 6(简称ES6)中新增了块级作...
复制链接

扫一扫