let和const学习笔记

var存在的问题

问题1：JS没有块级作用域

请看这样一条规则：在JS函数中的var声明，其作用域是函数体的全部。
乍一听没什么问题，但是如果碰到以下两种情况就不会得到令人满意的结果。

其一，在代码块内声明的变量，其作用域是整个函数作用域而不是块级作用域。
假如你现在的代码使用了一个变量 t：

function runTowerExperiment(tower, startTime) {
    var t = startTime;
    tower.on("tick", function() {
        console.log(t); // startTime
    });
    // ...更多代码...
}

到目前为止，一切都很顺利。现在你想添加测量保龄球速度的功能，所以你在回调函数内部添加了一个简单的 if 语句。

function runTowerExperiment(tower, startTime) {
    var t = startTime;
    tower.on("tick", function() {
        console.log(t); // undefined
        if (bowlingBall.altitude() <= 0) {
            var t = readTachymeter(); //指向的是一个新的内部
            // ...
        }
    });
    // ...更多代码...
}

在 if 内部无意中添加了第二个变量 t，这里的 t 指向的是一个新的内部变量 t 而不是原来的外部变量。

JavaScript中var声明的作用域，从声明处开始向前后两个方向扩散，直到触及函数边界才停止扩散。
变量提升：函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部，且JavaScript 只有声明的变量会提升，初始化的不会。

在上面演示的这种情况下，提升会引发令人不愉快的bug：所有使用变量t进行的计算最终的结果都是NaN。

问题2：循环内变量过度共享

var messages = ["喵！", "我是一只会说话的猫！", "回调（callback）非常有趣!"];
for (var i = 0; i < messages.length; i++) {
    setTimeout(function() {
        console.log(messages[i]); // log三次“undefined”
    }, i * 1500);
}

循环本身及三次timeout回调均共享唯一的变量i。当循环结束执行时，i的值为3（因为messages.length的值为3），此时回调尚未被触发。
所以当第一个timeout执行时，调用console.log(messages[i])，此时i的值为3，所以最终打印出来的是messages[3]的值亦即undefined。

---

let是更完美的var

新的关键词：let。let与var一样，也可以用来声明变量，但它有着更好的作用域规则。

• let声明的变量拥有块级作用域。也就是说用let声明的变量的作用域只是外层块，而不是整个外层函数。

  let声明仍然保留了提升的特性，但不会盲目提升。在第一个示例中，通过将var替换为let可以快速修复问题，如果你处处使用let进行声明，就不会遇到类似的bug。

• let声明的全局变量不是全局对象的属性。这就意味着，你不可以通过window.变量名的方式访问这些变量。它们只存在于一个不可见的块的作用域中，这个块理论上是Web页面中运行的所有JS代码的外层块。

• 形如for (let x...)的循环在每次迭代时都为x创建新的绑定。

  这是一个非常微妙的区别，拿第二个例子来说，如果一个for (let...)循环执行多次并且循环保持了一个闭包，那么每个闭包将捕捉一个循环变量的不同值作为副本，而不是所有闭包都捕捉循环变量的同一个值。因此可以通过将var替换为let修复bug。

• let声明的变量直到控制流到达该变量被定义的代码行时才会被装载，所以在到达之前使用该变量会触发错误。举个例子：

      function update() {
        console.log("当前时间:", t);  // 引用错误（ReferenceError）
        typeof t; // typeof也会抛出一个ReferenceError
        ...
        let t = readTachymeter();
      }
  

  不可访问的这段时间变量一直处于作用域中，但是尚未装载，它们位于临时死区（Temporal Dead Zone，简称TDZ）中。
  ES6 规定暂时性死区和let、const语句不出现变量提升，主要是为了减少运行时错误，防止在变量声明前就使用这个变量，从而导致意料之外的行为。这样的错误在 ES5 是很常见的，现在有了这种规定，避免此类错误就很容易了。
  总之，暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。这样的设计是为了让大家养成良好的编程习惯，变量一定要在声明之后使用，否则就报错。
  （脆弱的性能细节：在大多数情况下，查看代码就可以区分声明是否已经执行，所以事实上，JavaScript引擎不需要在每次代码运行时都额外执行一次变量可访问检查来确保变量已经被初始化。然而在闭包内部有时不是透明的，这时JavaScript引擎将会做一个运行时检查，也就意味着let相对var而言比较慢。）

• 用let重定义变量会抛出一个语法错误（SyntaxError）。

  这一条规则也可以帮助你检测琐碎的小问题。诚然，这亦是var与let的不同之处，当你全局搜索var替换为let时也会导致let重定义语法错误，因为这一规则对全局let变量也有效。

  如果你的多个脚本中都声明了相同的全局变量，你最好继续用var声明这些变量。如果你换用了let，后加载的脚本都会执行失败并抛出错误。

  或者你可以考虑使用ES6内建的模块机制，后面的文章中会详细讲解。

在那些不同之外，let和var几乎很相似了。举个例子，它们都支持使用逗号分隔声明多重变量，它们也都支持解构特性。

注意，class类声明的行为与var不同而与let一致。如果你加载一段包含同名类的脚本，后定义的类会抛出重定义错误。

---

const

const声明的变量与let声明的变量类似，它们的不同之处在于，const声明的变量只可以在声明时赋值，不可随意修改，否则会导致SyntaxError（语法错误）。

    const MAX_CAT_SIZE_KG = 3000; // 正确

    MAX_CAT_SIZE_KG = 5000; // 语法错误（SyntaxError）
    MAX_CAT_SIZE_KG++; // 虽然换了一种方式，但仍然会导致语法错误

    const theFairest;  // 用`const`声明变量后必须要赋值，否则也抛出语法错误。

const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的（即总是指向另一个固定的地址），至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。

const foo = {};

// 为 foo 添加一个属性，可以成功
foo.prop = 123;
foo.prop // 123

// 将 foo 指向另一个对象，就会报错
foo = {}; // TypeError: "foo" is read-only
// 对象冻结应该用Object.freeze

//数组
const a = [];
a.push('Hello'); // 可执行
a.length = 0;    // 可执行
a = ['Dave'];    // 报错

---

引申关于块级作用域与函数声明

ES5 规定，函数只能在顶层作用域和函数作用域之中声明，不能在块级作用域声明。

// 情况一
if (true) {
  function f() {}
}

// 情况二
try {
  function f() {}
} catch(e) {
  // ...
}

上面两种函数声明，根据 ES5 的规定都是非法的。

但是，浏览器没有遵守这个规定，为了兼容以前的旧代码，还是支持在块级作用域之中声明函数，因此上面两种情况实际都能运行，不会报错。

ES6 引入了块级作用域，明确允许在块级作用域之中声明函数。ES6 规定，块级作用域之中，函数声明语句的行为类似于let，在块级作用域之外不可引用。

function f() { console.log('I am outside!'); }

(function () {
  if (false) {
    // 重复声明一次函数f
    function f() { console.log('I am inside!'); }
  }
  f(); // ES5环境log：I am inside!
}());
//等同于↓↓↓↓↓
(function () {
  function f() { console.log('I am inside!'); }
  if (false) {}
  f();
}());

ES6 就完全不一样了，理论上会得到“I am outside!”。因为块级作用域内声明的函数类似于let，对作用域之外没有影响。但是，如果你真的在 ES6 浏览器中运行一下上面的代码，是会报错的，这是为什么呢？

原来，如果改变了块级作用域内声明的函数的处理规则，显然会对老代码产生很大影响。为了减轻因此产生的不兼容问题，ES6 在附录 B里面规定，浏览器的实现可以不遵守上面的规定，有自己的行为方式。

• 允许在块级作用域内声明函数。
• 函数声明类似于var，即会提升到全局作用域或函数作用域的头部。
• 同时，函数声明还会提升到所在的块级作用域的头部。

注意，上面三条规则只对 ES6 的浏览器实现有效，其他环境的实现不用遵守，还是将块级作用域的函数声明当作let处理。

根据这三条规则，在浏览器的 ES6 环境中，块级作用域内声明的函数，行为类似于var声明的变量。

// 浏览器的 ES6 环境
function f() { console.log('I am outside!'); }
(function () {
  var f = undefined;
  if (false) {
    function f() { console.log('I am inside!'); }
  }

  f(); // Uncaught TypeError: f is not a function
}());

考虑到环境导致的行为差异太大，应该避免在块级作用域内声明函数。如果确实需要，也应该写成函数表达式，而不是函数声明语句。
let f = function () { return a }
还有一个需要注意的地方。ES6 的块级作用域允许声明函数的规则，只在使用大括号的情况下成立，如果没有使用大括号，就会报错。

// 不报错
'use strict';
if (true) {
  function f() {}
}

// 报错
'use strict';
if (true)
  function f() {}

---

顶层对象

顶层对象，在浏览器环境指的是window对象，在 Node 指的是global对象。ES5 之中，顶层对象的属性与全局变量是等价的。

ES6 规定，为了保持兼容性，var命令和function命令声明的全局变量，依旧是顶层对象的属性；let命令、const命令、class命令声明的全局变量，不属于顶层对象的属性。也就是说，从 ES6 开始，全局变量将逐步与顶层对象的属性脱钩。

var a = 1;
// 如果在 Node 的 REPL 环境，可以写成 global.a
// 或者采用通用方法，写成 this.a
window.a // 1

let b = 1;
window.b // undefined

---

参考

深入浅出ES6（十四）：let和const
阮一峰的ECMAScript6入门