浅析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这些。