譯者按: 使用let的確會比var安全很多。
原文: Why You Shouldn’t Use ‘var’ Anymore
譯者: Fundebug
為了保證可讀性，本文采用意譯而非直譯。
我已經使用ES2015(ES6)的語法編寫JavaScript程序很久了，並且喜歡上它提供的新特性帶來的優雅和簡潔。我最習慣的就是不再使用var,而是let/const。我想當然的以為let僅僅是var的替代者，而事實上let還為我們提供了更加精細的作用域。
我大多數時候使用的變量都是用const來聲明，因為如果嘗試對使用const聲明的變量進行修改，將會報錯。這可以避免不小心將一個不該修改的常量值修改。但是，我們還是需要可以聲明可以被修改的變量，比如在循環里面的計數器，我們需要不斷地對改變了加1。可是為什么我們使用let而不是var呢？
最簡單的答案就是let提供塊作用域(block-scoping)，這會比var提供的以函數為作用域有更加精細化的控制。為了便於理解，我來用一個經典的前端工程師面試的問題來描述兩者的區別。
問題: 在下面的例子中，請說出控制台的打印結果。
|
var callbacks = [];
(
function() {
for (var i = 0; i < 5; i++) {
callbacks.push(
function() { return i; } );
}
})();
console.log(callbacks.map( function(cb) { return cb(); } ));
|
我們將for循環執行五次，每次將一個函數push到callbacks數組中。最后callbacks數組里面的每一個函數的執行結果打印出來。
一個新手工程師經過深思熟慮可能會回答[0, 1 , 2, 3, 4], 然而卻掉入了JavaScript的”hoisting陷阱”。
只有當你理解了hoisting， 才能給出正確的答案[5, 5, 5, 5, 5]。
|
var callbacks = [];
(
function() {
var i;
for (i = 0; i < 5; i++) {
callbacks.push(
function() { return i; } );
}
})();
console.log(callbacks.map( function(cb) { return cb(); } ));
|
注意上面的代碼，JavaScript將變量提升到函數定義的頂部，經過整個for循環，callbacks里面存儲的5個函數指向的同一個變量i的值已經是5。所以最終打印出來的值都為5。
在以前要通過各種奇淫技巧來解決這個問題，並成功返回[0, 1, 2, 3, 4], 現在我們有了let，就可以很簡單解決問題：
|
var callbacks = [];
(
function() {
for (let i = 0; i < 5; i++) {
callbacks.push(
function() { return i; } );
}
})();
console.log(callbacks.map( function(cb) { return cb(); } ));
|
因為let擁有塊作用域，所以使用let聲明的變量i不會被提升到函數頂部，i的作用域在for循環， 就會每次循環有獨立的值。
那我們是不是應該不要使用var了呢？如果你想要一個變量擁有函數作用域，var還是很有用的。
讀者提到的兩個問題：
-
const聲明的變量不是完全不可更改。比如：const myNotQuiteImmutableObject = {thisCanBeChanged: "not immutable"};myNotQuiteImmutableObject.thisCanBeChanged = "see I changed it.";但是，使用
const聲明可以阻止一些基本的更改，比如：const immutableString = "you can't change me";immutableString = "D'OH!"; // error如果你想要完全的不可更改，可以使用Facebook提供的Immutable庫。
-
老版本的瀏覽器不支持
let。不僅如此，而且有些最新的瀏覽器也還沒有支持let。我們可以使用Babel來避免這個問題，Babel允許你使用所有最新的JavaScript功能，然后將其翻譯到甚至IE8都能支持的代碼。
關於Fundebug
Fundebug專注於JavaScript、微信小程序、微信小游戲、支付寶小程序、React Native、Node.js和Java實時BUG監控。 自從2016年雙十一正式上線，Fundebug累計處理了7億+錯誤事件，得到了Google、360、金山軟件、百姓網等眾多知名用戶的認可。歡迎免費試用！
版權聲明: 轉載時請注明作者Fundebug以及本文地址： https://blog.fundebug.com/2017/05/04/why-you-should-not-use-var/