雙胞胎兄弟——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] );
    }
  });
};
複製代碼