ES6学习总结之let和const

1. let命令

不存在变量提升

变量提升： 变量可以在声明前使用，值为undefined，例如：

console.log(foo); // 输出undefined
var foo = 2;

而let没有变量提升，一旦变量在声明前使用就会报错，例如：

console.log(bar); // 报错ReferenceError
let bar = 2;

暂时性死区

temporal dead zone，简称 TDZ

暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。

一个大括号｛｝即表示一个块级作用域，只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。凡是在声明let之前就使用这些变量，就会报错。
例如：

if (true) {
  // TDZ开始
  tmp = 'abc'; // ReferenceError
  console.log(tmp); // ReferenceError

  let tmp; // TDZ结束
  console.log(tmp); // undefined

  tmp = 123;
  console.log(tmp); // 123
}

其中，块级作用域内存在let命令，在let声明变量tmp之前，即在暂时性死区内就对tmp做了赋值和打印的操作，这样就会报错。一旦let命令声明了变量，暂时性死区就结束了，之后就可以对变量进行操作。
在let命令声明变量tmp之前，都属于变量tmp的“死区”。

有些死区比较隐蔽，如

function bar(x = y, y = 2) {
  return [x, y];
}

bar(); // 报错

其中y在还没有声明的时候就赋值给了x，属于死区，就会报错。而

function bar(x = 2, y = x) {
  return [x, y];
}
bar(); // [2, 2]

这样就不会报错。

不允许重复声明

let不允许在同一个块级作用域内重复声明变量，也不允许在函数内部重新声明参数，如

function func(arg) {
  let arg;
}
func() // 报错

function func(arg) {
  {
    let arg;
  }
}
func() // 不报错

2. 块级作用域

外层代码块不受内层代码块的影响

例如

function f1() {
  let n = 5;
  if (true) {
    let n = 10;
  }
  console.log(n); // 5
}

如果两次都使用var定义变量n，最后输出的值是 10。
而如果像这样：

var tmp = new Date();
function f() {
  console.log(tmp);
  if (false) {
    var tmp = 'hello world';
  }
}

f(); // undefined

这是因为var没有块级作用域，在f函数内部，tmp被变量提升了，但是却没有访问到tmp的值（因为if的条件是false，永远不会访问到内部代码），因此打印出的是undefined。

外层作用域访问不到内层作用域

{{{{
  {let insane = 'Hello World'}
  console.log(insane); // 报错
}}}};

内层作用域可以定义外层作用域的同名变量。

{{{{
  let insane = 'Hello World';
  {let insane = 'Hello World'}
}}}};

3. const命令

const与let一样有块级作用域，不存在变量提升，会有暂时性死区，不可重复声明。

不同点在于const声明一个只读的常量。一旦声明，常量的值就不能改变。

const PI = 3.1415;
PI // 3.1415

PI = 3;
// TypeError: Assignment to constant variable.

const一旦声明变量，就必须立即初始化，不能留到以后赋值。否则会报错。

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

ES6 声明变量的六种方法

ES5 只有两种声明变量的方法：var命令和function命令。ES6 除了添加let和const命令，后面章节还会提到，另外两种声明变量的方法：import命令和class命令。所以，ES6 一共有 6 种声明变量的方法。

4. 顶层对象

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

window.a = 1;
a // 1

a = 2;
window.a // 2

面代码中，顶层对象的属性赋值与全局变量的赋值，是同一件事。
而ES6中，var命令和function命令声明的全局变量，依旧是顶层对象的属性；另一方面规定，let命令、const命令、class命令声明的全局变量，不属于顶层对象的属性。

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

let b = 1;
window.b // undefined

上面代码中，全局变量a由var命令声明，所以它是顶层对象的属性；全局变量b由let命令声明，所以它不是顶层对象的属性，返回undefined。

5. globalThis对象

这里不再赘述