ECMAScript 6多了let
關鍵字,和var
一樣用來宣告變數,差別在於作用域(scope)的範圍。
let
變數的作用域為block;var
變數的作用域為function。
見下面範例,可以看到let
和var
行為上的差異。
在 if
區塊中變數var_a
和一開始宣告的var_a
是指向同個位置,if
區塊中的var_a
並沒有因為位在if
區塊中而獨立於區塊外的var_a
。
而let_b
變數就不同了,區塊內的let_b
和一開始宣告的let_b
是獨立的兩個變數,一旦if
區塊結束後,區塊中的let_b
就會消滅。
至於在function中的var_a
和function外的var_a
就是不同的變數了,function中的var_a
僅作用在function區塊中而已,而function中的let_b
就和在if
區塊中的行為一樣,是個獨立於區塊外的變數。
var var_a = 1;
let let_b = 50;
if(var_a < let_b){
console.log("var_a:" + var_a); // var_a:1
// console.log("let_b:" + let_b); // let_b is not defined
var var_a = 2;
let let_b = 60;
console.log("var_a:" + var_a); // var_a:2
console.log("let_b:" + let_b); // let_b:60
}
console.log("var_a:" + var_a); // var_a:2
console.log("let_b:" + let_b); // let_b:50
test();
function test(){
console.log("var_a:" + var_a); // var_a:undefined
// console.log("let_b:" + let_b); // let_b is not defined
var var_a = 3;
let let_b = 70;
console.log("var_a:" + var_a); // var_a:3
console.log("let_b:" + let_b); // var_a:70
}
console.log("var_a:" + var_a); // var_a:2
console.log("let_b:" + let_b); // let_b:50
可以注意到範例中,if
或function區塊內一開始印出console.log(let_b)
都被我特別註解起來,這是let
和var
的另一個差異。let
變數在宣告之前不可被存取,否則會出現錯誤,又稱為Temporal Dead Zone(TDZ),而var
變數不會出現錯誤,只是會印出"undefined"。
不過若區塊中沒有宣告同樣名稱的let
變數,則會存取外部的變數,例如
var var_a = 1;
let let_b = 50;
if(var_a < let_b){
console.log("var_a:" + var_a); // var_a:1
console.log("let_b:" + let_b); // let_b:50
}
console.log("let_b:" + let_b); // let_b:50
此外宣告為全域變數的let
和var
變數的差別在於,全域的var
變數會被加入全域的Window物件中,而let
變數不會,例如
var var_a = 1;
let let_b = 50;
console.log(window.var_a); // 1
console.log(window.let_b); // undefined
而在同一block中的var
變數可以重複宣告,但let
變數不行重複宣告。
var var_a = 1;
let let_b = 50;
var var_a = 2;
let let_b = 60; // Uncaught SyntaxError: Identifier 'let_b' has already been declared
參考
沒有留言:
張貼留言