ES6 添加 'let' 属性而不是函数闭包来解决问题
首先,了解 ES6 的 let 关键字和 var 的区别。
let 和 var 的区别:
- var 没有块作用域,而 let 有块作用域。
- 在 JavaScript 中,只有一个函数有自己独立的作用域。
如果您在理解上有困难,这里有一个例子:
{var a=10}
控制台.log(a);
-
网页运行时,可以直接打印。
-
如果你用 let 替换 var。
{让 a=10}
控制台.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");//获取所有按钮的列表
for(var i=0;i
btn[i].onclick=function(){console.log(i+1);}
}
1、这样,无论我们点击哪个控制台,都只会打印最后一个数字5。
2.之前的1234已经被覆盖,点击那个按钮打印5。
3. 说明 for 的 { } 没有块级作用域。
以前的解决方案(函数闭包)
for(var i=0;i
(函数 a(i){
btn[i].onclick=function(){console.log(i+1);}
})(一世);
}
用一个立即函数将其包装起来,并传入 i 的值。 (不推荐)
当前的解决方案(ES6的let:var的升级版)
只需将 var 替换为 let:
对于(让我=0;我
btn[i].onclick=function(){console.log(i+1);}
}
直接、简单、方便地解决问题( 推荐的 )。
现在学习JavaScript的同学可以养成写let的习惯,这也是var的完美版本!
恭喜,您已阅读完本文。如果觉得文章写的好,请给我一个!
更多内容在 ** 纯英语.io** .注册我们的 ** 免费每周通讯** .跟着我们 ** 推特** , ** 领英** , ** YouTube** , 和 ** 不和谐** .对增长黑客感兴趣?查看 ** 电路** .
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明
本文链接:https://www.qanswer.top/38852/43072311
标签:闭包来,ES6,函数,作用域,let,var,log From: https://www.cnblogs.com/amboke/p/16722204.html