javascript中let和var

最新推荐文章于 2024-05-21 19:09:41 发布

soputasmile11

最新推荐文章于 2024-05-21 19:09:41 发布

阅读量83

点赞数

分类专栏： javascript 文章标签： javascript html5 html

本文链接：https://blog.csdn.net/u014473112/article/details/120605193

版权

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1、区别

es5中的var是没有块级作用域的概念，只有函数作用域–只能通过function来区分作用域，es6中的let是有块级作用域的，直接通过花括号就可以区分作用域

2、例子和讲解

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<button >按钮1</button>
<button >按钮2</button>
<button >按钮3</button>
<script>
  let tags = document.getElementsByTagName("button")
  for(var i = 0; i<tags.length; i++){
      tags[i].addEventListener("click", function () {
        console.log(i);	
      })
  }
</script>
</body>
</html>

会发现点击【按钮1】时输出3，因为addEventListener是异步的，在我们点击按钮之前i就变成了3，我们改一下代码：

 let tags = document.getElementsByTagName("button")
  for(let i = 0; i<tags.length; i++){ //这里的var改为let
      tags[i].addEventListener("click", function () {
        console.log(i);	
      })
  }

这是时候我们点击每个按钮会依次输出0,1，2
为什么改为let就能正常输出了？这就是let的块级作用域起作用了，let认为花括号就是一个作用块，而var是es5中的语法，只认为function是一个作用域，不认识花括号。上面的代码我们也可以借助于匿名function实现同样的效果：

  for(var i = 0; i<tags.length; i++){
    (function (index) {
      tags[index].addEventListener("click", function () {
        console.log(index);
      })})(i)
  }

这时候我们点击按钮，也会预期输出0,1，2

3、总结

见1

另外一个额外补充：es6开发中，let，const，var三个标识符，优先使用const，然后再用let尽量不要使用var

soputasmile11

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript中let和var

1、区别es5中的var是没有块级作用域的，只能通过function来区分作用域，es6中的let是有块级作用域的，直接通过花括号就可以区分作用域2、例子和讲解<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><button >按钮1<
复制链接

扫一扫