Vue学习——Js中var和let的作用域

因为在es5中var是没有块级作用域的，所以我们通常要借助于function的作用域来弥补这一缺陷。而es6中的let解决了es5中var没有块级作用域的缺陷，它相当于是一个完美的var。

举例说明没有块级作用域和有块级作用域的区别：

Var(没有块级作用域)
在body中设置4个button按钮

<button>button1</button>
<button>button2</button>
<button>button3</button>
<button>button4</button>

js中的代码

const btnarr = document.getElementsByTagName('button');
for(var i = 0;i < btnarr.length ;i++){
    btnarr[i].addEventListener('click',function(){	// 给每个button动态添加事件
        console.log('第' + i + '个按钮被点击')
    })
}

我们依次点击每个button按钮，设想的运行结果是这样的：

然而实际的运行结果却是这样的：

这是因为var = i是没有块级作用域的，for中每个{}中的代码都是使用的同一个i(相当于静态变量)，所以i是取的最后一次的赋值，即4
图解：

使用let可以完美的解决var没有块级作用域的缺陷：

const btnarr = document.getElementsByTagName('button');
for(let i = 0;i < btnarr.length ;i++){
    btnarr[i].addEventListener('click',function(){
        console.log('第' + i + '个按钮被点击')
    })
}

依次点击每个button按钮后的运行结果：

这是因为let有自己的块级作用域，此时for中每个{}中的代码使用的都是自己独立的i，不会影响其它作用域中的i。
图解：

所以说，我们在开发中尽量使用let来声明变量，毕竟let的出现是弥补var的没有块级作用域的缺陷的。

喜欢的朋友可以点赞加收藏哦，谢谢。