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/