了解ES6的let属性与var的区别
let的介绍与var的区别
1.var没有块级作用域,而let有块级作用域
2.在js中只有function才有自己独立的作用域
如果没看懂:
举个例子:
{
var a=10}
console.log(a);
1.在网页运行的时候a是可以直接打印的
2.如果将var换成let时
{
let a=10}
console.log(a);
1.控制台显示a未定义。
2.这说明let有自己独立的作用域。
3.既然有独立的作用域,那么let就能替代函数解决函数闭包问题。
举个例子:
我们用for循环为5个按钮绑定监听事件点击每个按钮打印对应的数字。
<body>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
</body>
<script>
var btn=document.getElementsByTagName("button");//获取所有button的一个列表
for(var i=0;i<btn.length;i++){
btn[i].onclick=function(){
console.log(i+1);}
}
1.这样写的话我们不管点击哪一个控制台只会打印最后一个数字5,
2.前面的1234都被覆盖掉了,点那个按钮都打印5
3.说明for的{ }是没有块级作用域的
以前的解决方式(函数闭包)
for(var i=0;i<btn.length;i++){
(function a(i){
btn[i].onclick=function(){
console.log(i+1);}
})(i);
}
**
用一个立即执行函数给它闭包起来,然后将i的值传进去。(不建议)
现在的解决方式(ES6的let:var的升级版)
直接将var 换成let
for(let i=0;i<btn.length;i++){
btn[i].onclick=function(){
console.log(i+1);}
}
直接解决问题,简单方便 (推荐!!!)
现在学习js的同学,可以养成写let的相关,它也是var的完善版!!!!!