双胞胎兄弟——let命令与const命令

前言

在JavaScript的ES6语法中，新增了let与const命令，用来声明变量。虽然这两个命令在声明变量方面有不少类似之处，但也有根本上的区别，彷佛像一对双胞胎兄弟，拥有类似的外观，不一样的性格。 本文将详细讲解let与const命令的各自特色，以及它们之间的类似之处。

类似的“外表”

1. 做用域

let命令与const命令声明的变量，只在声明所在的块级做用域内有效。

{
  var a=1;
  let b=2;
  const c=3;
}

a // 1
b // ReferenceError: a is not defined.
c // ReferenceError: a is not defined.
复制代码

2. 不存在变量提高

let命令与const命令声明的变量，都不存在变量提高的状况。

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

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

// const 的状况
console.log(baz); // 报错ReferenceError
const baz = 2;
复制代码

3. 不可重复声明

let命令与const命令声明的变量，在相同的做用域内不能够重复声明。

// 报错
function func() {
  let a = 1;
  var a = 2;
}

// 报错
function func() {
  const a = 1;
  var a = 2;
}

// 报错
function func() {
  let a = 1;
  let a = 2;
}

// 报错
function func() {
  const a = 1;
  const a = 2;
}
复制代码

性格差别

1. 变量赋值

let命令声明变量能够不赋值，const命令声明变量必须赋值。

let a;
const b;

a // undefined
b // SyntaxError: Missing initializer in const declaration
复制代码

2. 变量与常量

let命令声明的是能够从新赋值的变量，而const命令声明的是不能够从新赋值的常量。

let a=123;
a // 123

a=456;
a // 456

const PI = 3.1415;
PI // 3.1415

PI = 3;
// TypeError: Assignment to constant variable.
复制代码

3. const的本质

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

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

// 将 foo 指向另外一个对象，就会报错
foo = {}; // TypeError: "foo" is read-only
复制代码

下面是另外一个例子。const a = [];

a.push('Hello'); // 可执行
a.length = 0;    // 可执行
a = ['Dave'];    // 报错
复制代码

若是真的想将对象冻结，应该使用Object.freeze方法。const foo = Object.freeze({});

// 常规模式时，下面一行不起做用；
// 严格模式时，该行会报错
foo.prop = 123;
复制代码

除了将对象自己冻结，对象的属性也应该冻结。下面是一个将对象完全冻结的函数。var

constantize = (obj) => {
  Object.freeze(obj);
  Object.keys(obj).forEach( (key, i) => {
    if ( typeof obj[key] === 'object' ) {
      constantize( obj[key] );
    }
  });
};
复制代码