ES6新增属性let（var的升级版）代替函数闭包解决问题


<>了解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的完善版！！！！！

技术
下载桌面版
GitHub
Microsoft Store
SourceForge
Gitee
百度网盘（提取码：draw）
云服务器优惠
华为云优惠券
京东云优惠券
腾讯云优惠券
阿里云优惠券
Vultr优惠券
站点信息
问题反馈
邮箱：[email protected]
吐槽一下
QQ群：766591547
关注微信
©2020-2025 ioDraw All rights reserved, Privacy Policy