浅析var和let的区别：作用域和闭包

最新推荐文章于 2024-04-20 17:23:48 发布

终不似、少年游

最新推荐文章于 2024-04-20 17:23:48 发布

阅读量523

点赞数 1

分类专栏： web前端学习笔记文章标签： javascript es6

本文链接：https://blog.csdn.net/qq_45780380/article/details/114630346

版权

web前端学习笔记专栏收录该内容

61 篇文章 2 订阅

订阅专栏

浅析var和let的区别：作用域和闭包

假如我们要写几个按钮，给每个按钮加上点击事件，输出每个按钮的序号，我们可能会这么写。

<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</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的作用域是全局，所以i恒等于5。怎么解决这个问题呢？我们可以把var替换为let。

<script>
  var btns=document.getElementsByTagName("button");
  for(let i=0;i<btns.length;i++){

      btns[i].addEventListener("click",function (){
        console.log("第"+i+'个按钮被点击');
      })
    }


</script>

这样结果就可以了
在这里插入图片描述
最后再总结一下var和let的区别：

1. 作用域不一样，var是函数作用域，而let是块作用域，也就是说，在函数内声明了var，整个函数内都是有效的，比如说在for循环内定义了一个var变量，实际上其在for循环以外也是可以访问的，而let由于是块作用域，所以如果在块作用域内（比如说for循环内）定义的变量，在其外面是不可被访问的，所以let用在for
(let i; i < n; i++)是一种很推荐的写法

2. let不能在定义之前访问该变量，但是var是可以得。也就是说，let必须是先定义，再使用，而var先使用后声明也行，只不过直接使用但是没有却没有定义的时候，其值为undefined，这块要注意，这一块很容易出问题，这也是个人认为的let比var更好的地方，至于为啥会有这种区别呢，实际上var有一个变量提升的过程。也就是说，当这个函数的作用域被创建的时候，实际上var定义的变量都会被创建，并且如果此时没有初始化的话，则默认会初始化一个undefined。

3. let不能被重新定义，但是var是可以的。这个呢，我个人认为，从规范化的角度来说，是更推荐的，比如说，你在前面声明了一个变量，后来写代码，因为忘了之前的代码逻辑，又声明了一个同名的变量，如果这俩变量逻辑不一样，并且后面都要用的话，很容易出问题，且不容易维护。

总之呢，let从规范化的角度来说，要比var要进步了很大一步。所以一般情况下的话，推荐用let，const这些。

终不似、少年游

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浅析var和let的区别：作用域和闭包

浅析var和let的区别：作用域和闭包假如我们要写几个按钮，给每个按钮加上点击事件，输出每个按钮的序号，我们可能会这么写。<body><button>按钮1</button><button>按钮2</button><button>按钮3</button><button>按钮4</button><button>按钮5</button><script&gt
复制链接

扫一扫