let與塊級作用域 在代碼中,使用var申明的變數在代碼塊外面能被識別,但是let命令卻不能被識別,這樣就實現了js的塊級作用域,我們在使用條件語句 迴圈語句等就會不擔心變數污染的問題了,以下是兩種寫法等對比: es6: es5: 在{}用let聲明的變數只有在{}內是有效的 let不會有變數提升 ...
let與塊級作用域
{
var foo='foo'; let bar='bar'; } console.log(foo,'var'); //foo var
console.log(bar ,'bar');//Uncaught ReferenceError: bar is not defined
在代碼中,使用var申明的變數在代碼塊外面能被識別,但是let命令卻不能被識別,這樣就實現了js的塊級作用域,我們在使用條件語句 迴圈語句等就會不擔心變數污染的問題了,以下是兩種寫法等對比:
es6:
for (let i = 0; i < a.length; i++) { let x = a[i] … } for (let i = 0; i < b.length; i++) { let y = b[i] … } let callbacks = [] for (let i = 0; i <= 2; i++) { callbacks[i] = function () { return i * 2 } } callbacks[0]() === 0 callbacks[1]() === 2 callbacks[2]() === 4
es5:
var i, x, y; for (i = 0; i < a.length; i++) { x = a[i]; … } for (i = 0; i < b.length; i++) { y = b[i]; … } var callbacks = []; for (var i = 0; i <= 2; i++) { (function (i) { callbacks[i] = function() { return i * 2; }; })(i); } callbacks[0]() === 0; callbacks[1]() === 2; callbacks[2]() === 4;
在{}用let聲明的變數只有在{}內是有效的
let不會有變數提升
熟悉js開發的都知道函數有兩種聲明方式
a(); // 'a' b(); // 報錯不是一個函數 其實是undefined
function a(){ console.log('a'); } var b=function(){ console.log('b'); }
這兩種方式js解析順序是不一樣的, 首先函數a會被js載入然後執行 var b ;至於b是什麼數據會等第二批執行,也就是正常按照從上到下執行代碼,在執行b()的時候還是未初始化的狀態但是並沒有報錯因為var已經被優先執行了 這種就是變數提升,此時我們修改下代碼
a(); // 'a' b(); // b is not defined function a(){ console.log('a'); } let b=function(){ console.log('b'); }
雖然仍是報錯但是明顯提示不存在b變數了,所以使用了let之後就不會優先執行了也會回歸“第二批”執行的隊伍中,function a(){} 依然是“第一批”優先執行的代碼。
變數綁定和不可重新定義
js是存在作用域鏈的,在特定作用域下只能獲取同級或者高層級的變數;但是let存在變數綁定行為,不遵循作用域鏈;
let a=1; (function (){ a=2; //a is not defined let a; console.log(a); }()); let a=1; (function (){ a=2; console.log(a); //2 }());
我們可以這樣理解,在當前執行的作用域內如果沒有對變數定義 則會從高層級級獲取,如果已經存在則封閉當前作用域不再考慮高層級是否聲明瞭該變數;
在相同作用域內,let是不能重覆聲明同一個變數的;但是var則不在乎聲明多少次,永遠都是後者替換前者;
var foo=123; var foo=456; console.log(foo); //456 let bar=123; let bar=456; //Identifier 'bar' has already been declared console.log(bar);
有了塊級作用域我們再也不用寫匿名函數來進行作用域封閉了,以前你可能是這樣寫:
(function () { var foo = function () { return 1; } foo() === 1; (function () { var foo = function () { return 2; } foo() === 2; })(); foo() === 1; })();
但是現在不用這樣麻煩了,你完全可以這樣寫:
{ function foo () { return 1 } foo() === 1 { function foo () { return 2 } foo() === 2 } foo() === 1 }
參考了了阮一峰的介紹 做了一些簡化和自己的例子 歡迎補充~