ES6+ let 和 const 命令

知识梳理

1、变量提升

变量还没有被声明，但是我们却可以使用这个未被声明的变量，这种情况就叫做提升，并且提升的是声明。不仅变量可以被提升，函数也可以被提升，并且函数的提升要优于变量的提升，函数提升会把整个函数挪到作用域顶部。

foo()
var foo = 5
function foo() {
  console.log('3')
}
// 输出3

foo() // 输出4
function foo() {
  console.log('3')
}
function foo() {
  console.log('4')
}


getName() // 输出 1
function getName() {
  console.log('1')
}
var getName = function() {
  console.log('2')
}
getName() // 输出2

var 命令会发生变量提升的的现象，即变量可在声明之前使用，而一般逻辑是先声明变量再去使用变量。故为了纠正此现象，let 命令改变了语法行为，即它所声明的变量一定要在声明后使用。

// var
console.log(a);  // 输出undefined，没有值但不会报错
var a = 1;

// let
console.log(b);  // 引用错误ReferenceError: b is not defined.
let b = 2;

2、作用域

在 ES5 中，只有全局作用域和函数作用域，没有块级作用域，这带来了很多不合理的场景

场景一、内层变量可能覆盖外层变量：

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

场景二、用来计数的循环变量泄露为全局变量：

var s = 'hello';

for (var i = 0; i < s.length; i++) {
  console.log(s[i]);
}

console.log(i); // 5

2.1 全局作用域

全局作用域顾名思义，就是在任何地方都能访问到它，在浏览器中能通过 window 对象拿到的变量就是全局作用域下声明的变量。

var name = 'test';
console.log(window.name)   // 输出test
// 这里的 name 就是全局作用域下的变量

2.2 函数作用域 / 局部作用域

函数作用域就是在函数内部定义的变量，也称局部作用域，在函数的外部不能使用这个变量

function bar() {
  var name = 'test';
}
console.log(name);  // undefined

2.3 块级作用域

块级作用域是 ES6 的概念，它的产生需要有一定的条件的，在大括号 {} 中使用 let 或 const 声明的变量，才会产生块级作用域。块级作用域的产生是 let 或 const 带来的，而不是大括号，大括号的作用是限制 let 或 const 的作用域范围。当不在大括号中声明时， let 或 const 的作用域范围是全局。

if (true) let x = 1;     // 报错
if (true) { let x = 1;}  // 不报错

// let 方式声明的变量在 window 下是取不到的
let a = "test";
console.log(window.a)   // undefined

// var 声明的情况下，外层的 num 会被 {} 中的 num 覆盖，所以没有块级作用域的概念
var b = 10;
{
  var b = 20;
  console.log(b)  // 20
}
console.log(b)    // 20

// let 方式声明，{} 内外是互不干涉和影响的
let c = 10;
{
  // c 处于暂时性死区，是不能被使用的，会报错
  console.log(c); // Uncaught ReferenceError: Cannot access 'c' before initialization
  let c = 20;
  console.log(c)  // 20
}
console.log(c)    // 10

块级作用域可以任意嵌套，每一层都是一个单独的作用域，内层作用域可以读取外层的变量，外层无法读取内层的变量会报错

{{
  let x = 'Hello HaHa'
  {
    console.log(x); // Hello HaHa
    let y = 'Hello World'
  }
  console.log(y);   // 引用错误 ReferenceError: y is not defined.
}};

3、暂时性死区

暂时性死区主要是针对 let 和 const 而言的，因为它们不存在变量提升，所以在它们声明变量之前是不能使用的，这个时候如果使用了就会报错，这时候就形成了暂时性的死区，也就是不能被引用。这在语法上，称为 “暂时性死区”（temporal dead zone，简称 TDZ）

{
  console.log(name);  // ReferenceError
  let name = "test";
  
  // 暂时性死区 typeof 也会报错
  typeof x; // ReferenceError
  let x;
  
  //如果一个变量根本没有被声明，使用typeof反而不会报错。
  typeof undeclared_variable // 输出 "undefined"
}

有些“死区”比较隐蔽，不太容易发现。比如：

// 报错
function bar(x = y, y = 2) {
  return [x, y];
}
bar(); // Uncaught ReferenceError: Cannot access 'y' before initialization

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


var x = x; // 不报错
let x = x; // 报错 ReferenceError: y is not defined

4、let命令

let 允许你声明一个作用域被限制在块级中的变量、语句或者表达式。var 声明的变量只能在全局或者整个函数块中。 var 和 let 的不同之处在于 let 是在编译时才初始化。

let 不会在全局声明时创建 window 对象的属性，但是 var 会。

4.1 不能变量提升

// var
{
  console.log(bar); // 输出undefined，没有值但不会报错
  var bar = 1;
}
// let
{
  console.log(name); // 引用错误 ReferenceError: name is not defined.
  let name = 'test';
}

4.2 暂时性死区

在代码块内，使用 let 命令声明变量之前，该变量都是不可用的

{
  console.log(name); // ReferenceError
  let name = 'test';
}

4.2 重复声明报错

let 不允许在同一个函数或块作用域中重复声明同一个变量，否则会引起语法错误（SyntaxError），即使用 var 去声明也是不可以的

{
  let x = 10  // 10
  let x = 18  // Uncaught SyntaxError: Identifier 'x' has already been declared 
}

{
  let y = 10; // 10
  var y = 1;  //Uncaught SyntaxError: Identifier 'y' has already been declared 
}

注意在 switch 语句中只有一个块级作用域，所以下面这种情况也是会报错的

// 报错
let x = 1;
switch(x) {
  case 0:
    let num;
    break;
  case 1:
    let num; //重复声明了
    break;
}

// 不报错
let x = 1;
switch(x) {
  case 0: {// 块
    let num;
    break;
  } 
  case 1: {// 块
    let num;// 这里可以正常声明
    break;
  }
}

5、const 命令

const 的使用类似于 let：

• let 和 const 都只作用于块级作用域内；
• 不能进行变量提升，在声明前不能被使用，否则会抛出异常；
• 存在暂时性死区，在块中不能被重复声明，重复用var声明也不行；

不同的是 const 在声明时必须初始化一个值，而且这个值不能被改变。

// 在声明时必须初始化一个值
const PI; // Uncaught SyntaxError: Missing initializer in const declaration

// 不能被修改
const PI = 3.1415;  // 定义一个圆周率常量 PI
PI = 12  // Uncaught TypeError: Assignment to constant variable.

const 实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。

对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。

但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的（即总是指向另一个固定的地址）

const obj = {};
obj.a = 12     // 12
const arr = [];
arr.push(12);  // 12
arr = {};      // Uncaught TypeError: Assignment to constant variable.

6、var、let 及 const 区别

声明方式	var	let	const
作用域	非块级	块级	块级
变量提升	允许	不允许	不允许
暂时性死区	不存在	存在	存在
重复声明	允许	不允许	不允许
初始值	不需要	不需要	需要

代码练习

Q1:下面的代码输出什么?

function sayHi() {
  console.log(name) 
  console.log(age)
  var name = 'Lydia'
  let age = 21
}

sayHi(); // 输出 undefined 和 ReferenceError

Q2:下面的代码输出什么?

for (var i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i);
  }, 1000*i);
}
//依次输出 3 3 3

for (let i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i);
  }, 1000 * i);
}
//依次输出 0 1 2

Q3:下面的代码输出什么?

for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);
}
// 依次输出 abc abc abc
// for 循环，设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域

Q4:下面的代码输出什么?

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 输出 10

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 输出 6

学习链接

• ECMAScript 6 入门（阮一峰）：let 和 const 命令
• ES6-10入门教程：ES6+ let
• ES6-10入门教程：ES6+ const
• https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/let