ECMAScript 2015(ES6)：let和const命令

这是记录和学习ECMAScript 2015(以下均称为ES6)语法的一个系列文章。在理解ES6的每个新特性之前，我会试图将其与ES5的实现方式做一个对比，以期了解ES5的实现方式所存在的问题以及ES6为什么要做这样的修改，通过对比可以更深入的理解和领悟ES6新的语言特性。这部分的内容涉及的知识点可能会在不少前端Js部分的面试题中出现，希望可以有所裨益。

---

  本文要学习和讨论的是ES6新增的两个变量声明的关键字let和const。在ES5中，我们一般使用var关键字来声明变量：var test = 1, test1 = "kawhi";，这种声明方式会给我们带来一些麻烦，具体来看一下：

  1、变量提升

在ES5中，以var关键字声明的函数和变量总是会被JavaScript解释器隐式地提升(hoist)到包含他们的作用域的最顶端。

  当发生变量提升的时候，在代码中通过var关键字声明的变量在从其作用域开始到声明之前都是可以被使用的，不过值为undefined。看一个例子：

# var关键字带来的变量提升
console.log(foo); // 输出undefined
var foo = 0;

  let改变了这种语法行为，使用let关键字在变量声明之前它是不存在的，这时候调用会发生错误，抛出异常。

# 使用let声明变量不会有变量提升
console.log(bar); // ReferenceError: bar is not defined
let bar = 0;

  let关键字声明变量的这种特性可以引出一个概念：暂时性死区（temporal dead zone，简称 TDZ）。在上述代码中，对变量foo而言，从作用域开始到foo变量被声明这段区域都可以称为变量foo的死区，代码运行到这个阶段是，foo变量是不可被使用的。补充两个例子（来自ECMAScript 6 入门）：

# demo 1
var tmp = 123;
if (true) {
  // 虽然存在全局变量tmp，但是块级作用域内let又声明了一个局部变量tmp，
  // 导致后者绑定这个块级作用域，所以在let声明变量前，对tmp赋值会报错
  tmp = 'abc'; // ReferenceError: tmp is not defined
  let tmp;
}

# demo 2
# 使用let声明变量时，只要变量在还没有声明完成前使用，就会报错。
var x = x;
let x = x; // SyntaxError: Identifier 'x' has already been declared

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

  2、变量重复定义
  在ES5中，使用var语句重复声明变量是合法且无害的，如果你试图读取一个没有声明的变量，Js会报错，在ES5的严格模式下，给一个没有声明的变量赋值也会报错，但在非严格模式下，给一个未声明的变量赋值，Js实际上会给全局对象创建一个同名的属性，并且工作起来像一个正确声明的全局变量。这意味着你可以侥幸不声明全局变量，但这是一个非常不好的习惯并且会造成很多bug。在ES6中，使用let声明的变量不允许在相同作用域内，重复声明同一个变量。

# demo1
function func() {
    let a = 10;
    var a = 1; // SyntaxError: Identifier 'a' has already been declared
}
func();

# demo 2
function func() {
    let a = 10;
    let a = 1; // SyntaxError: Identifier 'a' has already been declared
}
func();

# demo 3
# 在函数内部重新声明参数会报错
function func(arg) {
    let arg; // SyntaxError: Identifier 'arg' has already been declared
}

func();

# demo 4
function func(arg) {
    {
        let arg; // 不会报错
    }
}

func();

  3、变量作用域

JavaScript是基于词法作用域的语言：通过阅读包含变量定义在内的数行源码就能知道变量的作用域。全局变量在程序内始终是有定义的。局部变量在声明它的函数体内以及其所嵌套的函数体内始终是有定义的。

  这是ES5中对于变量作用域的一个简单描述。在一些类似C语言的编程语言中，花括号内的每一段代码都具有各自的作用域，而且变量在声明他们的代码段之外是不可见的，我们称为块级作用域（block scope）。在ES5中没有块级作用域，取而代之使用了函数作用域（function scope），在ES6中，let实际上为 JavaScript 新增了块级作用域。

# demo 1
# 外层作用域无法读取内层作用域的变量
{
    {
        {
            { { let insane = 'Hello World' }
                console.log(insane); // ReferenceError: insane is not defined
            }
        }
    }
};

# demo 2
# 外层代码块不受内层代码块的影响
# 如果两次都使用var定义变量n，最后输出的值才是10
function func() {
    let n = 5;
    if (true) {
        let n = 10
    };
    console.log(n) // 5
};

func()

# demo 3
# 块级作用域的出现，实际上使得获得广泛应用的立即执行函数表达式（IIFE）不再必要了。
// IIFE 写法
(function () {
    var tmp = ...;
    ...
}());

// 块级作用域写法
{
    let tmp = ...;
    ...
}

JavaScript中的函数总是运行在他们被定义的作用域里，而不是他们被执行的作用域里。

var x = 10;

function a() {
    console.log(x)
};

function b() {
    var x = 5;
    a()
};

b() // 10

  作用域是JavaScript中比较重要的一个概念，很多Js部分的面试题都会围绕作用域展开，比如最常见的一个，作用域链（scope chain）。每一段Js代码（全局代码或函数）都有一个与之关联的作用域链，这个作用域链是一个对象列表或者链表，这组对象定义了这段代码“作用域中”的变量。在这里面，函数比较特殊，首先明确一点，在Js里面，函数也是对象，而且和其它对象一样，拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中一个内部属性是[[Scope]]，该内部属性包含了函数被创建的作用域中对象的集合，这个集合被称为函数的作用域链，它决定了哪些数据能被函数访问。
  对作用域链的理解是一个重点也是一个难点，在本文中很难尽述，关于作用域链还会涉及到其他一些知识点的理解，比如with语句修改作用域链和闭包的使用，关于这部分我会重新写一篇文章进行分析。上述就是在ES5中进行变量声明可能会遇到的一些麻烦以及ES6中做的相应处理，接下来我们看看ES6中还提供了哪些关于变量的新的特性。

  1、const命令

  const声明一个只读的常量，一旦声明（且声明时必须同时进行赋值），常量的值就不能改变。const的作用域与let命令相同：只在声明所在的块级作用域内有效；const命令声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用；const声明的常量，也与let一样不可重复声明。

# demo 1
const PI = 3.1415;
PI = 3; // TypeError: Assignment to constant variable.

# demo 2
const foo // SyntaxError: Missing initializer in const declaration

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

  我们知道，JavaScript中的数据类型分为两类：原始类型（primitive type）和对象类型（object type）。对于包括数值、字符串和布尔值等在内的原始类型数据，值就保存在变量指向的那个内存地址里，因此等同于常量。但对于对象类型（也被称为复合类型）的数据（主要是对象和数组），变量所保存的是一个指向其内存地址的指针，const只能保证这个指针是固定的，至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。

  2、关于顶层对象的讨论

ES5 之中，顶层对象的属性与全局变量是等价的。
顶层对象的属性与全局变量挂钩，被认为是 JavaScript 语言最大的设计败笔之一。

  在浏览器ES5环境中，为了在不同的作用域内进行数据共享，我们经常会将共享的数据定义为全局变量或者定义为window对象的属性，在ES5中，这是完全等价的。关于顶层对象，在ES5中指的是window对象，在Node环境中指的是global对象。关于顶层对象的数据与全局变量等价，阮一峰在ECMAScript 6 入门提到了这种设计的一些问题。

首先是没法在编译时就报出变量未声明的错误，只有运行时才能知道（因为全局变量可能是顶层对象的属性创造的，而属性的创造是动态的）；其次，程序员很容易不知不觉地就创建了全局变量（比如打字出错）；最后，顶层对象的属性是到处可以读写的，这非常不利于模块化编程。另一方面，window对象有实体含义，指的是浏览器的窗口对象，顶层对象是一个有实体含义的对象，也是不合适的。

  关于顶层对象本身，在不同Js环境中表现也不一致。

• 浏览器里面，顶层对象是window，但Node和Web Worker没有window；
• 浏览器和Web Worker里面，self也指向顶层对象，但是Node没有self；
• Node里面，顶层对象是global，但其他环境都不支持。

  在ECMAScript 6 入门阮一峰也给出了两种获取顶层对象勉强可用的方法和一个用来获取顶层对象的库System.global：

// 方法一
(typeof window !== 'undefined' ?
    window :
    (typeof process === 'object' &&
        typeof require === 'function' &&
        typeof global === 'object') ?
    global :
    this);

// 方法二
var getGlobal = function() {
    if (typeof self !== 'undefined') { return self; }
    if (typeof window !== 'undefined') { return window; }
    if (typeof global !== 'undefined') { return global; }
    throw new Error('unable to locate global object');
};

  ES5只有两种声明变量的方法：var命令和function命令。ES6 除了添加let和const命令，另外两种声明变量的方法：import命令和class命令，加上var命令和function命令，ES6 一共定义了六种声明变量的方法。关于import命令和class命令的学习，我会在之后的文章中记录下来。
  最后，对本文的内容做一下回顾和梳理，在本文中，为了更好的理解let命令和const命令，我首先对ES5中使用var关键字声明变量所存在的问题进行了罗列，包括var命令所引起的变量提升、重复声明和作用域耦合等，同时，针对性的对ES6中的应对方式做了说明。接着，我介绍了ES6中新增的用于进行常量定义的const命令，然后对顶层对象在不同Js环境中的不同表现做了说明。在本文中，大量引用和借鉴了阮一峰先生在ECMAScript 6 入门一书中的观点，同时结合JavaScript权威指南 中的诸多内容和我自己的一些理解进行记录。正如我在文章开头所提到的，作为Js的基础知识，本文中的很多内容都有可能会在Js部分的面试题中出现，希望大家都可以掌握和理解。