我們從es5的變數提升開始說起， 由於變數提升的原因， 上述程式， 在第2行和第7行都能訪問到a的值， 只不過是undefined, 如果你不熟悉javascript這種變數的預解釋機制，可能會認為第2行和第7行會報錯， 只有flag為true的時候，變數a才聲明瞭, 其實javascript在詞法 ...
1 function show( flag ){ 2 console.log( a ); 3 if( flag ){ 4 var a = 'ghostwu'; 5 return a; 6 } else { 7 console.log( a ); 8 return null; 9 } 10 }
我們從es5的變數提升開始說起， 由於變數提升的原因， 上述程式， 在第2行和第7行都能訪問到a的值， 只不過是undefined, 如果你不熟悉javascript這種變數的預解釋機制，可能會認為第2行和第7行會報錯， 只有flag為true的時候，變數a才聲明瞭, 其實javascript在詞法解釋的時候，會把上述代碼解釋成下麵的樣子:
1 function show( flag ){ 2 var a; 3 console.log( a ); 4 if( flag ){ 5 a = 'ghostwu'; 6 return a; 7 } else { 8 console.log( a ); 9 return null; 10 } 11 }
這種機制，在項目中經常誤導程式員，哪怕是資深的前端程式員，不小心也容易入坑， 於是ES6引入了塊級作用域來強化對變數生命周期的控制.
什麼是塊級作用域?
1，函數內部
2，塊中( 通常指的是一對花括弧之間)
es6中使用新的關鍵詞 let 來定義變數， 為塊級作用域，上例，如果改成let聲明
1 function show( flag ){ 2 console.log( a ); 3 if( flag ){ 4 let a = 'ghostwu'; 5 return a; 6 }else { 7 console.log( a ); 8 return nul; 9 } 10 }
由於let是塊級作用域，不會像var一樣 產生變數提升， 所以，第2行和第7行 這個時候報錯（ a is not defined ）
只有在flag為true的情況，a會被定義， 而且訪問範圍在第3行和第6行的大括弧之間， 超出這個範圍，就訪問不到a, 這就是塊級作用域
let都有哪些特性呢？
在同一個作用域下，let不能重覆定義兩個同名的標識符
在不同的作用域下，可以使用同名的標識符
1 var a = 'ghostwu'; 2 let a = 'ghostwu2';
1 let a = 'ghostwu'; 2 let a = 'ghostwu2';
以上兩種方式，都會報重定義錯誤(Identifier 'a' has already been declared)
1 let a = 10; 2 if( a ){ 3 let a = 100; 4 console.log( a ); //100 5 } 6 console.log( a ); //10
以上這種方式，不會報錯，因為是兩個不同的作用域
let的經典應用
在4個按鈕中，獲取當前被點擊按鈕的索引
1 <script> 2 window.onload = function(){ 3 var aInput = document.querySelectorAll("input"); 4 for( var i = 0; i < aInput.length; i++ ){ 5 aInput[i].onclick = function(){ 6 alert( i ); 7 } 8 } 9 } 10 </script> 11 12 <input type="button" value="按鈕1"> 13 <input type="button" value="按鈕2"> 14 <input type="button" value="按鈕3"> 15 <input type="button" value="按鈕4">
如果，我們用上面的方法做， 每個按鈕點擊之後 i 都是4, 因為4個按鈕綁定完事件之後，i的值就變成了4, 下次點擊按鈕的時候，所有的都是4, 因為 i = 4 是共用的
通常，我們會在每個按鈕上，加一個自定義索引 綁定 對應的 i 值，再藉助this關鍵字，就可以如願以償，如下:
1 window.onload = function(){ 2 var aInput = document.querySelectorAll("input"); 3 for( var i = 0; i < aInput.length; i++ ){ 4 aInput[i].index = i; 5 aInput[i].onclick = function(){ 6 alert(this.index); 7 } 8 } 9 }
還有另一種方法，就是借用立即表達式+閉包的形式, 如下:
1 window.onload = function(){ 2 var aInput = document.querySelectorAll("input"); 3 for( var i = 0; i < aInput.length; i++ ){ 4 aInput[i].onclick = (function( j ){ 5 return function(){ 6 alert( j ); 7 } 8 })( i ); 9 } 10 }
而採用let關鍵字， 利用塊級作用域的特性，就可以輕鬆達到目的
1 window.onload = function(){ 2 var aInput = document.querySelectorAll("input"); 3 for( let i = 0; i < aInput.length; i++ ){ 4 aInput[i].onclick = function(){ 5 alert( i ); 6 }; 7 } 8 }
var在全局作用域下，會把屬性綁定到window上，從而可能產生覆蓋屬性的隱患，而let關鍵字只是會遮蔽它，並不會覆蓋window上的同名屬性
1 var a = 10; 2 console.log( a ); //10 3 console.log( window.a ); //10 4 console.log( 'a' in window ); //true 5 6 let user = 'ghostwu'; 7 console.log( user ); //ghostwu 8 console.log( window.user ); //undefined 9 console.log( 'b' in window ); //false 10 11 12 /* 13 var RegExp = 'ghostwu'; 14 console.log( RegExp ); //ghostwu 15 console.log( window.RegExp ); //ghostwu 16 console.log( 'RegExp' in window ); //true 17 */ 18 19 let RegExp = 'ghostwu'; 20 console.log( RegExp ); //ghostwu 21 console.log( window.RegExp ); //function RegExp() { [native code] } 22 console.log( 'RegExp' in window ); //true
const關鍵字是用來定義常量的，它有如下特性:
.塊級作用域
.聲明的時候，必須賦予初始值
.不能被重新賦值
.如果值是一個對象， 那麼對象裡面的屬性是允許被修改的
.不能跟其他標識符重名
1 const user = 'ghostwu'; 2 console.log( user ); 3 user = 'zhangsan'; //報錯, 不能重新賦值
1 const user; //報錯，定義的時候 沒有給初始值
1 const user = { 2 name : 'ghostwu' 3 }; 4 console.log( user.name ); //ghostwu 5 user.name = 'zhangsan'; //對象的屬性允許被修改 6 console.log( user.name ); //zhangsan
1 const user = { 2 name : 'ghostwu' 3 }; 4 user = { //報錯，不能重新給user賦值 5 name : 'zhangsan' 6 } 7 console.log( user.name ); //報錯
1 var a = 10; 2 const a = 10; // 報錯，重定義錯誤
1 let a = 10; 2 const a = 10; //報錯，重定義錯誤
1 if ( true ) { 2 const a = 10; 3 console.log( a ); //10 4 } 5 console.log( a ); //報錯:a is not defined
