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