前言：
目录：
简介:
// 引入browser.js文件，要我觉得babel==browser.js <script src="browser.js" charset="utf-8"></script> <script type="text/bable"> //代码 </script>
历史版本
ES6变量var与let、const对比：
var与let、const示例：
<script type="text/javascript"> var a = 1; var a = 10; alert(a) </script>
<body>
<script>
window.onload = function(){
var abtn = document.getElementsByTagName("input");
for (var a = 0; a < abtn.length; a++) {
console.log(a)
abtn[a].onclick=function(){
console.log(a)
alert(a);
}
}
};
</script>
<input type="button" value="1" />
<input type="button" value="2" />
<input type="button" value="3" />
</body>
闭包原因是赋值给 onclick 的是闭包，哇，你要问我闭包是个啥？哈，个人建议补一下JS知识，这里附上闭包链接，自己要好好理解哟，闭包也是重要的JS知识掌握点。 然后继续说，这三个闭包在循环中被创建，但他们共享了同一个词法作用域，在这个作用域中存在一个变量a。这是因为变量a使用var进行声明，所以具有函数作用域。当onclick的回调执行时，a的值被决定。由于循环在事件触发之前早已执行完毕,如图打印的0，1，2，变量对象a（被三个闭包所共享）已经指向了abtn的最后一项。所以都是3。 以前怎么解决？用闭包把他包裹起来就是，或者用函数工厂这样就OK了，然后你就会神奇的发现最开始a也打印的0，1，2，但是按钮正常了，原因就是，所有的回调不再共享同一个环境， 闭包为每一个回调创建一个新的词法环境。在这些环境中，a 就不再恒定都为3了。 for (var a = 0; a < abtn.length; a++) {
(function(a){
console.log(a);
abtn[a].onclick=function(){
alert(a);
}
})(a) // 马上把当前循环项的a与事件回调相关联起来
}
<script>
window.onload = function(){
var abtn = document.getElementsByTagName("input");
for (let a = 0; a < abtn.length; a++) {
abtn[a].onclick=function(){
alert(a);
}
}
};
</script>到这里，变量完事儿~ |
|
|
