双胞胎兄弟——let命令与const命令_WebBoy的专栏文章_微信文章

前言

在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] );
    }
  });
};
复制代码