用 let: 代替var
特点:
1. 防止声明提前
2. 不允许重复声明同名变量
3. 添加块级作用域:
什么是块级作用域: 一个{}程序结构内，也是一个作用域。
比如: for while do...while if...else if...else
只要用let声明的变量，仅在当前块内有效
4. 和for一起使用，可形成闭包!
原理: (function(i){...})(i)
例1：
1 var t=0; 2 function conn(){ 3 t+=3; console.log("建立连接耗时：3s"); 4 } 5 function query(){ 6 t+=8; console.log("查询数据耗时：8s"); 7 var err=true; 8 (function(){ 9 var t=new Date(); 10 console.log("出错啦,at:"+t.toLocaleString()); 11 })(); 12 } 13 conn(); 14 query() 15 console.log("共耗时："+t+"s");
等价于：
1 var t=0; 2 function conn(){ 3 t+=3; console.log("建立连接耗时：3s"); 4 } 5 function query(){ 6 t+=8; console.log("查询数据耗时：8s"); 7 var err=true; 8 if(err){ 9 let t=new Date(); //var替换let 10 console.log("出错啦,at:"+t.toLocaleString()); 11 } 12 } 13 conn(); 14 query() 15 console.log("共耗时："+t+"s");
例2：
1 <BODY> 2 <button>点我!</button> 3 <button>点我!</button> 4 <button>点我!</button> 5 <script> 6 var btns=document.getElementsByTagName("button"); 7 for(var i=0;i<btns.length;i++){ 8 (function(i){ 9 btns[i].onclick=function(){ 10 alert("我是第"+i+"个"); 11 } 12 })(i); 13 </script> 14 </BODY>
等价于：
1 <BODY> 2 <button>点我!</button> 3 <button>点我!</button> 4 <button>点我!</button> 5 <script> 6 var btns=document.getElementsByTagName("button"); 7 for(let i=0;i<btns.length;i++){ //var换成let 8 btns[i].onclick=function(){ 9 alert("我是第"+i+"个"); 10 } 11 } 12 </script> 13 </BODY>
例3：
var a = 1;
var b = 2;
if (a === 1) {
var a = 11; // the scope is global
let b = 22; // the scope is inside the if-block
console.log(a); // 11
console.log(b); // 22
}
console.log(a); // 11
console.log(b); // 2