ES6之"let"能替代"var"嗎?

譯者按: 使用let的確會比var安全不少。

<!-- more -->

原文: 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的JavaScript技術交流羣: 622902485。

版權聲明:

轉載時請註明做者Fundebug以及本文地址：

https://blog.fundebug.com/2017/05/04/why-you-should-not-use-var/