var let const 区别
// var let const 区别 // ES5 只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景,
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>var</title> <script> window.onload = function(){ var aLi = document.getElementsByTagName('li'); for (var i=0;i<aLi.length;i++){ /*将var改为let*/ aLi[i].onclick = function(){ alert(i); /*单击任何标签都输出4*/ } } } </script> </head> <body> <ul> <li>0</li> <li>1</li> <li>2</li> <li>3</li> </ul> </body> </html>
// 在ES6之前,大部分人会选择使用闭包来解决这个问题,今天我们使用ES6提供的let来解决这个问题。
// 1.0 var声明的变量会挂在window上,而let和const不会 var a=100 console.log(a,window.a) //100 100 let b=100 console.log(b,window.b) // 100 undefined const c = 1; console.log(c,window.c); // 1 undefined // 2.0 var声明的变量存在变量提示,let和const不存在变量提示 console.log(d); // undefined (d已声明还没赋值,默认得到undefined值) var d = 100; console.log(e); // 报错:Uncaught ReferenceError: Cannot access 'e' before initialization let e = 10; console.log(f); // 报错:Uncaught ReferenceError: Cannot access 'e' before initialization const f = 10; // 3.0 let和const声明形成块级作用域 if(true){ var g=100; let h=10; const i=10; } console.log(g) //100 console.log(h) //Uncaught ReferenceError: h is not defined console.log(i) //Uncaught ReferenceError: i is not defined //4.0 同一作用域下let和const不能声明同名变量,而var可以 var a1 = 100; console.log(a); // 100 var a2 = 10; console.log(a); // 10 let a3 = 100; let a3 = 10; // 5.0 暂存死区 var a4=100; if(1){ //在当前块作用域中存在a使用let/const声明的情况下,给a赋值10时,只会在当前作用域找变量a, // 而这时,还未到声明时候,所以控制台Error:a is not defined a4=10; let a4=1; } // 6.0const // 1、一旦声明必须赋值, // 2、声明后不能再修改 // 3、如果声明的是复合类型数据,可以修改其属性 const a5 = 100; const list = []; list[0] = 10; console.log(list); // [10] const obj = {a:100}; obj.name = 'apple'; obj.a = 10000; console.log(obj); // {a:10000,name:'apple'}